video.duration需在loadedmetadata事件触发后读取，否则返回NaN或Infinity；正常值为有限正数（秒），流媒体可能返回Infinity，动态设src需重新监听该事件。
在 HTML5 中，通过 JavaScript 获取 <video> 元素的 duration 属性可以得到视频总时长（单位：秒），但需注意该属性只有在视频元数据加载完成后才有效，否则会返回 NaN 或 Infinity。
确保元数据已加载再读取 duration
duration 依赖视频的 metadata（如时长、尺寸、编码信息）加载完成。直接在页面加载后立即读取通常失败，应监听 loadedmetadata 事件：
- 使用
video.addEventListener('loadedmetadata', callback)注册回调 - 在回调中安全访问
video.duration - 若视频是动态插入或 src 后续设置，需在设置
src后再监听事件
处理 duration 的常见值和边界情况
duration 可能返回以下几种值，需做判断：
-
NaN：元数据未加载或视频不可用（如跨域资源未配 CORS） -
Infinity：流媒体（如 HLS、DASH）或某些直播源，时长不可预知 - 有限正数（如
124.75）：正常可读时长，单位为秒，精度可达毫秒级 - 0：尚未触发元数据加载，或
src为空/无效
完整示例代码
HTML 结构：
立即学习“Java免费学习笔记（深入）”；
<video id="myVideo" controls><source src="example.mp4" type="video/mp4">
</video>
JavaScript：
const video = document.getElementById('myVideo');video.addEventListener('loadedmetadata', () => {
if (!isNaN(video.duration) && isFinite(video.duration)) {
console.log('视频总时长：', video.duration.toFixed(2), '秒'); // 如 124.75
} else if (video.duration === Infinity) {
console.log('这是一个无时长限制的流媒体');
} else {
console.log('无法获取有效时长');
}
});
补充说明：动态设置 src 时的注意事项
如果通过 JS 动态设置 video.src（例如切换不同视频），需在赋值后重新监听 loadedmetadata：
- 每次修改
src都会触发新的加载流程 - 旧的监听器依然有效，但建议先移除再添加，避免重复执行
- 可结合
loadstart或canplay做进一步兼容判断
