Question

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

在标题中：

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

我想确保此幻灯片继续循环播放。非常感谢您对此代码的帮助。

Answer 1

万一有人碰巧碰到这个，请看这里的回答：Pausing Bootstrap carousel When a Video playing

如何在Bootstrap Carousel中播放视频后进入下一张幻灯片？

1 个答案: