javascript - 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

在此示例中，我向您的 iframe 添加了 ID(根据 YouTube，您也可以使用 div 来代替)。可能建议使用 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>