检查 html5 视频是否准备就绪

IT技术 javascript html html5-video
2021-03-18 14:53:46

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

5个回答

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

所以截至今天,这是 html5 媒体的事件列表(根据 W3C):

  • 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 正在寻找 oncanplaythrough。

希望这可以帮助。

2021-05-04 14:53:46

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

嗯。你确定吗?我认为与 HAVE_ENOUGH_DATA 相关的正确事件是 'canplaythrough' w3.org/TR/html5/...
2021-04-25 14:53:46
根据我的经验,canplaythrough 在移动 Safari 中不能可靠地触发
2021-05-03 14:53:46
使用$('#someid').on('canplay', function () { /* Your code */ });了它基于jQuery的访问。
2021-05-03 14:53:46
看起来草案自 2011 年以来发生了变化:)。我同意你的观点,当 readyState 变为 HAVE_ENOUGH_DATA 时,今天触发的事件是 canplaythrough
2021-05-11 14:53:46

在这里讨论很好...

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/

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

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

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

您可以在此处找到类似的列表:developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
2021-04-24 14:53:46
该链接给出了 404 not found - 这就是为什么不是链接到潜在答案,而是在此处发布答案。
2021-05-20 14:53:46