video/audio 的 duration 和 currenttime 属性需在 loadedmetadata 事件后读取 duration，currenttime 可随时读写但需校验范围；直播流中 duration 可能为 infinity，应避免直接计算百分比，须结合 readystate 判断有效性并做边界保护。
video/audio 元素的 duration 和 currentTime 属性怎么用
HTML 原生 <video></video> 和 <audio></audio> 元素提供了两个关键只读属性：duration 表示媒体总时长（秒），currentTime 表示当前播放位置（秒）。但要注意：duration 在媒体元数据加载完成前是 NaN，不能一上来就读。
实操建议：
- 监听
loadedmetadata事件后再读取duration，确保元数据就绪 -
currentTime可随时读写（写入会触发跳转），但写入值超出范围会自动截断 - 对未加载完成的流媒体（如 HLS、DASH），
duration可能为Infinity（直播流）或暂不可知
为什么 duration 有时是 NaN 或 Infinity
这不是 bug，而是浏览器按规范处理不同加载状态的结果。常见原因：
-
NaN：媒体尚未触发loadedmetadata，比如 DOM 创建后立即访问，或资源 404/跨域失败 -
Infinity：媒体类型为直播流（media.readyState === 0且duration === Infinity），此时无法预知总时长 - 短暂为
NaN后变正常：网络延迟导致元数据加载稍晚，需靠事件驱动而非轮询
验证方式：console.log(video.duration, video.readyState)，结合 readyState 判断是否可信。
监听播放进度变化该用 timeupdate 还是 requestAnimationFrame
必须用 timeupdate 事件——这是浏览器原生提供的、与播放引擎同步的进度通知机制。它在播放过程中高频触发（通常每 250ms 左右一次），且仅在实际播放时触发（暂停时不发）。
不要用 requestAnimationFrame 轮询 currentTime，原因：
- 浪费 CPU，尤其页面后台时仍运行
- 无法感知跳转、拖拽等用户操作的即时响应（
timeupdate会立刻触发） - 精度不如原生事件，可能漏帧或重复计算
示例绑定：video.addEventListener('timeupdate', () => { console.log(video.currentTime); });
获取精确进度百分比要注意单位和四舍五入
计算进度百分比看似简单：(currentTime / duration) * 100，但容易出错：
- 必须先判断
duration是否有效（非NaN、非Infinity、大于 0） - 对直播流（
duration === Infinity），应改用缓冲长度或服务端时间戳，不能硬算百分比 - 显示时建议保留 1 位小数：
Math.round((currentTime / duration) * 1000) / 10，避免浮点误差导致 99.999% 卡在 100% 前 - 拖拽结束瞬间
currentTime可能略超duration（尤其 MP4），需做Math.min(currentTime, duration)保护
真正难的不是读值，而是应对各种加载状态、流类型和用户交互的组合逻辑——这些边界情况不覆盖，进度条就会卡住或跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
