当YouTube视频开始播放时，如何停止Flexslider

How can you stop a Flexslider when a YouTube video begins playing?

本文关键字：何停止 Flexslider 播放 YouTube 视频 开始      更新时间：2023-09-26

我的滑块内部包含一个视频。第一张幻灯片包含此视频。当播放 Youtube 视频时，如何停止 Flexslider 动画？

$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "fade",
    pauseOnHover: true,
    start: function(slider){
      $('body').removeClass('loading');
      slider.pause();
        setTimeout(function(){
        slider.play();
        }, 6000);
    },
    after: function(slider){
        $('div.flexslider').mouseover(function(){
        slider.pause();
    });
     $('div.flexslider').mouseout(function(){
        slider.resume();
    });
}
  });
});


<ul class="slides" style="z-index:99;">
         <li>
            <div class="banner_video">
                <iframe width="450" height="280" src="//www.youtube.com/embed/Au46iRGFuUw?rel=0&autoplay=1" frameborder="0" allowfullscreen id="banner_video"></iframe>
            </div>
            <a href="master_diploma_programme.php">
            <img src="images/banner/home/master-diploma.jpg" alt="Master Diploma Programe" title="Master Diploma Programe" />
            </a>
         </li>
         <li><a href="franchise_opportunity_maharastra.php"><img src="images/banner/home/Invite_maharastra.jpg"  alt="Franchise Business for Maharashtra" title="Franchise Business for Maharashtra" width="1004" height="300" /></a></li>
    </ul>
好吧，

为了实现这一点，您需要先收听 视频播放器事件 ，您可以根据它控制弹性滑块。

为此，您需要阅读这篇关于在您的页面上嵌入 youtube 播放器并使用 YouTube API 收听事件的文章。

https://developers.google.com/youtube/iframe_api_reference#Getting_Started

因此，根据视频开始/停止的时间，您可以控制.after块中的FlexSlider

  after: function(slider){
    if(bVideoStartedBit)   // this is set when video started via youtube Api
      slider.pause();
    else if(bVideoStoppedBit) // this is set when video stopped via youtube Api
      slider.play(); 
  });

注意：请确保为滑块留出足够的时间（更改下一张幻灯片的时间超时），以便捕获用户单击视频

快乐编码:)

相关文章：