【问题标题】：How do I force an html5 embedded video to finish playing?如何强制 html5 嵌入视频完成播放？
【发布时间】：2015-08-16 18:52:37
【问题描述】：
一些背景知识：这实际上是 Articulate Presenter '13 课程中的一个 Web 对象，加载到 Mooodle LMS 的一个实例中。
'web object'只是我写的一个html文件，其相关部分是这样写的：
<video width="720" height="406" controls src="http://download.atsmedia.com/LMS/PGE/COUB-Sale.mp4" type="video/mp4">
<p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
</video>
我一直在避免使用 javascript，因为我想让一切都尽可能地跨平台和跨浏览器友好。所以我正在寻找最简单的解决方案。如果有人有与 Articulate Presenter '13（甚至 Moodle）相关的其他信息，我会全力以赴 - 目标是在学习者进入下一张幻灯片之前强制视频完成。
【问题讨论】：
标签：
javascript
html
html5-video
【解决方案1】：
目标是强制视频在学习者前进到下一张幻灯片之前完成。
在这种情况下不使用 JavaScript 就像期待披萨送达却没有订购一样（而且 JavaScript 确实不是跨平台问题）。
视频元素可以告诉浏览器环境它已经完成（不包括视觉/UI）的唯一方法是为ended 广播事件。要获取此事件，您需要 JavaScript。
在结束的事件中，您可以启用下一步按钮或类似的东西：
示例
下面的视频将跳到 8:04 分钟（在支持媒体片段的浏览器中 - 因此您不需要跳到结尾，不是必需的），当视频结束时，其上方名为 NEXT 的按钮将是启用 -
document.querySelector("video").addEventListener("ended", function() {
// enable NEXT button when video finished:
document.querySelector("button").disabled = false;
})
body {background:#999}
button:disabled {color:#ccc}
<button disabled=true>NEXT</button><br>
<video autoplay width="720" height="406" controls src="http://download.atsmedia.com/LMS/PGE/COUB-Sale.mp4#t=484" type="video/mp4">
</video>