Javascript 角度4+；视频帧搜索性能优化

我目前正在实施一个受以下启发的UI：

我当前的在制品可以在这里测试：

重要代码片段：

// Video Service
jumpFrames(direction: number) {
  const multi = direction > 0 ? AMOUNT_FRAMES_SKIPPED : -AMOUNT_FRAMES_SKIPPED;
  this.player.currentTime = this.player.currentTime + multi / FPS;
}

// Drag Component
onPanStart(e) {
  this.video.player.pause();
  this.startX = e.center.x;
  this.startY = e.center.y;
  this.startTime = this.video.currentTime;
}

onPan(e) {
  this.visible = true;
  this.x = this.startX + e.deltaX;
  // diameter offset
  this.y = this.startY + e.deltaY - DIAMETER;

  if (e.additionalEvent === 'panleft') {
    this.directionIcon = 'fast_rewind';
    this.video.jumpFrames(-1);
  } else if (e.additionalEvent === 'panright') {
    this.directionIcon = 'fast_forward';
    this.video.jumpFrames(1);
  } else {
    // TODO: How to handle 'panup' or 'pandown'
    // this.video.jumpFrames(e.deltaX);
  }
}

正如您在WIP应用程序中看到的，帧搜索不是很平滑。有很多口吃。当移动太快时，函数的调用次数不会与缓慢移动时相同

---

如何改进代码？甚至有可能获得与动画中相同的平滑性能吗？

对于调试，可以使用查看缓冲时间/帧。如果您试图查找的帧超出缓冲区，可能就是问题所在？@cmonkey我也在用硬盘上的本地视频进行测试。这应该可以解决缓冲的问题，不是吗？不过，它似乎没有多大帮助。我认为它更多地与浏览器以及它如何处理/缓冲视频有关。相关：与视频处理超时有关。@cmonkey也许你是对的。这将是一个麻烦，因为我需要切换到本机实现？