play函数获取播放进度及实时时间显示方法

本文深入解析了HTML媒体元素播放进度获取与实时时间显示的核心要点，指出play()函数仅负责启动播放，真正获取和控制播放时间必须依赖currentTime属性，并强调必须等待canplay等就绪事件后再安全读取或设置，推荐使用浏览器原生的timeupdate事件而非setInterval来高效、精准监听进度变化；同时系统梳理了currentTime设置失败的常见原因（如媒体未就绪、跨域限制、iOS自动播放策略等）及实用规避方案，并提供了分秒格式化、精度处理等开发细节，帮助开发者避开实际项目中最易踩坑的“时机判断”陷阱。

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() 调用就以为万事大吉。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~