html5互动视频

Posted 2023-02-18

【中文标题】html5互动视频

【英文标题】：interactive video with html5

【发布时间】：2012-08-07 05:03:41

【问题描述】：

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

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

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

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

【参考方案1】：

我可能是错的，但我相信你的意思是 javascript 而不是 actionscript。如果是这种情况，那么我肯定会检查一下Video.JS。 当您到达当前时间时，您会触发您的方法/功能，该方法/功能会在视频顶部添加您想要的任何内容。

var whereYouAt = myPlayer.currentTime();

但是，如果您指的是动作脚本，那么您使用的是 Flash 播放器。所以我建议你看看这个 Vimeo Player

currentTime:Number [只读]​​ 返回视频的当前播放时间。

【参考方案2】：

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

使用 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 上测试自己的创建。该工具完全免费。