如何在视频播放到指定时间点时执行 JavaScript 代码（如切换背景色）-js教程-PHP中文网

如何在视频播放到指定时间点时执行 JavaScript 代码（如切换背景色）

本文讲解如何利用 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；
添加防重复执行逻辑（可选但推荐），避免同一时间点多次触发样式变更。

以下是优化后的完整示例代码：

<video id="video" controls width="640"><source src="your-video.mp4" type="video/mp4"></source></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; // 锁定状态
  }
});

? 进阶提示：

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

若需在多个时间点执行不同操作（如 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;
    }
  }
});