Question

我知道这个Topic已经在这里讨论了但是我的代码似乎有一个错误，它不会阻止在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添加到您的iframe中（根据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>

切换幻灯片后Bxslider暂停视频

1 个答案: