loadedmetadata 事件在 video 元素成功加载宽高、时长、编码等基础元数据后触发，此时可安全读取 video.duration、video.videoWidth/video.videoHeight 和 video.readyState 等属性，但需监听该事件而非 DOMContentLoaded 或 load，且 preload="metadata" 可加速触发。
video 元素加载元数据时触发 loadedmetadata 事件
HTML5 的 <video> 元素在成功获取视频宽高、时长、编码等基础元数据后，会立即派发 loadedmetadata 事件。这不是“主动获取”，而是监听该事件，在回调中读取 video 实例的只读属性。
常见错误是直接在 DOMContentLoaded 或 load 后立刻访问 video.duration 或 video.videoWidth，此时往往为 NaN 或 0，因为元数据尚未加载完成。
- 必须监听
loadedmetadata，而不是canplay或canplaythrough（后者可能更晚，且不保证元数据已就绪） - 若视频设置了
preload="none"，需先调用video.load()才能触发该事件 - 对跨域资源，需确保服务端返回
Access-Control-Allow-Origin，否则部分元数据（如duration）可能无法读取
video 元数据相关属性有哪些，哪些可靠
以下属性在 loadedmetadata 触发后可安全读取，但可靠性因浏览器和资源类型而异：
-
video.duration：通常可用，但流媒体（如 HLS、DASH）或无moov头的 MP4 可能为Infinity或NaN -
video.videoWidth/video.videoHeight：准确反映原始视频帧尺寸，不受 CSS 缩放影响 -
video.readyState：此时应为1（HAVE_METADATA），可用来确认状态 -
video.buffered：此时一般为空，不建议依赖；真正可用要等loadeddata或之后 -
video.seekable：多数情况下与buffered一致，但某些直播流可能返回空TimeRanges
完整监听示例：带错误兜底的元数据读取
实际使用中需处理加载失败、跨域限制、格式不支持等边界情况。下面是一个最小可行示例：
立即学习“前端免费学习笔记（深入）”；
<video id="myVideo" src="example.mp4" preload="metadata"></video>
<script>
const video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', () => {
console.log('时长:', video.duration); // 秒数，可能为 Infinity
console.log('分辨率:', video.videoWidth, 'x', video.videoHeight);
console.log('就绪状态:', video.readyState); // 应为 1
});
video.addEventListener('error', () => {
console.error('视频加载失败，元数据不可用');
});
</script>
注意：preload="metadata" 是关键——它告诉浏览器只需加载元数据，不必下载全部视频内容，加快事件触发速度。
移动端 Safari 和部分安卓浏览器的兼容性坑
iOS Safari 对 loadedmetadata 的触发时机较保守，尤其在使用 src 属性动态赋值时，有时需额外调用 video.load() 并等待一次微任务：
- 动态设置
video.src后，不能只靠事件监听，需手动video.load() - 某些安卓 WebView 中，
videoWidth/videoHeight在首次loadedmetadata仍为0，可监听第二次事件或改用loadeddata - 如果视频是 Data URL 或 Blob URL，务必用
URL.createObjectURL()创建，并在不再需要时调用URL.revokeObjectURL()，否则元数据可能无法正确解析
元数据不是“取出来就能用”的值，而是浏览器解析容器头后暴露的状态快照；它的可用性高度依赖资源格式、网络策略和平台实现细节。别假设它总存在，也别在没确认事件触发前就去读。
