动画内容的旋转木马

Question

对于一个项目工作，我需要实现一个动画内容的旋转木马。我用过引导旋转木马，但它不起作用，我想它只适用于图像。我需要它的div，其中有动画内容。

基本上我的标记是这样的

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <div class="screen" id="screen-1" data-video="vid/scene1.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-2" data-video="vid/scene2.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-3" data-video="vid/scene3.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-4" data-video="vid/scene4.mov"></div>
        </div>
        <div class="item">
            <div class="screen" id="screen-5" data-video="vid/scene5.mov"></div>
        </div>
    </div>
</div>

我已经包括引导文件和启动旋转木马使用

$('.carousel').carousel();

.mov文件包含需要一个接一个地显示的动画视频。我怎样才能做到这一点？

Answer 1

• 在旋转木马上添加视频

取而代之的是div，使用视频标记：

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <video id="video1" width="400" height="200" autoplay controls>
                <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
            </video>
        </div>
        <div class="item">
            <video id="video2" width="400" height="200" controls>
                <source src="http://video.webmfiles.org/elephants-dream.webm" type="video/webm">
            </video>
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

• 一个接一个播放视频

添加一个javascript事件，检查视频是否已经结束显示，如果是，则转到下一个视频并播放它。(别忘了禁用旋转木马自动幻灯片)。

$('#myCarousel').carousel('pause');

var video1 = document.getElementById("video1");
var video2 = document.getElementById("video2");

video1.onended = function(e) {
    $('#myCarousel').carousel('next');
    video2.play();
}

小提琴上的一个样本