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

【问题标题】：How can you stop a Flexslider when a YouTube video begins playing?当 YouTube 视频开始播放时，如何停止 Flexslider？
【发布时间】：2014-04-02 10:45:03
【问题描述】：

我的滑块内部包含一个视频。第一张幻灯片包含此视频。播放 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 视频播放上暂停滑块 stackoverflow.com/questions/8950146/…

标签： javascript jquery html

【解决方案1】：

为了实现这一点，您需要先收听视频播放器事件，然后您可以在此基础上控制 flexslider。

为此，您需要阅读这篇关于在您的页面上嵌入 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(); 
  });

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

快乐编码:)

【讨论】：