play()不提供播放进度,需通过currentTime属性获取;必须等待canplay等事件后再读取或设置,推荐用timeupdate事件监听而非setInterval;设置失败多因媒体未就绪或策略限制。

play 函数本身不提供播放进度,得靠 currentTime 属性手动读取
浏览器原生 play() 只负责启动播放,它不返回进度、也不触发进度更新。真正能拿到当前时间的是 HTMLMediaElement 实例的 currentTime 属性——但它不会自动刷新,必须你自己定时或监听事件去读。
- 直接调用
video.currentTime或audio.currentTime返回秒数(浮点),比如12.345 - 不能在
play()调用后立刻读:媒体可能还没加载完,currentTime会是0或抛错 - 推荐等
canplay或loadeddata事件后再开始监听,否则容易读到无效值
实时显示时间要用 timeupdate 事件,别用 setInterval
timeupdate 是浏览器专为媒体进度设计的事件,触发频率由播放引擎控制(通常每 200–250ms 一次),比手动 setInterval 更准、更省资源,且在暂停/跳转时自动停发。
- 绑定方式:
video.addEventListener('timeupdate', () => { console.log(video.currentTime); }) - 不要写
setInterval(() => video.currentTime, 100):频繁读取无意义,还可能在静音/后台标签页被节流 - 注意:该事件不保证帧级精度,做字幕同步或高精度拖拽需结合
requestVideoFrameCallback(较新 API)
currentTime 设置失败常见原因和绕过方法
想跳转到某时间点却没反应?大概率是媒体还没准备好,或者跨域/策略限制导致设置被忽略。
- 报错
DOMException: The element has no supported sources→ 检查src是否已设且可加载 - 设了
currentTime = 60但实际还是从头播 → 等readyState >= HTMLMediaElement.HAVE_FUTURE_DATA再设 - HTTPS 页面加载 HTTP 视频源 → 浏览器会静默阻止,控制台有混合内容警告
- 移动端 iOS Safari 对自动播放+跳转限制极严,必须用户手势触发后才能设
currentTime
格式化时间显示要注意时区和小数位截断
currentTime 是纯数字秒数,直接 Math.floor() 截断会丢精度,而 toFixed(2) 又可能产生 "0.00" 这类非预期字符串。
- 推荐用
Math.floor(currentTime / 60)和Math.floor(currentTime % 60)手动拆分分秒 - 避免
new Date(currentTime * 1000).toISOString().substr(14, 5):依赖时区,且对 > 60 分钟的视频会出错 - 显示两位秒数时用
String(Math.floor(currentTime % 60)).padStart(2, '0'),更可控
实际开发里最常卡住的不是怎么读时间,而是「什么时候能安全读」和「什么时候能安全设」——这两个时机在不同浏览器、不同加载状态下差异很大,得靠 readyState 和事件组合判断,不能只靠一个 play() 调用就以为万事大吉。










