jquery – 滑动滑块 – 当滑块进入下一帧时暂停YouTube剪辑

前端之家收集整理的这篇文章主要介绍了jquery – 滑动滑块 – 当滑块进入下一帧时暂停YouTube剪辑前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我使用光滑的滑块作为多个图库滑块,其中一个项目是YouTube剪辑.一切都很好,除非用户点击视频继续播放的下一张或上一张幻灯片.我似乎找不到任何关于如何在YouTube剪辑不合时自动暂停或停止YouTube剪辑的文档.

最佳答案
我正在使用光滑的v1.5.9来解决这个问题,我现在正在使用jquery .each循环遍历所有iframe,并在触发光滑滑块的afterChange事件后要求每个iframe停止播放.

如何阻止iframe:

您可以参考here以了解如何停止/暂停youtube iframe.

Slick Slider的afterChange活动:

您可以访问slick-slider的github以了解有关其events/settings的更多信息

以下是我的参考代码

$('.hero-slider').on('init',function(event,slick){
    //init code goes here
}).on('afterChange',function(e,o){
    //on change slide = do action
    $('iframe').each(function(){
        $(this)[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}','*');    
    });
}).slick();

p / s:记住youtube iframe的参数的enablejsapi = 1: