loadedmetadata事件是获取视频原始宽高、宽高比及时长的最可靠时机；此时浏览器已解析媒体头信息，video.videoWidth/video.videoHeight返回固有像素尺寸，宽高比为二者相除，duration需判断isFinite。

Video标签的loadedmetadata事件是获取视频原始宽高、宽高比和时长的最可靠时机——此时浏览器已解析媒体头信息，但尚未开始下载或解码视频帧。

监听loadedmetadata事件

该事件在视频元数据（如尺寸、时长、编码格式）加载完成时触发，只触发一次，且早于canplay和loadeddata。需确保在video元素创建后、设置src前或后立即绑定事件：

• 推荐写法：先设src，再绑定事件（兼容性更稳）
• 避免在DOMContentLoaded中才绑定却已错过事件（尤其src为缓存资源时）

读取原始宽高与计算宽高比

video.videoWidth和video.videoHeight返回的是视频固有像素尺寸（非CSS显示尺寸），不受width/height属性或CSS影响：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 若视频含旋转元数据（如手机竖拍带Exif旋转），部分浏览器可能自动修正，videoWidth/videoHeight已反映“逻辑显示尺寸”
• 宽高比 = video.videoWidth / video.videoHeight，建议保留小数（如16/9 ≈ 1.777...），避免整数除法截断
• 示例：const ratio = video.videoWidth / video.videoHeight;

获取准确时长

video.duration在loadedmetadata触发时通常已可用，但需注意：

立即学习“前端免费学习笔记（深入）”；

• 对于流媒体（如HLS、DASH）或无明确总时长的源，duration可能为Infinity或NaN，应做判断：if (isFinite(video.duration)) { ... }
• 某些MP4文件若未将moov box置于开头，浏览器可能无法立即读取时长，此时duration为NaN，需监听durationchange事件补获
• 单位恒为秒，含小数（如123.45），可转为分秒格式：Math.floor(duration / 60) + ':' + ('0' + Math.floor(duration % 60)).slice(-2)

完整示例代码

以下是最小可靠用法：

<video id="myVideo" controls></video>
<script>
const video = document.getElementById('myVideo');
video.src = 'example.mp4';

video.addEventListener('loadedmetadata', () => {
  console.log('原始宽度:', video.videoWidth);
  console.log('原始高度:', video.videoHeight);
  console.log('宽高比:', video.videoWidth / video.videoHeight);
  console.log('时长（秒）:', isFinite(video.duration) ? video.duration : '未知');
});
</script>