HTML5的基本音频和视频事件

HTML5音频和视频的关键事件详解及浏览器差异分析

HTML5的<video></video>和<audio></audio>元素提供了丰富的事件机制。一些事件如“play”事件一目了然，而另一些事件，例如“progress”事件，则比较复杂。本文将深入探讨一些最重要的媒体事件，分析它们的触发时机、相关属性以及不同浏览器间的差异。

核心要点

• HTML5的<video></video>和<audio></audio>元素提供了多种事件，有些简单易懂（如“play”事件），有些则比较复杂（如“progress”事件）。
• 播放事件（如“play”、“pause”、“ended”）响应媒体播放或暂停操作，并与相应的媒体函数和属性对应。但某些浏览器存在异常，例如在Opera、Safari和IE10中，当媒体播放结束时，.paused标志可能仍然为false。
• 加载事件与媒体数据的加载或加载失败相关，包括“loadstart”、“progress”、“loadedmetadata”、“canplay”和“canplaythrough”事件。但它们的行为因浏览器和preload属性而异。
• “progress”事件在下载数据期间持续触发，用一组时间范围表示下载进度。然而，浏览器存在差异，例如Opera会创建两个范围，而Mobile Safari只保留活动范围。
• “timeupdate”事件在媒体播放期间持续触发，用于将其他元素与媒体播放同步。此事件通常没有浏览器错误或差异。

播放事件

播放事件响应媒体播放或暂停操作。这些事件相对简单。

“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中文网其他相关文章！