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>Dont play with frames, Play video in mousemove event else pause the video.