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

495
Visualizações
HTML5 Video - Pause when get to middle of video

Aim: video clip is in 2 parts: first half of content is the playing forwards, the second half is the first half in reverse. The video plays when mouseover and will then pause at the halfway stage. On mouseout #1 if paused at the halfway stage it unpauses and plays to end: #2 if you mouseout for before it pauses it will jump to the corresponding timestamp in the 2nd half and play - eg if 10sec video and you mouse at 3sec mark it will jump to 7sec and play from there to the end. See Fiddle for a rough example:

https://jsfiddle.net/cucocreative/1n3Lyqd5/422/

or see this site for what we are trying toreplicate:

https://www.polestar.com/uk/polestar-2/ (first section under hero banner)

Fiddle has latest version of code (not below).

var myVideo=document.getElementById("video"); 
var halfway=0;
document.getElementById("halfway").innerHTML=halfway;

function Rewind() { 
  var duration = video.duration;
  var currentTime = video.currentTime;
  var jumpto = duration - currentTime;
  var pause = duration/2;
  document.getElementById("jumpto").innerHTML=jumpto;
  
  myVideo.currentTime = jumpto;
  myVideo.play();
  
}
function Play() {
    if (myVideo.paused) 
  var duration = video.duration;
  var pause = duration/2;
  document.getElementById("pause").innerHTML=pause;
  myVideo.play();
  this.on('timeupdate', function () {
      console.log(this.currentTime());
    });
}  

$("#video").on(
    "timeupdate", 
  function(event){
    var duration = video.duration;
    var pause = duration/2;
    onTrackedVideoFrame(this.currentTime, this.duration);
    // Pause when hit the halfway stage
    // check to see if halfway yet
    // can't get the below to play nice with the rewind function
    if(this.currentTime >= pause) {
      //this.pause();
      //var halfway = 1;
      //document.getElementById("halfway").innerHTML=halfway;
    }
});

function onTrackedVideoFrame(currentTime, duration){
    $("#current").text(currentTime); //Change #current to currentTime
    $("#duration").text(duration)
}

After a lot of deadends, I have figured out the rewind effect and can get it to pause at the halfway stage BUT when both blocks of code are together they don't play nice together so have commented out the pause code for the time being (see lines 36-40).

I can't figure out the logic to get the Rewind function to know if the video has gotten as far as being paused yet.

So currently, as long as you mouseout before the 2sec mark it works, after that's I need help with.

update: I did think that putting an if statement at line 12 to check if the currentTime is >= than the Duration would work but it's not.

if(this.currentTime >= pause) {
  myVideo.currentTime = pause;
} else {
  myVideo.currentTime = jumpto;
}
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

I managed to get a rough solution working, it probably needs a little fine tuning tho.

HTML


<div style="text-align:center" onmouseenter="Play()" onmouseleave="Rewind()"> 
  <video 
    id="video" 
    onended="onVideoEnd()"
    class="video"
    width="480">
    <source src="https://www.cucostaging.co.uk/side-reversed.mp4" type="video/mp4" />
    Your browser does not support HTML5 video.
  </video>
</div>

Script

//var myVideo=document.getElementById("video"); 
const myVideo = document.getElementById('video')
var status = 'STOP' // STOP | PLAY | REWIND

function Rewind() { 
  var currentTime = myVideo.currentTime;
  var duration = myVideo.duration;
    myVideo.currentTime = duration - currentTime;
  status = 'REWIND'
  myVideo.play();
  
}
function Play() {
  var currentTime = myVideo.currentTime;
  var duration = myVideo.duration;
  let tempCurrent = status === 'STOP' ? 0 :  duration - currentTime;
  myVideo.currentTime = tempCurrent;
  status = 'PLAY'
  myVideo.play();
  setTimeout(() => {
    if(status === 'PLAY')
        myVideo.pause()},
    (2 - tempCurrent) * 1000)
}  

function onVideoEnd() {
    status = 'STOP'
}
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