关于控制视频的技术,往常最常用的是flash,比如土豆,然而现在越来越多的技术支持,有silverlight,还有最新的HTML5。 下图,就是silverlight的实例!

以下,是我们最近刚开发的基于HTML5的标签<video>与<canvas>控制的视频。

HTML5的video属性中,有一个是controls,它的作用是运用浏览器自带的控制条,如果在video中,加此属性,我们便没办法在时间轴上做文章,所以我们通过使用画布,也就是canvas。

整个画布由两部分组成,一部分是用户的问题(即下图中的问号图标),一部分是时间轴。

时间轴下方,包含播放、暂停按钮,时间,发表评论,全屏的功能条。这些按钮,分别通过事件,来对视频进行控制。 

 

 

 

当视频播放到某一个时间点,点击发表问题(即全屏按钮左边的那个图标),在留言板内发表问题,点击提交,即可立刻在问题画布那里,现实新的一个问号图标,即所提问的问题,问题的定位即是点击发表问题按钮时,视频走到的时间点。 

 

在这里还要特别提出的就是小工具,即书签、聊天和关联,书签有添加和查看的功能。在视频播放过程中,如果我们觉得某一个时间点的内容很重要,想进行标记,那么我们可以点击书签下的添加功能。那么我们就可以对此时间点进行标记,天蝎时间点标题,那么,我们就可以通过查看书签,快速进入所标记的时间点。

关联我们通过某些关键字进行筛选,推送相关的视频。