React/JS中HTML视频按时间节点跳转的精度问题求助

我明白你遇到的头疼问题——用parseInt处理视频时间戳时丢失了小数精度，导致跳转逻辑触发时机错误，甚至跳过关键的视频片段。咱们一步步来修复这个问题：

问题根源 #

parseInt()会直接截断时间的小数部分，比如parseInt(2.95)和parseInt(2.125455)都会得到2，这就导致你的判断逻辑会在视频播放到2.x秒时就错误触发跳转，而不是等到精确的2.95秒，自然会跳过后面的片段。而且视频的timeupdate事件触发间隔并不固定，很难刚好卡在整数秒触发，这进一步放大了精度问题。

解决方案 #

我们需要直接使用原始的浮点时间值进行比较，同时引入一个微小的误差阈值（比如0.01秒）来兼容timeupdate的触发间隔，还要加一个状态标记避免重复执行跳转逻辑：

重构后的代码示例 #

const timers = this.state.timers;
const video = this.videoRef;

if (!video || timers.length === 0) return;

let index = 0;
let isProcessing = false; // 防止重复触发跳转逻辑

// 先跳转到第一个标记的起始点
video.play().then(() => {
  video.currentTime = timers[0].start;
});

const handleTimeUpdate = () => {
  if (isProcessing) return; // 如果正在处理跳转，跳过当前事件

  const currentTimer = timers[index];
  const currentTime = video.currentTime;

  // 检查是否播放到当前标记的结束时间（允许0.01秒的误差）
  if (currentTime >= currentTimer.end - 0.01) {
    isProcessing = true;

    // 检查是否还有下一个标记
    if (index < timers.length - 1) {
      index++;
      // 跳转到下一个标记的起始点
      video.currentTime = timers[index].start;
      // 重置处理状态，允许下次触发
      isProcessing = false;
    } else {
      // 所有标记播放完毕，暂停视频
      video.pause();
      // 移除事件监听，避免内存泄漏
      video.removeEventListener("timeupdate", handleTimeUpdate);
    }
  }

  // 更新当前播放时间状态（这里可以保留ceil，但注意只是显示用，不要用在判断逻辑里）
  this.setState({ tickTime: Math.ceil(currentTime) });
};

video.addEventListener("timeupdate", handleTimeUpdate);

关键改进点 #

• 移除parseInt：直接使用原始的video.currentTime浮点值进行比较，保留完整精度
• 误差阈值兼容：用currentTime >= currentTimer.end - 0.01来判断，允许视频时间和标记时间有微小偏差，避免因为timeupdate触发时机没卡准而错过跳转点
• 防重复触发：添加isProcessing标记，避免在跳转过程中重复执行逻辑（比如视频设置currentTime时可能会再次触发timeupdate）
• 清理事件监听：所有标记播放完毕后移除timeupdate监听，避免不必要的性能消耗和内存泄漏

这样修改后，视频就能精准地在每个标记的end时间点跳转到下一个start时间点，不会再因为精度丢失跳过片段了。

内容的提问来源于stack exchange，提问作者dayachand patel