通过监听 timeupdate 事件，可高效、精准地实时获取 元素的 currentTime，无需轮询或 setInterval，性能更优且语义更准确。
通过监听 `timeupdate` 事件，可高效、精准地实时获取 `
HTMLMediaElement（包括 <video></video> 和 <audio></audio>）原生提供了 timeupdate 事件，该事件在媒体播放过程中当播放时间发生显著变化时自动触发（通常每 200–250ms 一次，具体频率由浏览器优化决定，且仅在播放中有效）。相比手动 setInterval 轮询，它具备三大优势：
- ✅ 精准性高：基于浏览器内部播放时钟，避免定时器漂移；
- ✅ 性能友好：无冗余调用，不占用额外 JS 执行线程；
- ✅ 语义清晰：专为时间同步设计，符合 Web 标准实践。
以下为推荐实现方式（兼容现代浏览器）：
const video = document.getElementById('video');
let currentTime = 0;
video.addEventListener('timeupdate', (e) => {
currentTime = e.target.currentTime;
// 可在此执行时间敏感逻辑，如进度条更新、字幕同步等
console.log(`当前时间: ${currentTime.toFixed(2)}s`);
});
// ⚠️ 注意：timeupdate 在暂停/静音/缓冲时可能停止触发
// 如需确保时间持续更新（例如做倒计时UI），可结合 play/pause 事件补充逻辑：
video.addEventListener('play', () => {
console.log('视频开始播放');
});
video.addEventListener('pause', () => {
console.log(`暂停于 ${video.currentTime.toFixed(2)}s`);
});<video id="video" width="480" controls preload="metadata"> <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>
? 关键注意事项：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
timeupdate不会在视频未加载完成（readyState ）或处于 <code>paused状态时频繁触发； - 若需毫秒级高频采样（如音频可视化分析），可搭配
requestAnimationFrame+video.currentTime，但需自行控制节流； - 始终建议检查
video.readyState和video.duration是否有效，避免读取NaN； - 在 Vue/React 等框架中，注意事件监听器的生命周期管理，防止内存泄漏（如
useEffect清理或addEventListener/removeEventListener配对）。
综上，timeupdate 是获取视频当前时间的标准、高效、首选方案，应优先替代 setInterval 轮询实现。
立即学习“前端免费学习笔记（深入）”；
