如何实时获取 HTML 视频元素的当前播放时间-js教程-PHP中文网

如何实时获取 HTML 视频元素的当前播放时间

通过监听 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 标签。
</source></video>

? 关键注意事项：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

timeupdate 不会在视频未加载完成（readyState ）或处于 <code>paused 状态时频繁触发；
若需毫秒级高频采样（如音频可视化分析），可搭配 requestAnimationFrame + video.currentTime，但需自行控制节流；
始终建议检查 video.readyState 和 video.duration 是否有效，避免读取 NaN；
在 Vue/React 等框架中，注意事件监听器的生命周期管理，防止内存泄漏（如 useEffect 清理或 addEventListener/removeEventListener 配对）。