带有html5的互动视频

时间:2012-08-09 21:46:05

标签: html5 video actionscript canvas

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

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

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

感谢您的关注,我将非常感谢您的帮助。我需要一些指导,因为我一直在寻找很多天。

2 个答案:

答案 0 :(得分: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查看H5P创作工具。您也可以在H5P.org处测试创建自己的内容。该工具完全免费。

答案 1 :(得分:0)

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

  

var whereYouAt = myPlayer.currentTime();

但是,如果你的意思是动作脚本,那么你正在使用Flash播放器。因此,我建议你看一下这个 Vimeo Player

  

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