将测验嵌入到html5视频中 - 在富有可自定义的播放器中提示点

Question

Coursera在视频讲座中有这些互动问题

• 我怎么能自己实现呢，
• 或者更好的是，这个功能是否存在供公众使用？

此外，我正在尝试决定投资哪个HTML5视频播放器/平台，关键标准是功能丰富（以便不重新发明轮子/花费大量时间实现视频播放器功能）以及高度可定制（针对那些自定义需求）。

• 即。我应该用哪个玩家来进行测验，
• 但在不久的将来我还需要添加Coursera所具有的速度功能
• 我需要隐藏式字幕支持
• 并希望不时叠加幻灯片
• 以及在不同源分辨率（360p，720p等）之间切换的所有预期功能，它应该适用于IE，Firefox，Chrome，Safari，Android和iOS原生浏览器等。

候选人

• 在自定义和功能设置方面，SublimeVideo似乎排在首位，但我不知道when they will support subtitles。

• 尚未对Flowplayer进行过多次研究，这对我的目的会更好吗？

• Jwplayer适用于所有标准功能，并且包含字幕支持，但我还没有真正看到任何插件，除了美观外观，深度定制似乎并不是他们关注的焦点/力量？

• 或videojs

• 或其他什么呢？

Answer 1

Flowplayer和Jwplayer是很棒的玩家，你可以做你想做的事，但在免费版中，你无法移除他们的品牌。我试着坚持你不担心许可证的开源项目。

我已经使用Mediaelementjs做了类似的事情。它支持您目前所需的一切，并且他们将在其网站上宣布的未来的某个时刻支持变速。然而，自从我开始观看以来已经有一年多了，所以可能你的“不久的将来”就在他们“即将到来”之前。

我认为你最好的免费选择是Videojs。他们也支持您所需要的一切。对于变速，有this plugin。

基本上你在timeupdate事件中设置了一个监听器，当它到达你需要的点时，你附上测验html以覆盖视频区域。

Answer 2

我广泛使用过flowplayer。我刚刚开始深入了解他们的新HTML5版本。流媒体许可是合理的。它有一个用于执行字幕的插件，提示点功能非常有效。我也喜欢他们有Flash版本，适用于后备，我仍然使用它进行rtmp流式传输。

我已经使用Flash版本构建了一个带有同步幻灯片的视频演示者，我将转换为HTML5版本。我用它来制作带有Powerpoint演示文稿的扬声器视频。有时候我们会进行调查（现场），所以我也计划建立调查幻灯片的选项。

你可以看一下我在这里建立的例子（它有一些失败的结局）。 Example synchronized video slide presentation（我与Flowplayer没有任何关系.WebVideoDesk，链接页面上的品牌，是我计划有一天推出的服务。）