HTML5 Video特定时间点暂停失效：相等判断无法触发暂停求助

这是个非常典型的问题，核心原因在于HTML5 Video的currentTime属性的精度特性——它几乎不会精确等于你指定的整数值，比如5秒。

问题根源 #

视频的播放是基于帧的，每帧之间的时间间隔由视频帧率决定：比如24帧/秒的视频，每帧间隔约0.0417秒，30帧/秒的则约0.0333秒。浏览器在更新currentTime时，只会同步到当前播放帧的时间戳，所以currentTime的值会是类似4.978、5.021这样的数值，几乎不可能刚好等于5。这就是为什么==判断永远触发不了，而>判断能在时间超过5秒后的第一帧就触发。

解决方案：用范围判断替代精确相等 #

要在指定时间点附近触发动作，你需要设置一个合理的时间阈值，判断currentTime是否落在目标时间的小范围内，再结合timeupdate事件（视频时间更新时触发）来检测。同时建议添加标志位，避免同一时间点重复触发动作。

示例代码如下：

const vid = document.getElementById('your-video-id');
// 用标志位记录是否已经触发过对应时间点的动作
let triggeredAt5s = false;
let triggeredAt10s = false;

// 监听视频时间更新事件
vid.addEventListener('timeupdate', () => {
  const threshold = 0.1; // 可根据视频帧率调整，比如高帧率视频设为0.05

  // 检测5秒附近的时间范围
  if (vid.currentTime >= 5 - threshold && vid.currentTime <= 5 + threshold && !triggeredAt5s) {
    vid.pause();
    // 执行你需要的自定义动作，比如弹窗、切换内容等
    console.log('视频在5秒位置暂停');
    triggeredAt5s = true; // 标记已触发，防止重复执行
  }

  // 检测10秒附近的时间范围（示例）
  if (vid.currentTime >= 10 - threshold && vid.currentTime <= 10 + threshold && !triggeredAt10s) {
    // 执行10秒对应的动作
    console.log('触发10秒的自定义动作');
    triggeredAt10s = true;
  }
});

额外提示 #

• 阈值大小可以根据视频帧率调整：帧率越高，阈值可以设得越小，确保能覆盖到帧的时间点。
• 如果需要在视频播放过程中重复触发同一时间点的动作（比如视频循环播放时），记得在视频重新开始播放时重置对应的标志位。

内容的提问来源于stack exchange，提问作者Emmanuel Okezie Ogbonna