视频的 canplay 和 loadedmetadata 事件侦听器有什么区别?

What is the difference between canplay and loadedmetadata event listener for video?

我想知道 loadedmetadatacanplay 视频事件侦听器之间的区别。根据 MDN:

canplay Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the CAN_PLAY readyState.

loadedmetadata The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.

还有两个事件侦听器,包括 loadeddataloadedstart

对于我的用例,我想等待加载 video 元素以便我可以获取 video.currentTime。我的 timeupdate 函数使用了此信息,但我相信视频没有完全加载,因此它会抛出一个小错误,无法获取视频的当前时间。

等待视频加载或播放的最佳做法是什么?

canplay 通常意味着已经加载了足够的内容,假设网络条件保持不变,浏览器将能够在没有缓冲的情况下播放到内容的结尾。这通常只在 loadedmetadata 之后触发,因为元数据告诉浏览器内容的长度和其他重要信息。

loadedmetadata 仅指有关内容本身的元数据 - 例如从 MOOV 原子中提取的 mp4 文件(因此最好对 mp4 进行编码,以便在磁盘文件的开头,而不是默认的结尾)

如果您只需要访问 currentTime 之类的东西并且不太关心无缓冲播放,那么 loadedmetadata 应该足够了,但我个人的偏好(如果用例将在大多数情况下不跳过views) 也将等待 canplay 只是为了创造更好的用户体验。

当用户代理可以播放媒体时触发 canplay 事件,但估计没有加载足够的数据来播放媒体直到结束而不必停止用于进一步缓冲内容。

当用户代理可以播放媒体时触发 canplaythrough 事件,并且估计已经加载了足够的数据来播放媒体直到结束而不必停止进一步缓冲内容。

canplay 将首先触发,然后是 canplaythrough。您可以使用这些事件来更改 UI,例如:- 删除加载程序并开始播放。

加载元数据后会触发 loadedmetadata 事件。媒体和轨道的持续时间和尺寸现在已知。

loadeddata事件在媒体当前播放位置的帧完成加载时触发;通常是第一帧。让我们假设一个视频是 10 秒。您已将视频的 currentTime 设置为 5s。然后加载数据将在加载第 5 秒帧后触发。

参考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video