loadedmetadata事件在视频元数据加载完成时触发，用于初始化UI、预判策略及错误降级；需提前绑定监听，检查duration有效性，并配合canplay使用以确保逻辑清晰。
HTML5视频的metadata事件在视频元数据（如时长、尺寸、音轨信息等）加载完成时触发，是实现精准控制播放逻辑的关键时机。它发生在loadeddata之前，但早于canplay和canplaythrough，适合做初始化准备而非实际播放。
metadata事件的触发条件与监听方式
该事件仅在浏览器成功解析视频容器头部（container header）并获取基础元数据后触发。并非所有格式都支持快速读取元数据，例如某些MP4文件若未将moov box置于开头（即未“fast-start”优化），可能延迟甚至不触发metadata。
- 使用
addEventListener('loadedmetadata', handler)监听，推荐在元素创建后立即绑定 - 也可直接设置
video.onloadedmetadata = handler，但注意覆盖风险 - 确保监听代码在
video.src赋值之前或之后均可，但必须在浏览器开始加载前注册才可靠
常见元数据可用字段及验证方法
触发loadedmetadata后，可安全访问以下只读属性：
-
video.duration：通常为数字（秒），若未知则为NaN；流媒体或无长度视频可能保持Infinity -
video.videoWidth/video.videoHeight：解码后的原始尺寸，非CSS显示尺寸 -
video.readyState此时一般为1（HAVE_METADATA），表示仅有元数据就绪 -
video.buffered仍为空，因尚未加载任何媒体数据
建议在回调中检查isFinite(video.duration)再执行依赖时长的操作（如进度条渲染）。
典型应用场景与实践建议
利用loadedmetadata可避免竞态问题，提升用户体验：
-
动态设置播放器UI：根据
videoWidth/videoHeight调整封面图比例或禁用全屏按钮（如短视频无需横屏） -
预判加载策略：若
duration较短（如play() - 错误降级处理：若超时未触发（如3秒），可认为元数据加载失败，提示“视频格式不支持”或尝试备用源
-
与
canplay配合使用：在metadata中初始化UI，在canplay中启用播放控件，逻辑更清晰
兼容性与调试技巧
所有现代浏览器均支持loadedmetadata，但行为细节略有差异：
- Safari对某些HEVC视频可能延迟触发，建议加
setTimeout兜底 - 移动端WebView（尤其旧版）可能在后台标签页中暂停元数据解析，需结合
visibilitychange重试 - 调试时可用
console.log(video.readyState, video.duration)确认状态流转 - 避免在
loadedmetadata中直接调用play()——多数浏览器要求用户手势触发，否则静音或拒绝
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
