smooth video time shift

25 Views Asked by At

I have a small problem because I lack the necessary knowledge. The issue is that I have a small example code for time-shifting a video by moving the mouse on the x-axis. However, the video updates very slowly, resulting in some lag. Do you have any ideas on how to make it smoother?

HTML:

<link rel="stylesheet" href="style.css">

    <main>
    <div class="full-viewport-center">
        <video class="vid" autoplay muted loop>
            <source src="https://img.tpx.cz/uploads/video (1080p).mp4">
        </video>
    </div>
</main>

<script src="app.js"></script>

JS:

const video = document.querySelector('.vid');

document.addEventListener('mousemove', function(event) {
    var width = window.innerWidth;
    var mouseX = event.clientX;
    var percentage = (mouseX / width) * 100;
    
    console.log(percentage / 100);
    seekVideo(percentage / 100);
});

function seekVideo(percent) {
    const duration = video.duration;
    const time = duration * percent;
    video.currentTime = time;
}
0

There are 0 best solutions below