如何使用JS追踪<video>播放时长并在3秒时显示叠加文本？

没问题，这是个很常见的需求，用HTML5的Video API就能轻松搞定。我给你整理了完整的实现代码和关键细节，确保效果符合预期：

一、HTML结构 #

首先我们需要基础的视频元素，再加一个用来显示文本的容器（初始隐藏）：

<div style="position: relative; width: 640px;">
  <!-- 视频元素 -->
  <video id="myVideo" controls src="你的视频地址.mp4" width="640">
    你的浏览器不支持HTML5视频
  </video>
  <!-- 要显示的文本容器，初始隐藏，定位在视频上方 -->
  <div id="timedText" style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: white; font-size: 24px; background: rgba(0,0,0,0.7); padding: 8px 16px; display: none;">
    这是播放到3秒时显示的文本
  </div>
</div>

二、JavaScript逻辑 #

通过监听视频的timeupdate事件，实时检查播放进度，达到3秒时显示文本，并且确保只触发一次：

const video = document.getElementById('myVideo');
const timedText = document.getElementById('timedText');
let hasShownText = false; // 标记是否已经显示过文本，避免重复触发

// 监听播放时间更新事件
video.addEventListener('timeupdate', () => {
  // 检查当前播放时间大于等于3秒，且文本还没显示过
  if (video.currentTime >= 3 && !hasShownText) {
    timedText.style.display = 'block';
    hasShownText = true;
    // 可选：如果不需要后续再监听，可以移除事件节省性能
    // video.removeEventListener('timeupdate', arguments.callee);
  }
});

三、关键细节说明 #

• timeupdate事件：这个事件会在视频播放时间变化时触发（通常每秒触发4-6次），适合用来追踪播放进度。
• hasShownText标记：用来防止文本重复显示（比如用户暂停后继续播放，或者拖动进度条再次经过3秒的情况）。
• 定位方式：文本容器用绝对定位放在视频上方，确保不会影响视频的正常播放和控制。
• 移除事件监听：如果只需要在3秒时显示一次文本，后续不需要再监听进度，可以取消事件监听，减少不必要的性能消耗。

扩展优化 #

如果需要在多个时间点显示不同文本，可以把时间和文本内容做成数组，循环判断：

const timedMessages = [
  { time: 3, text: '3秒的提示文本', shown: false },
  { time: 7, text: '7秒的提示文本', shown: false }
];

video.addEventListener('timeupdate', () => {
  timedMessages.forEach(msg => {
    if (video.currentTime >= msg.time && !msg.shown) {
      timedText.textContent = msg.text;
      timedText.style.display = 'block';
      msg.shown = true;
    }
  });
});

内容的提问来源于stack exchange，提问作者Taras S.