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

2019-11-21 00:37:30 阅读：397 来源： 互联网

标签：youtube bxslider jquery-plugins javascript jquery

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

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

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

解决方法:

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).

标签：youtube,bxslider,jquery-plugins,javascript,jquery
来源： https://codeday.me/bug/20191120/2047897.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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