loadedmetadata 事件是初始化播放器 ui 的最佳时机，此时 video.duration、video.videowidth、video.videoheight 等元数据已就绪；需监听该事件更新进度条、时间显示、宽高比等，并处理加载失败、直播流（duration 为 infinity）等边界情况。
当视频的元数据（如时长、尺寸、音轨信息）加载完成时，loadedmetadata 事件会被触发。这是初始化播放器 UI 的最佳时机——此时你已能安全读取 video.duration、video.videoWidth、video.videoHeight 等关键属性，避免因属性为 0 或 NaN 导致进度条错乱、尺寸计算异常等问题。
为什么必须等 loadedmetadata 而不是 canplay 或 loadeddata？
loadedmetadata 保证：视频容器尺寸、时长、帧率等基础元数据已解析完毕；
loadeddata 只表示首帧数据已加载，但时长可能仍为 0（尤其 HLS/DASH 流或未设置 duration 的 MP4）；
canplay 更晚，且可能在元数据未完全就绪时触发（如浏览器预加载策略差异）。
监听 loadedmetadata 并更新 UI 元素
在 video 元素上绑定事件，获取真实时长并渲染进度条、时间显示、分辨率提示等：
- 用
Math.round(video.duration)获取秒级总时长，填入“总时长”文本（如03:42） - 设置进度条
<input type="range">的max属性为video.duration - 根据
video.videoWidth和video.videoHeight动态设置播放器容器宽高比（如添加aspect-ratio: video.videoWidth / video.videoHeight内联样式） - 若需显示清晰度选项，可检查
video.videoWidth >= 1280判断是否为 HD
处理元数据加载失败的边界情况
某些视频（如无时长的直播流、损坏文件、CORS 限制资源）可能不触发 loadedmetadata，需兜底：
- 设置超时定时器（如 5 秒），未触发则降级使用默认时长（
00:00）和固定尺寸 - 监听
error事件，在控制台记录错误并隐藏依赖元数据的 UI 模块（如进度条、时间轴） - 对
duration为Infinity（常见于直播）的情况，隐藏总时长显示，将进度条设为 indeterminate 模式
结合现代 CSS 实现响应式 UI 初始化
利用 loadedmetadata 触发后的真实尺寸，可动态注入 CSS 变量或 class：
- 执行
video.style.setProperty('--video-aspect-ratio', `${video.videoWidth}/${video.videoHeight}`) - 在 CSS 中写：
.player { aspect-ratio: var(--video-aspect-ratio, 16/9); } - 若
videoHeight === 0（如 poster 图片阶段），回退到aspect-ratio: 16/9
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
