Search code examples
javascripthtmlcsshtml5-videovideo-player

Fix preview timeline - video player HTML/CSS/JS

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. Thank you in advance¨

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 enter image description here

Solution

  • Touch events are more complicated since there can be multiple touches that need to be tracked at one time as opposed to one mouse cursor. You can try adding the following listeners. It might do the trick or at least point you in the right direction:

    // Timeline add touch listeners

timelineContainer.addEventListener("touchmove", handleTimeLineUpdate)
timelineContainer.addEventListener("touchstart", toggleScrubbing);

document.addEventListener("touchend", e => {
    if(isScrubbing) toggleScrubbing(e)
})

document.addEventListener("touchmove", e => {
    if(isScrubbing) handleTimeLineUpdate(e)
})

    There's much more info here: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events