Bxslider暂停切换幻灯片后的视频

Question

我知道这个话题已经在这里讨论过了，但似乎有一个错误，我的代码不会停止播放Bxslider中的视频，而是重新加载整个页面。

<ul class="headslider">    
    <li class="youtube-player cf"> 
     <iframe src="https://www.youtube.com/embed/E5ln4uR4TwQ?autoplay=1&amp;rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
    </li> 
    <li class="youtube-player cf"> 
     <iframe src="https://www.youtube.com/embed/6KzJtBr6Yxg?autoplay=1&amp;rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
    </li> 
    <li class="youtube-player cf"> 
     <iframe src="https://www.youtube.com/embed/LNEYhwAp7nQ?autoplay=1&amp;rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
    </li> 
</ul> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.headslider').bxSlider({ 
     mode: 'fade', 
     auto: false, 
     speed: 1150, 
     pause: 5000, 
     pager: false, 
     onSlideBefore: function() { 
      $('.youtube-player').find('iframe').each(function() { 
      this.pause(); 
      }); 
     } 
    }); 
}); 
</script> 

Answer 1

我不确定你想要完成什么，我很新的Javascript。从外观上看，您需要致电YouTube API媒体资源。

您可以查看API参考： Youtube API Reference

在这个例子中，我添加的ID给您的I帧（你也可以使用div的，而不是根据YouTube的）。可能推荐使用div并让Youtube API创建iframe。

Youtube API在加载后会调用bxslider。我默认播放第一个视频，然后每次滑过视频时都会暂停，然后只播放当前视频。

您还可以通过引用YT.Player对象来暂停/恢复视频。

<ul class="headslider">    
<li class="youtube-player cf"> 
    <iframe id="video1" src="https://www.youtube.com/embed/E5ln4uR4TwQ?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
</li> 
<li class="youtube-player cf"> 
    <iframe id="video2" src="https://www.youtube.com/embed/6KzJtBr6Yxg?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
</li> 
<li class="youtube-player cf"> 
    <iframe id="video3" src="https://www.youtube.com/embed/LNEYhwAp7nQ?rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="1"></iframe> 
</li> 
</ul> 

<script> 
var player; 
var player2; 
var player3; 
function onYouTubeIframeAPIReady() { 
     player = new YT.Player('video1', { 
     videoId: 'E5ln4uR4TwQ', 
     events: { 
      onReady: playVideo 
     } 
    }); 
     player2 = new YT.Player('video2', { 
     videoId: '6KzJtBr6Yxg', 
    }); 
     player3 = new YT.Player('video3', { 
     videoId: 'LNEYhwAp7nQ', 
    }); 
    callbxSlider(); 
} 

function playVideo(event) { 
    event.target.playVideo(); 
} 

function callbxSlider() { 
$('.headslider').bxSlider({ 
     mode: 'fade', 
     auto: false, 
     speed: 1150, 
     pause: 5000, 
     pager: false, 
     onSlideBefore: function(element) { 
      newVideo = element["0"].childNodes[1]; // capture current iframe 
      player.pauseVideo(); 
      player2.pauseVideo(); 
      player3.pauseVideo(); 

      switch (newVideo.id) { 
       case "video1": player.playVideo(); 
       break; 
       case "video2": player2.playVideo(); 
       break; 
       case "video3": player3.playVideo(); 
      } 
     } 
    }); 
} 
</script>