通过监听 timeupdate 事件，可高效、精准地实时获取 元素的当前播放时间，无需轮询或 setInterval，性能更优且语义更清晰。
通过监听 `timeupdate` 事件，可高效、精准地实时获取 `
HTML5 <video></video> 元素原生支持 timeupdate 事件，该事件会在视频播放过程中自动、高频（通常每 200–250ms 触发一次）地触发，专门用于通知当前播放时间（currentTime）已发生变化。相比手动使用 setInterval 轮询（如每秒读取一次），它更省资源、更精确、更符合 Web 标准。
以下是一个简洁可靠的实现示例：
<video id="myVideo" width="480" controls><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"></source></video>
const video = document.getElementById('myVideo');
let currentTime = 0;
video.addEventListener('timeupdate', (e) => {
currentTime = e.target.currentTime;
console.log(`当前时间：${currentTime.toFixed(2)} 秒`);
});
✅ 优势说明：
- ✅ 自动触发：只要视频处于播放状态（包括
play()、seeking后恢复、快进/后退完成等），浏览器会自动派发timeupdate； - ✅ 无需手动启停：不像
setInterval需在play时启动、在pause/ended时清理，timeupdate天然按需触发（暂停时自动停止）； - ✅ 高精度 & 低开销：由浏览器底层媒体引擎驱动，比 JS 定时器更稳定，且避免了不必要的重复计算。
⚠️ 注意事项：
-
timeupdate在视频静音、缓冲、暂停或未加载完成时不会触发，因此无需额外判断播放状态； - 若需在初始化时获取初始时间，请在
loadedmetadata或canplay事件后读取video.currentTime； - 不建议在
timeupdate回调中执行耗时操作（如 DOM 大量重绘、复杂计算），以免影响播放流畅性；可考虑节流（throttle）或仅更新关键状态。
? 进阶提示：
如需更高频率（如逐帧同步），可结合 requestAnimationFrame + currentTime 差值检测，但绝大多数场景下 timeupdate 已完全满足需求——它是专为此类场景设计的标准解决方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
