Slick-carousel-如何在幻灯片更改上暂停和播放嵌入式YouTube视频?

问题描述

我想用Youtube视频创建一个Slick滑块，所以我可以使用youtube iFrame将代码直接嵌入到幻灯片中，并且可以正常工作，但是我想要实现的是当幻灯片更改时Video应该停止/暂停播放.

I want to create a Slick slider with Youtube videos, So I can use youtube iFrame embed code directly to slides, and it will work, But what I want to achieve is When the slide changes Video should stop/pause playing.

我正在使用Slick Slider.

I am using Slick Slider.

这是我正在使用的HTML:

Here Is the HTML I am Using::

<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的一些解决方案，但是没有运气.任何帮助将不胜感激，谢谢.

I know I have to use Youtube API(https://developers.google.com/youtube/iframe_api_reference) inorder achieve this, I have tried some of the solutions from SO, but no luck. any help will be appreciated, thank you.

推荐答案

您应该使用Slick的beforeChange事件，并将postMessage发送到iframe的contentWindow.在代码中，它可能类似于:

You should use the beforeChange event of Slick and send a postMessage to the contentWindow of the iframe. In Code this could look like:

$('.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添加到视频的网址中.您的示例中的第一个视频没有该视频.

Don't forget to add the parameter enablejsapi=1 to the url of the video. The first video in your example doesn't have it.

这篇关于Slick-carousel-如何在幻灯片更改上暂停和播放嵌入式YouTube视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！