duration 初始为 NaN 或 Infinity 是正常现象，因元数据未加载完成或流媒体无确定时长；应在 loadedmetadata 事件后读取，并做 isNaN 和 isFinite 判断以安全处理。
HTML5 <video></video> 或 <audio></audio> 元素的 duration 属性在媒体加载初期常返回 NaN 或 Infinity，这是正常现象，并非代码错误，关键在于等待合适的时机读取。
为什么 duration 会是 NaN 或 Infinity？
浏览器需完成媒体元数据解析（如码率、帧率、总时长）后才能提供准确时长。初始加载时，若尚未获取到元数据，duration 默认为 NaN；对于流式媒体（如 HLS、DASH）或未设置 Content-Length 的 HTTP 响应，服务器未提供明确时长信息时，可能返回 Infinity（表示“未知总长”或“直播流”）。
可靠获取 duration 的时机
必须监听媒体元素的特定事件，在其触发后再读取 duration：
-
loadedmetadata：最常用。该事件在元数据（含时长、尺寸、音轨数等）加载完成时触发，此时duration已可用（除非是实时流）。 -
canplay或canplaythrough：也可用，但略晚于loadedmetadata；适合需要确保可播放后再读时长的场景。 -
避免在
loadstart或直接写在src赋值后立即读取，此时几乎必然得到NaN。
处理 Infinity 和 NaN 的安全读取模式
即使监听了正确事件，仍需容错判断，尤其面对直播源或不规范服务端响应：
立即学习“前端免费学习笔记（深入）”；
- 检查
isNaN(video.duration)和!isFinite(video.duration)； - 若为
Infinity，可视为“无确定时长”，UI 上显示“直播中”或隐藏进度条； - 若为
NaN且已触发loadedmetadata，说明媒体文件损坏或格式不受支持，建议提示用户或降级处理； - 实用写法示例：
video.addEventListener('loadedmetadata', () => {<br> if (isFinite(video.duration)) {<br> console.log('时长：', video.duration);<br> } else if (video.duration === Infinity) {<br> console.log('实时流，无总时长');<br> } else {<br> console.warn('时长不可用');<br> }<br> });
动态更新时长的注意事项
对某些动态加载内容（如 MSE 播放器、分片视频拼接），duration 可能随缓冲变化而更新。此时可监听 durationchange 事件，但注意该事件可能频繁触发，建议加防抖或仅在必要时更新 UI。
