我正在使用引导轮播（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>
我想确保这个幻灯片继续循环播放。您对此代码的帮助将不胜感激。