HTML5音频和视频的关键事件详解及浏览器差异分析
HTML5的<video></video>和<audio></audio>元素提供了丰富的事件机制。一些事件如“play”事件一目了然，而另一些事件，例如“progress”事件，则比较复杂。本文将深入探讨一些最重要的媒体事件，分析它们的触发时机、相关属性以及不同浏览器间的差异。
核心要点
<video></video>和<audio></audio>元素提供了多种事件，有些简单易懂（如“play”事件），有些则比较复杂（如“progress”事件）。.paused标志可能仍然为false。preload属性而异。播放事件
播放事件响应媒体播放或暂停操作。这些事件相对简单。
“play”和“pause”事件分别在媒体播放或暂停时触发。“ended”事件在媒体播放结束时触发，无论是正常播放结束还是用户手动跳转到结尾。
前两个事件对应着play()和pause()方法。后两个事件对应着.paused和.ended属性。.paused属性默认为true，或在媒体暂停时为true；.ended属性默认为false，在播放结束时变为true（与“ended”事件同时触发）。
然而，Opera、Safari和IE10存在一个显著的异常：当媒体播放结束时，.paused标志仍然为false（逻辑上它应该为true，因为媒体不再播放）。这意味着简单的播放/暂停按钮处理程序在这种情况下会失效：
button.addEventListener('click', function(e) {
if(media.paused) {
media.play();
} else {
media.pause();
}
}, false);可以通过在“ended”事件响应中手动调用pause()方法来解决此问题：
media.addEventListener('ended', function(e) {
media.pause();
}, false);Firefox和Chrome内部已经通过在“ended”事件之前触发“pause”事件来修复此问题。
加载事件
加载事件与媒体数据的加载（或加载失败）相关。这些事件的出现频率取决于媒体的加载状态，即是否使用preload属性以及媒体是否已缓存。
在所有情况下，第一个触发的事件是“loadstart”事件，表示浏览器已开始查找数据。但这仅表示浏览器开始查找，并不意味着任何数据已实际加载，或媒体资源甚至存在。
如果preload属性的值为“none”，则“loadstart”事件是唯一在播放开始前触发的事件。而如果preload属性的值为“metadata”或“auto”，则很快会触发另外两个事件：“progress”和“loadedmetadata”。（如果没有预加载，这些事件仍然会触发，但要等到播放开始后。）
“progress”事件比较复杂，将在下一节中单独讨论。“loadedmetadata”事件很简单，它表示浏览器已加载足够的元数据来知道媒体的.duration（作为浮点数，而不是其默认值NaN）。
当然，“loadedmetadata”事件只有在媒体能够加载时才会触发——如果加载失败（例如，src返回404），则媒体将产生“error”事件，并且无法进行进一步播放。
这里再次遇到一些重要的浏览器差异。在Mobile Safari中，preload设置有意未实现，因此该属性的所有值的行为都与preload="none"相同。相反，在IE10中，媒体元数据始终默认加载，因此preload="none"的行为与preload="metadata"相同。
“progress”事件
“progress”事件在（且仅在）下载数据期间持续触发。因此，当preload设置为“none”时，它在播放开始前根本不会触发；当preload设置为“metadata”时，它会在前几秒钟触发，然后停止直到播放开始；当preload设置为“auto”时，它将持续触发直到整个媒体文件下载完毕。
但是，对于所有preload设置，一旦播放开始，浏览器将继续下载整个媒体文件，直到没有剩余数据需要加载，即使视频随后暂停，后台下载也会继续。
数据本身由一组时间范围表示，在使用“progress”事件之前，务必了解这些时间范围的工作原理。
(以下内容与原文基本一致，只是对部分语句进行了调整和润色，避免了大段的直接复制，并保持了原意)
时间更新事件
最后简要介绍一下媒体“timeupdate”事件，该事件在媒体播放期间持续触发。可以使用此事件将其他内容与媒体播放同步，例如创建手动字幕、突出显示成绩单中的活动行，甚至同步多个媒体源。
“timeupdate”事件的触发频率未指定，实际上在不同的浏览器中差异很大。但总的平均频率约为每秒3-5次，对于大多数同步目的来说足够精确。
据我所知，此事件没有浏览器错误或差异。
结语
本文并未涵盖所有可能的媒体事件——还有其他播放和跳转事件、高级网络状态事件，甚至还有一个在音量更改时触发的事件。但我已经涵盖了我认为最重要的事件——足以满足大多数简单的视频和音频脚本编写需求，并足以构建基本的自定义界面。
(FAQs部分与原文基本一致，只是对部分语句进行了调整和润色，避免了大段的直接复制，并保持了原意)
以上是HTML5的基本音频和视频事件的详细内容。更多信息请关注PHP中文网其他相关文章！
