html5 video元素需等待loadedmetadata事件触发后才能安全获取时长和分辨率：duration为浮点秒数，可能为nan或infinity；videowidth/videoheight返回实际解码尺寸，依赖该事件且跨域需cors支持。
HTML5 的 video 元素本身不直接暴露时长和分辨率等元数据，但可通过原生 API 在合适时机读取——关键在于等待 loadedmetadata 事件触发后访问属性。
获取视频时长（duration）
视频时长是浮点数（单位：秒），但需注意：未加载元数据前值为 NaN；直播流或某些动态源可能返回 Infinity。
- 监听
loadedmetadata事件，确保元数据已解析完成 - 读取
video.duration，若为Infinity或NaN，需做容错处理 - 可结合
video.readyState判断是否达到HAVE_METADATA（值为 1）
获取视频分辨率（宽高）
分辨率通过 video.videoWidth 和 video.videoHeight 获取，它们是只读属性，反映实际解码后的像素尺寸，与 CSS 设置的显示尺寸无关。
- 同样依赖
loadedmetadata事件，否则返回 0 - 对无视频轨道的媒体（如纯音频）或未成功解码的视频，这两个值可能为 0
- 注意：
video.width/height是 HTML 属性，控制显示尺寸，不是原始分辨率
完整示例代码
以下是一个安全读取元数据的最小实践：
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
const duration = isNaN(video.duration) ? 0 : Math.round(video.duration);
const width = video.videoWidth;
const height = video.videoHeight;
console.log(`时长：${duration} 秒，分辨率：${width}×${height}`);
});
// 可选：兜底监听 canplay，避免某些浏览器延迟触发 loadedmetadata
video.addEventListener('canplay', () => {
if (video.duration > 0 && video.videoWidth > 0) {
// 元数据已就绪，可读取
}
});
常见陷阱与注意事项
跨域视频资源（如 CDN 上的 MP4）若未设置 CORS 头，部分浏览器会阻止读取 videoWidth/videoHeight，但 duration 通常不受影响。
- 服务端需响应头包含
Access-Control-Allow-Origin: *（或指定域名） - 使用
<video crossorigin="anonymous"></video>显式声明跨域请求 - 移动端 Safari 对某些编码格式（如 HEVC）可能无法正确报告分辨率
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
