Question

所以，我有点像代码和所有这些东西的初学者。我需要创建一个整页滑块，其中一个视频作为幻灯片之一。它必须等待视频完成播放才能进入下一张幻灯片。

我通过使用嵌入视频（它存储在我的电脑中的文件夹中）来管理我的目标附近的东西，但它只是播放和停止，有时滑块继续，甚至没有完成，我无法帮助但是认为应该有更好，更有效的方式。

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

Answer 1

将视频放入其中一个bootstrap轮播项目中，如下所示：

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

然后听完“已结束”事件，在视频播放完毕后转到下一个项目：

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

需要制作带有视频的整页滑块

1 个答案: