Creé un reproductor usando HTML/JS/CSS, que subí https://codepen.io/aaron1799/pen/MWVeRYY , uso específico en el servidor real http://auto-rychnov.cz/ , el reproductor funciona correctamente en alta resolución (PC), pero no funciona correctamente en dispositivos móviles, por ejemplo, la vista previa no funciona al pasar el dedo sobre la línea de tiempo. Me gustaria que me aconsejaran como solucionarlo. Thank you in advance ¨

js - parte de la línea de tiempo

 // Timeline timelineContainer.addEventListener("mousemove", handleTimeLineUpdate) timelineContainer.addEventListener("mousedown", toggleScrubbing); document.addEventListener("mouseup", e => { if(isScrubbing) toggleScrubbing(e) }) document.addEventListener("mousemove", e => { if(isScrubbing) handleTimeLineUpdate(e) }) let isScrubbing = false; let wasPaused; function toggleScrubbing(e){ const rect = timelineContainer.getBoundingClientRect(); const percent = Math.min(Math.max(0, ex - rect.x), rect.width)/rect.width; isScrubbing = (e.buttons & 1) === 1; videoContainer.classList.toggle("scrubbing", isScrubbing) if(isScrubbing){ wasPaused = video.paused; video.pause(); } else { video.currentTime = percent * video.duration; if(!wasPaused) video.play(); } handleTimeLineUpdate(e); } function handleTimeLineUpdate(e){ const rect = timelineContainer.getBoundingClientRect(); // ex = position mous, rect.x = position timeline const percent = Math.min(Math.max(0, ex - rect.x), rect.width)/rect.width; // /10 protože mám po 10 vterinach const previewImgNumber = Math.max(1, Math.floor((percent*video.duration)/10)); const previewImgSrc = `video/preview${previewImgNumber}.jpg`; // Uložení cesty k obrazku previewImg.src = previewImgSrc; timelineContainer.style.setProperty("--preview-position",percent); if(isScrubbing) { e.preventDefault(); thumbnailImg.src = previewImgSrc; timelineContainer.style.setProperty("--progress-position", percent); } }

Esto funciona en el navegador de la PC pero no en el móvil