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

Posted 2023-02-24

【中文标题】BXSlider 切换幻灯片时暂停 Youtube 视频

【英文标题】：BXSlider Pause Youtube Video When Switching Slides

【发布时间】：2015-02-14 12:30:09

【问题描述】：

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

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

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

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

【参考方案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 用于滑块中的其他内容，您也可以使用 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）。

【参考方案2】：

经过长时间的搜索，我找到了解决方案。试试这个：

onSlideAfter: function()
    jQuery("iframe").each(function()  
        var src= jQuery(this).attr('src');
        jQuery(this).attr('src',src);  
    );

这将停止所有视频。它基本上是重置视频网址。