如何强制 html5 嵌入视频完成播放？

Posted 2023-05-07

【中文标题】如何强制 html5 嵌入视频完成播放？

【英文标题】：How do I force an html5 embedded video to finish playing?

【发布时间】：2015-08-16 18:52:37

【问题描述】：

一些背景知识：这实际上是 Articulate Presenter '13 课程中的一个 Web 对象，加载到 Mooodle LMS 的一个实例中。

'web object'只是我写的一个html文件，其相关部分是这样写的：

<video   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）相关的其他信息，我会全力以赴 - 目标是在学习者进入下一张幻灯片之前强制视频完成。

【参考方案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   controls src="http://download.atsmedia.com/LMS/PGE/COUB-Sale.mp4#t=484" type="video/mp4">
</video>

【讨论】：

非常感谢您的帮助。这对我来说是很好的信息。