1
我使用引導傳送帶（v3.0）來滑動某些youtube/vimeo視頻和圖像。當視頻在幻燈片中時，我需要播放多個視頻/圖片和AUTOPLAY視頻。提供代碼，如下：如何在Bootstrap Carousel中的視頻後進入下一張幻燈片？
在標題：
<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>
我要確保這個幻燈片繼續循環。您對此代碼的幫助將不勝感激。