怎么使用HTML5中Video标签的Metadata事件获取视频原始宽高比例及时长-H5教程-PHP中文网

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

怎么使用html5中video标签的metadata事件获取视频原始宽高比例及时长

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

监听`loadedmetadata`事件

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

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

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

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

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

若视频含旋转元数据（如手机竖拍带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>