使用html5的交互式视频

Question

我是actionScript编程的新手。我知道一些超文本标记语言，我目前正在学习html5。我需要通过将html内容放在视频的特定时间来制作交互式视频。我会更简洁地说：

例如，我有一个5分钟长的视频，假设从第二个3:50到4:00，我需要在视频上显示两个框，每个框代表一个选项。如果在3:50，视频向观众显示了在两个路径中进行选择的可能性(例如，视频告诉用户在这些路径中进行选择)，则观众将有可能通过点击将在该时间间隔中出现的两个框中的一个来选择路径之一。我知道这需要通过标签和超链接来实现。

我的问题是，我如何告诉html5视频播放器从3:50分钟到4:00分钟显示一个画布，其中将显示两个超链接？

谢谢你的关注，我将非常感谢你的帮助。我需要一些指导，因为我已经找了很多天了。

Answer 1

对于您的用例，您似乎希望能够通过在视频中跳转到不同时间的交互来控制用户的视频流。

使用html5视频播放器在视频中查找不同的时间(使用currentTime)您可以在视频顶部的框上创建单击事件，并设置单击该框时的时间，使用：

// Jump 30 seconds into the video
var time = '30';
var video = document.createElement('video');
video.src = "video.mp4";

// Set the time
video.currentTime = time;
video.play();

您可以查看我们如何使用html5和JS创建interactive video authoring tool(开源)并使用它。

如果你不想花时间编写交互式视频，你应该通过这个simple example查看H5Ps创作工具。你也可以在H5P.org上测试创建你自己的。这个工具是完全免费的。

Answer 2

我可能错了，但我相信你指的是javascript而不是actionscript。如果是这样的话，我肯定会去看看这个Video.JS。当你到达当前时间时，你会触发你的方法/函数，它会在视频的顶部添加任何你想要的东西。

变量whereYouAt = myPlayer.currentTime()；

但是，如果您指的是actionscript，那么您使用的是flash播放器。因此，我建议你看看这个 Vimeo Player

currentTime:Number read-only返回当前视频的播放时间。