我想创建一个带有Youtube视频的Slick滑块,所以我可以使用youtube iFrame直接嵌入代码到幻灯片,它会起作用,但我想要实现的是当幻灯片更改时视频应该停止/暂停播放。 / p>
我正在使用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&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&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的解决方案,但没有运气。任何帮助将不胜感激,谢谢。
答案 0 :(得分:4)
您应该使用Slick的beforeChange
事件并将postMessage发送到iframe的contentWindow。在Code中,这可能看起来像:
$('.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
添加到视频的网址中。您示例中的第一个视频没有它。