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;
}