所以,我有点像代码和所有这些东西的初学者。我需要创建一个整页滑块,其中一个视频作为幻灯片之一。它必须等待视频完成播放才能进入下一张幻灯片。
我通过使用嵌入视频(它存储在我的电脑中的文件夹中)来管理我的目标附近的东西,但它只是播放和停止,有时滑块继续,甚至没有完成,我无法帮助但是认为应该有更好,更有效的方式。
我正在使用bootstrap,并考虑将其应用于此模板: http://startbootstrap.com/template-overviews/full-slider/
答案 0 :(得分:0)
将视频放入其中一个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>