Javascript 检查 html5 视频是否准备就绪

Checking if a html5 video is ready

提问by dantz

is there an JavaScript event triggered, if a HTML5 video is ready for playback?

如果 HTML5 视频已准备好播放，是否会触发 JavaScript 事件？

采纳答案by Olivier Amblet

I assume that ready for playback means that the readyStateproperty is equal to HAVE_ENOUGH_DATAconstant (numeric value 4). According to the doc, when the readyState property turn to this value, a canplayevent should be fired.

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

回答by MeanMatt

Just came across this question and although it is a little old I am posting this for future readers (who; like me, probably come from Google).

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

So as of today this is the event list for html5 media (according to W3C):

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

• onabort: Script to be run on abort
  
• oncanplay: Script to be run when a file is ready to start playing (when it has buffered enough to begin)
  
• oncanplaythrough: Script to be run when a file can be played all the way to the end without pausing for buffering
  
• ondurationchange: Script to be run when the length of the media changes
  
• onemptied: Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
  
• onended: Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")
  
• onerror : Script to be run when an error occurs when the file is being loaded
  
• onloadeddata: Script to be run when media data is loaded
  
• onloadedmetadata: Script to be run when meta data (like dimensions and duration) are loaded
  
• onloadstart: Script to be run just as the file begins to load before anything is actually loaded
  
• onpause: Script to be run when the media is paused either by the user or programmatically
  
• onplay: Script to be run when the media is ready to start playing
  
• onplaying: Script to be run when the media actually has started playing
  
• onprogress: Script to be run when the browser is in the process of getting the media data
  
• onratechange: Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
  
• onreadystatechange: Script to be run each time the ready state changes (the ready state tracks the state of the media data)
• onseeked: Script to be run when the seeking attribute is set to false indicating that seeking has ended
  
• onseeking: Script to be run when the seeking attribute is set to true indicating that seeking is active
  
• onstalled: Script to be run when the browser is unable to fetch the media data for whatever reason
  
• onsuspend: Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
  
• ontimeupdate: Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
  
• onvolumechange: Script to be run each time the volume is changed which (includes setting the volume to "mute")
  
• onwaiting: Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data).

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

Dantz was looking for oncanplaythrough.

Dantz 正在寻找 oncanplaythrough。

Hope this helps.

希望这可以帮助。

回答by Orbit

Good discussion here...

在这里讨论很好...

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

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

Especially the first comment.

尤其是第一条评论。

Basically, this was in the spec and was removed because it didn't exactly go hand in hand with the way media is rendered. Instead, .buffered was added.

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

Here is an example of buffered in use:

以下是使用中的缓冲示例：

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

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

回答by Yann L.

You have 2 events to handle when a video is ready to play.

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

• canplay: fired when video ready to play but buffering not complete
• canplaythrough : fired when video ready to play and buffering complete

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

回答by boz

I have found http://www.w3.org/TR/html5/video.html#mediaeventsto be extremely useful as it lists all the events that are available when it comes to html5 media tags.

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