[SOLVED] having jerks when playing video on mousemove

having jerks when playing video on mousemove

I am facing a problem with video playback when mousemove function is applied. the function is working but when the video is played it has jerks. I want it to be smooth with an easing function maybe. Please guide me on how to play video without hanging up in between.

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>

Solution

Dont play with frames, Play video in mousemove event else pause the video.