【IT168 技术】HTML 5中的视频和音频中有不少核心的事件,其中有的比较容易理解,基本能从字面就解析了,比如“play”事件就很好理解。而其他有的事件则需要花费点心思，特别是“progress”事件。因此，在本文中，将带领读者研究HTML 5视频和音频中重要的事件，探究这些事件是应该在什么时候使用以及其中的重要相关属性。我们也将看下这些事件在当今不同浏览器中的差异。为了本文的测试，使用的浏览器如下：Opera 12、Chrome 28、IE 10、Firefox 22、Safari 5(桌面版)和Mobile Safari 6(iOS版本)。

　　播放相关的事件

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

　　这两个对应事件的触发很简单，只需要调用play()和pause()方法就可以了。它们也有对应的属性，其中.paused属性默认设置为true，而.ended属性默认是设置为false的，当然当媒体文件播放到最后的时候，.ended属性则变为true。

　　然而，在Opera、Safari和IE 10中，请注意有个区别，就是即使媒体播放完毕，其中的.paused属性依然为false(从逻辑上说，媒体已经播放完毕了)。这样一个实际的结果是play/pause按钮的事件都不会触发了，看下面的例子：

　　也就是说，当视频结束后，其pause()事件依然能调用。我们可以通过一个小技巧去修正这个问题，如下代码所示：

　　也就是在监听ended事件中，主动调用media.pause()方法就可以了。在Firefox和Chrome的最新版本中，已经修正了这个问题。

　　关于加载事件

　　加载事件总是在媒体加载(或加载失败)的时候发生。加载事件受到加载媒体状态的影响，比如是否使用了preload属性又或者是媒体是否缓存了。下面我们来逐一分析下其中关键的事件，首先是“loadstart”事件，含义是让浏览器刚开始的时候去寻找获得数据。但要注意的是，loadstart并不意味着就任何数据就会马上加载，还要看preload属性的值的设置。如果preload(预装载的值)设置为“none”的话，则“loadstart”事件就是唯一在播放视频前触发的事件。如果preload属性设置为“metadata”或者是“auto”，则会触发“progress”和“loadmetadata”事件(如果没预加载的话，这两个事件也会触发，但不会在播放前发生)。

　　在下一节中，我们才学习“progress”事件，由于其比较复杂。我们先来学习比较简单的“loadedmetadata”事件。正如字面的含义，浏览器仅仅加载媒体的元数据信息而已，比如其长度.duration(是一个浮点数而不是默认的NaN)。

　　当然，“loadedmetadata”事件只有在确认能加载媒体文件后才能加载，换句话说，如果某个媒体问题文件不能加载(比如404错误)，则会直接产生error事件，当然也不可能继续运行相关的播放事件了。

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