-1

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

1 Answers1

1

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

Tyler Dill
  • 351
  • 2
  • 6
  • Thanks for the comment, I've been working with JS for a while, unfortunately this wasn't enough, but the problem will be somewhere in this direction, as you wrote. It still doesn't work for me to hold my finger and scroll on the timeline so that the preview image is displayed, like it is for example with youtube –  Jul 12 '22 at 00:38
  • By the way, nice job with the player so far. I think you'll need to focus on which touch in the Touch List fired the event and grab it's x/y coordinates. Since a touch events contains a list of events you can't just grab the event.x/event.y. you'll need to figure out which touch is the desired one(maybe touches[0]). I'm sure you'll figure it out from here. – Tyler Dill Jul 12 '22 at 00:54
  • @TylerDill Do you think the Asker could change their code logic? Maybe, on mobile, it should detect touch events as a "mouseOver" equivalent (thus allowing touch points to show the relevant timeline thumbnail) and also have a double-tap become the new "click" event (for seeking `currentTime` to the new click/tap point)... **I don't use touch events** (never needed), but it's possible to detect mobile/phone browser so the logic is an `IF` statement that decides `if (mobile == true) { ...touch point is considered mouse over point for thumbnail... } else { ...mouse rollOver shows thumbnail.. };` – VC.One Jul 15 '22 at 12:18
  • @VC.One, he needs to be able to detect touch events on touchscreen monitors. Not just mobile devices. I could be using my mouse and then switch to my laptop touchscreen then switch back to my mouse. So you really need to be able to handle all use cases – Tyler Dill Jul 17 '22 at 01:03