Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

374
Visualizações
Fix preview timeline - video player HTML/CSS/JS

I created a player using HTML/JS/CSS, which I uploaded https://codepen.io/aaron1799/pen/MWVeRYY , specific use on the real server http://auto-rychnov.cz/, 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

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda