Hướng dẫn javascript video player timeline - dòng thời gian của trình phát video javascript

I created a player using HTML/JS/CSS, which I uploaded , specific use on the real server , the player works correctly on high resolution [PC], but not working properly on mobile, for example, the preview does not work when hovering over the timeline with finger. I would like advice on how to fix it.

Your user agent does not support the HTML5 Video element.

js - timeline part

// 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, e.x - 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[];
    // e.x = position mous, rect.x = position timeline
    const percent = Math.min[Math.max[0, e.x - 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];
    }
}

This work on PC browser but not well on mobile

Your user agent does not support the HTML5 Video element.

  

play
pause
full screen


Current: 0 /