Slick-carousel - 如何在幻灯片更改时暂停和播放嵌入式 Youtube 视频？

Question

我想用 Youtube 视频创建一个 Slick 滑块，所以我可以使用 youtube iFrame 直接将代码嵌入到幻灯片中，它会起作用，但我想要实现的是当幻灯片改变时视频应该 stop/pause 正在播放。

我正在使用 Slick Slider。

这是我正在使用的 HTML::

<div class="entry_slider_video">
     <div data-thumb="http://placehold.it/140x100">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/gLJdzky63BA" frameborder="0" allowfullscreen></iframe>
     </div>
     <div data-thumb="http://placehold.it/140x100"><iframe width="420" height="315"  src="https://www.youtube.com/embed/Tf4sa0BVJVw?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>
     </div>
<div data-thumb="http://placehold.it/140x100">
    <iframe width="420" height="315"src="https://www.youtube.com/embed/QF903RaKLvs?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen>
   </iframe>
  </div>

和 JS:::

$('.entry_slider_video').slick({
              arrows: false,
              fade: true,
              autoplay: true,
              dots: true,
              customPaging : function(slider, i) {
                  var thumb = $(slider.$slides[i]).data('thumb');
                  return '<a class="enty_thumbs"><img src="'+thumb+'"></a>';
                }
 });

我知道我必须使用 Youtube API(https://developers.google.com/youtube/iframe_api_reference) 才能实现此目的，我尝试了 SO 中的一些解决方案，但没有成功。任何帮助将不胜感激，谢谢。

Answer 1

您应该使用 Slick 的 beforeChange 事件并向 iframe 的 contentWindow 发送一个 postMessage。在代码中，这可能看起来像：

$('.entry_slider_video').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var data = {"event":"command","func":"pauseVideo","args":""};
    var message = JSON.stringify(data);
    $("iframe", slick.$slides[currentSlide])[0].contentWindow.postMessage(message, '*');
});

不要忘记将参数 enablejsapi=1 添加到视频的 url 中。您示例中的第一个视频没有。

Slick-carousel - 如何在幻灯片更改时暂停和播放嵌入式 Youtube 视频？

Slick-carousel - How To Pause and Play embedded Youtube videos on slide Change?

youtube

jquery

youtube-iframe-api

slick.js