loadedmetadata事件在媒体元数据加载完成后触发，此时videoWidth/videoHeight才可安全读取；需绑定事件监听器（推荐addEventListener），动态设src后无需重绑，但需处理error容错；该属性仅适用于video且返回原始分辨率。
在 HTML5 中，loadedmetadata 事件会在媒体元素（如 或 ）的元数据（包括时长、尺寸、帧率等）加载完成后触发。对于视频，尺寸信息（videoWidth 和 videoHeight）只有在该事件触发后才可安全读取。
确保在 loadedmetadata 触发后读取 videoWidth/videoHeight
直接在 src 设置后立即访问 videoWidth 会返回 0，因为元数据尚未加载。必须等待事件完成：
- 给
元素绑定loadedmetadata事件监听器 - 在回调中读取
video.videoWidth和video.videoHeight - 注意：若视频未设置
src或资源不可达，事件可能永不触发
正确绑定事件的两种常用方式
推荐使用 addEventListener，避免覆盖已有监听器：
const video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', () => {
console.log('宽度:', video.videoWidth);
console.log('高度:', video.videoHeight);
});
也可用 onloadedmetadata 属性（仅支持单个处理函数）：
video.onloadedmetadata = function() {
console.log(this.videoWidth, this.videoHeight);
};
处理动态设置 src 的情况
如果通过 JS 动态设置 src（例如切换不同分辨率视频），每次赋值后都需重新监听或确保监听器已存在：
- 监听器只需绑定一次，只要元素未被销毁，它会响应后续所有
src加载 - 但若
src设置为无效地址或跨域资源无 CORS 头，事件不会触发，应配合error事件做容错
注意 videoWidth/videoHeight 的适用范围
这两个属性仅对 有效， 没有视觉尺寸；且它们反映的是**原始视频轨道的固有尺寸**，不是 CSS 渲染尺寸或 offsetWidth/offsetHeight：
- 即使设置了
width="320"，videoWidth仍返回原始分辨率（如 1920） - 若视频尚未解码首帧（极少见），某些浏览器可能延迟报告尺寸，此时可监听
loadeddata作为补充（但通常loadedmetadata已足够）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
