1

我正在使用引导轮播（v3.0）来滑动一些 youtube/vimeo 视频和图像。当视频在幻灯片中时，我需要播放多个视频/图像和自动播放视频。代码如下：

在标题中：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom</title>
<link rel='stylesheet' href='http://getbootstrap.com/dist/css/bootstrap.css' type='text/css' media='all' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src='http://getbootstrap.com/dist/js/bootstrap.js'></script>

在身体里：

<div id="container">
    <div id="body">
        <div class="row">
            <div class="col-9" id="panel1">
                <div class="carousel" id="slideshow">
                    <div class="carousel-inner">
                        <div class="item" active>
                            <img src="http://farm2.staticflickr.com/1064/1299342518_d874c634e6.jpg" />
                        </div>
                        <div class="item">
                            <img src="http://farm4.staticflickr.com/3673/9585032718_52afe21449.jpg" />
                        </div>
                        <div class="item">
                            <iframe width="560" height="315" src="http://www.youtube.com/embed/1iIZeIy7TqM" frameborder="0" allowfullscreen data-videoid="1iIZeIy7TqM" id="C2dFFiN00SY"></iframe>
                        </div>
                        <div class="item">
                            <h1>Parfiat</h1>
                            <p>You are here after the video!!!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

正文下方的脚本：

    <script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
<script>
    function onPlayerReady(event) {
        event.target.playVideo();
    }

      // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {          
            alert('Video is done... how do I can add the code to advance this to next slide and or to continue slideshow?');
        }
    }   

    function playVideo(videoID){
        //alert('this video ID is ' + videoID);

        var player = new YT.Player(videoID, {
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange 
                    }
                });
    }
</script>
<script>
    $('.carousel').carousel({
        interval: 2000
    })  

    $('.carousel').on("slide.bs.carousel", function (event) {
        // Bootstrap carousel marks the current slide (the one we're exiting) with an 'active' class
        var $currentSlide = $(".carousel").find(".active iframe");
        if ($currentSlide.length) { playVideo($currentSlide.attr("id")); }
        if ($currentSlide.length) { onYouTubeIframeAPIReady(); }        

    });
</script>

我想确保这个幻灯片继续循环播放。您对此代码的帮助将不胜感激。

4

1 回答 1

1

以防万一有人碰巧像我一样遇到这个问题，请在此处查看答案：播放视频时暂停引导轮播

于 2017-10-18T12:35:31.200 回答