检查 html5 视频是否准备就绪

Question

如果 HTML5 视频可以播放，是否触发了 JavaScript 事件？

Answer 1

刚刚遇到这个问题，虽然它有点老了，但我还是为未来的读者（谁；像我一样，可能来自谷歌）发布这个问题。

因此，截至今天，这是 html5 媒体的事件列表（根据 W3C）：

• onabort : 在中止时运行的脚本
  
• oncanplay ：当文件准备好开始播放时运行的脚本（当它缓冲到足以开始播放时）
  
• oncanplaythrough : 当一个文件可以一直播放到最后而不暂停缓冲时运行的脚本
  
• ondurationchange : 当媒体长度改变时运行的脚本
  
• onemptied ：当发生错误并且文件突然不可用（如意外断开连接）时运行的脚本
  
• onended ：当媒体结束时运行的脚本（对于“感谢收听”等消息的有用事件）
  
• onerror : 加载文件时发生错误时运行的脚本
  
• onloadeddata ：加载媒体数据时运行的脚本
  
• onloadedmetadata ：加载元数据（如维度和持续时间）时运行的脚本
  
• onloadstart ：在实际加载任何内容之前，在文件开始加载时运行脚本
  
• onpause ：当媒体被用户或以编程方式暂停时运行的脚本
  
• onplay ：当媒体准备好开始播放时运行的脚本
  
• onplaying ：在媒体实际开始播放时运行的脚本
  
• onprogress : 当浏览器正在获取媒体数据时运行的脚本
  
• onratechange ：每次播放速率变化时运行的脚本（例如当用户切换到慢动作或快进模式时）
  
• onreadystatechange ：每次就绪状态变化时运行的脚本（就绪状态跟踪媒体数据的状态）
• onseeed ：当 seek 属性设置为 false 时运行的脚本，表示搜索已经结束
  
• onseeking ：当 seek 属性设置为 true 时运行的脚本，表示正在搜索中
  
• onstalled ：当浏览器由于某种原因无法获取媒体数据时运行的脚本
  
• onsuspend ：获取媒体数据时运行的脚本在完全加载之前停止，无论出于何种原因
  
• ontimeupdate ：当播放位置改变时运行的脚本（比如当用户快进到媒体中的不同点时）
  
• onvolumechange ：每次更改音量时运行的脚本（包括将音量设置为“静音”）
  
• onwaiting ：当媒体暂停但预计会恢复时运行脚本（例如当媒体暂停以缓冲更多数据时）。

Dantz 正在寻找 oncanplaythrough。

希望这会有所帮助。

Answer 2

我假设准备好播放意味着readyState 属性等于HAVE_ENOUGH_DATA 常量（数值4）。根据doc，当readyState属性变为该值时，应该触发canplay事件。

Answer 3

这里讨论得很好……

http://tiffanybbrown.com/2010/07/05/the-html5-video-progress-event/

尤其是第一条评论。

基本上，这在规范中已被删除，因为它与媒体的呈现方式并不完全一致。相反，添加了 .buffered。

下面是使用缓冲的例子：

http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/

Answer 4

当视频准备好播放时，您需要处理 2 个事件。

• canplay: 当视频准备好播放时触发 但缓冲未完成
• canplaythrough : 当视频准备好播放和缓冲完成时触发

Answer 5

我发现http://www.w3.org/TR/html5/video.html#mediaevents 非常有用，因为它列出了所有可用于 html5 媒体标签的事件。