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

Question

我在应用 mousemove 功能时遇到视频播放问题。该功能正在运行，但在播放视频时出现抖动。我希望它可以通过缓动函数变得平滑。请指导我如何在不挂断的情况下播放视频。

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 事件中播放视频，否则暂停视频。

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

having jerks when playing video on mousemove

html

javascript

mousemove

jquery-easing

html5-video