本文讲解如何利用 HTML5 视频的 timeupdate 事件，在视频精确播放到某一时间戳（如 3.466 秒）时触发 JavaScript 操作（例如动态修改 CSS 背景），避免递归错误与性能问题。
本文讲解如何利用 html5 视频的 `timeupdate` 事件，在视频精确播放到某一时间戳（如 3.466 秒）时触发 javascript 操作（例如动态修改 css 背景），避免递归错误与性能问题。
要在视频播放过程中响应特定时间点（如第 3.466 秒）并执行操作（例如切换页面背景色），核心在于正确使用
⚠️ 原代码中存在两个关键错误：
- 在 else 分支里写 video.addEventListener("timeupdate", video())，立即调用了 video() 函数并将其返回值（undefined）作为事件处理器，导致无限递归和栈溢出；
- playing 事件仅在播放开始时触发一次，无法持续监听时间变化，因此无法捕获“到达某时刻”这一条件。
✅ 正确做法是：
- 只注册一次 timeupdate 事件监听器；
- 在回调函数中实时检查 video.currentTime；
- 添加防重复执行逻辑（可选但推荐），避免同一时间点多次触发样式变更。
以下是优化后的完整示例代码：
立即学习“Java免费学习笔记（深入）”；
<video id="video" controls width="640"> <source src="your-video.mp4" type="video/mp4"> </video>
const video = document.getElementById("video");
const body = document.body;
// 标记是否已执行过该时间点的操作，防止重复触发
let hasTriggeredAt3466 = false;
video.addEventListener("timeupdate", () => {
// 精确匹配：≥ 3.466 秒且尚未触发过
if (video.currentTime >= 3.466 && !hasTriggeredAt3466) {
body.style.backgroundColor = "black";
hasTriggeredAt3466 = true; // 锁定状态
}
});? 进阶提示：
-
若需在多个时间点执行不同操作（如 3.466s 变黑、8.2s 变蓝、15s 恢复默认），建议使用时间点数组 + 循环检查，或构建映射表：
const timelineActions = [ { time: 3.466, action: () => body.style.backgroundColor = "black" }, { time: 8.2, action: () => body.style.backgroundColor = "#1e90ff" }, { time: 15, action: () => body.style.backgroundColor = "" } ]; video.addEventListener("timeupdate", () => { for (const item of timelineActions) { if (video.currentTime >= item.time && !item.executed) { item.action(); item.executed = true; } } }); 注意 timeupdate 的触发频率受浏览器限制，不保证毫秒级精度，对极高精度需求（如音画同步动画），应结合 requestAnimationFrame 或 Web Audio API 进行补偿。
掌握 timeupdate 的正确用法，你就能轻松实现视频驱动的动态视觉效果——从背景渐变、字幕浮现，到交互式教学提示，皆可精准控制。
