HTML5多媒体中Duration属性获取时长异常的处理方案

duration 初始为 NaN 或 Infinity 是正常现象，因元数据未加载完成或流媒体无确定时长；应在 loadedmetadata 事件后读取，并做 isNaN 和 isFinite 判断以安全处理。

HTML5 <video> 或 <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。