html - 视频的 canplay 和 loadedmetadata 事件监听器有什么区别？

Question

我想知道 loadedmetadata 之间有什么区别和 canplay视频的事件监听器。根据 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.

还有两个事件监听器，包括 loadeddata和 loadedstart .
对于我的用例，我想等待 video要加载的元素，以便我可以获取 video.currentTime .我的 timeupdate函数使用此信息，但我相信视频没有完全加载，因此它会引发一个小错误，即无法获取视频的当前时间。
等待视频加载或播放的最佳做法是什么？

Answer 1

canplay通常意味着已经加载了足够的内容，假设网络条件保持不变，浏览器将能够播放到内容结束而无需缓冲。这通常只会在 loadedmetadata 之后触发因为元数据告诉浏览器关于内容的长度和其他重要信息。
loadedmetadata仅指有关内容本身的元数据 - 例如，从 MOOV 原子中提取的 mp4 文件(因此，最佳做法是对 mp4 进行编码，使其在开头而不是结尾作为默认值，磁盘上的文件)

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