实施例

Question

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

'web对象'只是我写的一个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，因为我希望将所有内容都保留为跨平台＆amp;尽可能跨浏览器友好。所以我正在寻找最简单的解决方案。如果有人有关于Articulate Presenter '13（甚至是Moodle）的其他信息，我会全神贯注 - 目标是在学习者进入下一张幻灯片之前强制完成视频。

Answer 1

目标是强制视频完成，然后学员才能进入下一张幻灯片。

在这种情况下不使用JavaScript就像期待在不订购披萨的情况下提供披萨（而JavaScript实际上不是跨平台问题）。

视频元素告诉浏览器环境已完成（视觉效果/用户界面除外）的唯一方法是广播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>

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

1 个答案:

实施例