摘 要： 本文通过对HTML 5中视频和音频重要事件的研究，总结出HTML 5中重要事件在什么时候使用其中重要的相关属性，并以实例利用事件相关属性进行设置，给读者以相应启发。

关键字：HTML 5；视频；音频；事件；加载；属性

中图分类号：TP393.092 文献标识码：A DOI：10.3969/j.issn.1003-6970.2013.07.012

本文著录格式：[1]李超. HTML 5中视频和音频核心事件的相关研究[J].软件，2013，34(7)：35-36

0 引言

HTML 5中的视频和音频中有不少核心的事件，有的比较容易理解，基本能从字面解析，比如“play”事件。而有的则不容易理解，特别是“progress”事件。因此，在本文中，将带领读者研究HTML 5视频和音频中重要的事件，探究这些事件是应该在什么时候使用其中的重要相关属性。

1 播放相关的事件

先看下视频和音频中的playback事件。plackback事件发生的时机在播放媒体或停止媒体中。其中“play”和“pause”事件分别在媒体播放和停止的时候触发，但也有一个“ended”事件，该事件是在媒体播放完毕到达最后的时候触发，无论是正常情况下的结束或是用户自己动播放条到媒体文件的最后。

2 关于加载事件

2.1 loadedmetadata事件

这里，不同浏览器是有差别的。在Mobile Safari中，preload的属性其实没声明，等于设置为“none”。但在IE 10中，媒体的元数据默认是自动加载的，所以preload设置为none其实跟设置为metadata的作用是一样的。

2.2 canplay事件

2.3 canplaythrough事件

2.4 Progress事件

重点看一下progress事件。该事件在数据正在下载的时候会触发。当preload设置为none的时候，progress事件在知道播放事件真正开始前是不会触发的。如果preload设置为“metadata”，则该事件会短暂触发大概几秒，然后停止，直到真正的播放行为开始时才触发；如果preload设置为“auto”，则会触发一直直到整个媒体文件下载完毕。

无论preload如何设置，一旦用户开始进行播放的行为，则浏览器会开始下载整个媒体文件，会持续触发progress事件，一直到整个文件下载完毕，即使视频被暂停。

当数据下载后，需要了解如何用时间表达这个progress的事件，则深入了解progress事件是十分重要的。当数据开始加载时，会创建表示媒体播放时间的范围，比如一旦头10秒的数据已经加载，则以数组的方式记录了开始和结束时间，如下的方式表示：[0，10]

实际上是会有多个时间范围存在的，比如用户手工使用播放器的进度条去移动到想要的位置，则浏览器会忽略当前的时间范围而加载新的部分而不是象Flash那样重新加载两个时间点之间的部分。

3 结束语

由于HTML 5的新特性使Web开发人员能够较轻松的完成视频、音频与网页中的其他内容的整合，为Internet上的多媒体应用提供了新的思路，具有非常广泛的应用前景。做为Web开发人员，应该尽快掌握HTML 5中视频和音频中重要事件的新特性并加以应用，为HTML 5的推广和发展推波助澜。

参考文献

[1]李安琪，HTML5标准实施与未来发展，信息技术与标准化，2012.11

[2]王江静，Web应用的新技术HTML5，电脑知识与技术，2012.11

[3]刘天寅，浅析HTML5在多媒体上的应用前景，硅谷，2010.20