光滑的滑块 - 当滑块进入下一帧时暂停 YouTube 剪辑答案

【问题标题】：Slick slider - Pause a YouTube clip when slider goes to next frame光滑的滑块 - 当滑块进入下一帧时暂停 YouTube 剪辑
【发布时间】：2015-01-09 15:46:42
【问题描述】：

我将光滑的滑块用作多画廊滑块，其中一个项目是 YouTube 剪辑。一切都很好，除非用户单击下一张或上一张幻灯片，视频会继续播放。我似乎找不到任何有关如何在超出帧时自动暂停或停止 YouTube 剪辑的文档。

【问题讨论】：

标签： jquery youtube slider

【解决方案1】：

我正在使用 slick v1.5.9 来解决这个问题，我目前正在使用 jquery .each 循环遍历所有 iframe 并要求每个 iframe 在 slick 滑块的 afterChange 事件发生后停止播放触发。

如何停止 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 ：

<iframe src="https://www.youtube.com/embed/xxxxxx?autoplay=0&enablejsapi=1"></iframe>

【讨论】：