HTML5多媒体中Duration属性获取时长异常的处理-H5教程-PHP中文网

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

html5多媒体中duration属性获取时长异常的处理

HTML5 或元素的 duration 属性在媒体加载初期常返回 NaN 或 Infinity，这是正常现象，并非代码错误，关键在于等待合适的时机读取。

为什么 duration 会是 NaN 或 Infinity？

浏览器需完成媒体元数据解析（如码率、帧率、总时长）后才能提供准确时长。初始加载时，若尚未获取到元数据，duration 默认为 NaN；对于流式媒体（如 HLS、DASH）或未设置 Content-Length 的 HTTP 响应，服务器未提供明确时长信息时，可能返回 Infinity（表示“未知总长”或“直播流”）。

可靠获取 duration 的时机

必须监听媒体元素的特定事件，在其触发后再读取 duration：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

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>
});