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

Posted 2023-02-24

【中文标题】光滑的滑块 - 当滑块进入下一帧时暂停 YouTube 剪辑

【英文标题】：Slick slider - Pause a YouTube clip when slider goes to next frame

【发布时间】：2015-01-09 15:46:42

【问题描述】：

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

【参考方案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>