高精度HTML视频播放器指定时间范围循环实现求助

最优思路：用requestAnimationFrame高帧率监听 + 直接修改currentTime #

之前的三种方法各有短板，这个方案能兼顾精度和循环需求——requestAnimationFrame是浏览器原生的帧同步API，默认60fps（约16ms一次），比setInterval精度高得多，配合直接跳转currentTime能做到几乎无延迟的循环。

具体实现步骤 #

• 先拿到用户选中文本对应的精确开始/结束时间（要精确到毫秒，比如12.345秒）
• 关闭视频自带的循环：video.loop = false，避免和自定义逻辑冲突
• 启动requestAnimationFrame监听播放状态：
  • 每帧检查当前播放时间，当距离结束时间只剩10ms左右时，直接把currentTime设为开始时间
  • 如果用户手动把进度拖到了时间范围外，也自动拉回开始时间

代码示例 #

// 替换成你实际拿到的时间范围（单位：秒，支持小数）
const targetStartTime = 8.25;
const targetEndTime = 12.7;
const videoEl = document.getElementById('target-video');
videoEl.loop = false;

let animationId;
function checkPlayback() {
  const currentTime = videoEl.currentTime;
  // 提前10ms跳转，避免播放过了结束点
  if (currentTime >= targetEndTime - 0.01) {
    videoEl.currentTime = targetStartTime;
  }
  // 防止用户手动拖出范围，强制拉回起始点
  else if (currentTime < targetStartTime) {
    videoEl.currentTime = targetStartTime;
  }
  animationId = requestAnimationFrame(checkPlayback);
}

// 用户选中文本后调用这个函数启动循环
function startRangeLoop() {
  cancelAnimationFrame(animationId); // 先清除之前的监听，避免重复
  videoEl.currentTime = targetStartTime; // 先跳转到起始点
  videoEl.play();
  checkPlayback();
}

// 取消循环时调用
function stopRangeLoop() {
  cancelAnimationFrame(animationId);
  videoEl.loop = false;
}

优化小技巧 #

• 可以根据视频的实际帧率（videoEl.videoFrameRate）调整跳转提前量，比如60fps的视频单帧是1/60≈0.016秒，提前0.016秒跳转，精度会更高
• 不需要循环的时候一定要调用cancelAnimationFrame，避免浪费浏览器性能
• 旧浏览器不支持requestAnimationFrame的话，降级用setInterval，把间隔设为10ms，比默认的100ms精度好很多

备选复杂方案（适合极高精度需求） #

如果业务要求绝对零延迟，可以用Media Source Extensions (MSE) 把目标时间范围的视频片段单独切出来，生成新的媒体源，然后设置这个源让视频循环播放。但这个方案实现起来复杂，需要处理视频编码、切片等逻辑，一般场景没必要用。

内容的提问来源于stack exchange，提问作者Illya Bakurov