javascript - BXSlider 在切换幻灯片时暂停 Youtube 视频

Question

我有以下 BXSlider 示例，其中我有 4 张幻灯片，每张幻灯片都有一个 Youtube 视频。问题是当我播放视频并转到下一张幻灯片时，它会继续播放:

http://jsfiddle.net/isherwood/XWL9Y/

$(document).ready(function () {
$('.bxslider').bxSlider();
});

有人可以帮忙让 youtube 视频在转到下一张幻灯片时暂停吗？

Answer 1

var slider = $("#gallery").bxSlider({
    adaptiveHeight:true,
    auto:true, 
    autoStart:true, 
    autoControls:true, 
    video:true,
    onSlideAfter: function(slide){
       if (slide.find("iframe:first").length) {
           slider.stopAuto();
       }
    }
});

如果您将 iframe 用于 slider 中的其他内容，您也可以使用类似 slide.find("div.fluid-width-video-wrapper:first") 的方法。

Source

----更新----

var slider = $('.bxslider').bxSlider({
  onSlideAfter: function(slide, oldindex, currentSlide){
    oldSlide = $( '.bxslider > li:nth-child(' + (oldindex+1) + ')');
      youtubeVideo = oldSlide.find('iframe[src*=youtube]');
      if ( youtubeVideo.length ) {
        youtubeVideo.get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
      }
  }
});

Source

----编辑----

还要确保将 ?enablejsapi=true 添加到 iframe src，否则上面的 JavaScript 将无法工作 (source)。