javascript - 在 mousemove 上播放视频时出现抽搐

Question

应用鼠标移动功能时，我遇到视频播放问题。该功能正常工作，但播放视频时出现抖动。我希望它能够通过缓动功能变得平滑。请指导我如何在不挂断的情况下播放视频。

const startDrawing = () => {
    const video = document.querySelector("video");
    let currentFrame = 0
    let mediaTime;
    let paintCount = 0;
    let startTime = 0.0;
    let fps = 60
    video.pause();
    window.addEventListener("mousemove", () => {video.currentTime = video.currentTime + 1/fps});
    video.addEventListener("play", () => {
      if (!("requestVideoFrameCallback" in HTMLVideoElement.prototype)) {
        return alert("Your browser does not support the `Video.requestVideoFrameCallback()` API.");
      }    
    });
  };
  window.addEventListener("load", startDrawing);

Courtesy of Big Buck Bunny: </br><video width="320" height="240" autoplay="" muted="" loop="" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>

Answer 1

不要使用帧播放，在 mousemove 事件中播放视频，否则暂停视频。