需要使一个完整的页面滑块上的视频

Question

所以，我对代码和所有这些东西有点初学者。我需要做一个全页滑块，与视频作为幻灯片之一。它必须等待视频播放完毕，才能转到下一张幻灯片。

我通过使用嵌入视频(它存储在我的pc中的一个文件夹中)来管理接近我的目标的东西，但它只是播放和停止，有时滑块在没有完成的情况下继续，我不禁认为应该有一个更好，更有效的方法。

我正在使用bootstrap，并考虑将其应用到这个模板:http://startbootstrap.com/template-overviews/full-slider/

Answer 1

将视频放入其中一个bootstrap carousel项中，如下所示:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <video src="myvideo.mpg" id="myVideo"></video>
        </div>
        <div class="item">
            <img src="..." alt="...">
        </div>
    </div>
</div>

然后听"ended"事件，在视频播放完成后转到下一个项目:

<script type="text/javascript">
    $("#carousel-example-generic").carousel({ interval: false}); // this prevents the auto-loop
    document.getElementById('myVideo').addEventListener('ended', myHandler, false);
    function myHandler(e) {
        $("#carousel-example-generic").carousel('next');
    }
</script>