-2

Então, a situação é o seguinte: Imagine um vídeo no html e imagine que esse vídeo tem 1 minuto. Eu queria saber como posso fazer pra acionar um evento para quando o vídeo atingir a marca de 30 segundos.

Quem puder e souber responder, agradeço desde já :D

1
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    Commented 26/01/2022 às 1:26

2 Respostas 2

6

Use o evento timeupdate (que é suportado tanto por ambos <video> e <audio>) junto com a propriedade HTMLMediaElement.currentTime (retorna o valor em segundos)

Nota: Veja mais eventos e propriedades do em HTMLMediaElement

Um exemplo simples seria:

<video id="meuvideo"></video>

var video = document.querySelector('#meuvideo');

video.addEventListener('timeupdate', function (event) {
  console.log(video.currentTime);
});

Nessa resposta forneço um exemplo de como obter a hora formatada:

No entanto formatar a hora só para comparar é muito trabalho que pode ser resolvido tendo o valor "absoluto" já antes, imaginando que você quer que o evento dispare quando o vídeo estiver em 00:10 (dez segundos) então simplesmente poderia fazer:

video.addEventListener('timeupdate', function (event) {
    if (video.currentTime >= 10) {
       console.log('Dispare aqui a ação desejada');
    }
});

Se quiser que dispare exatamente no décimo segundo tenha em mente que o valor retornado pelo currentTime será quebrado, então dentro do timeupdate o currentTime pode retornar algo como 9.901458 no nono segundo e em seguida 10.026666 quando estiver no décimo segundo. Uma checagem assim if (video.currentTime == 10) não funcionará, exemplo:

var time = 10.026666; // Simulado

if (time == 10) {
  console.log('Dispara o evento');
} else {
  console.log('NÃO dispara o evento');
}

Então você pode adaptar a checagem para isso:

var time = 10.026666; // Simulado

if (time >= 10 && time < 11) {
  console.log('Dispara o evento');
} else {
  console.log('NÃO dispara o evento');
}

Note que no mesmo segundo o timeupdate pode disparar mais de uma vez, nesse caso é bom criar uma checagem com uma variável bool para evitar que dispare duas vezes

var trigged = false;

video.addEventListener('timeupdate', function (event) {
    var time = video.currentTime;

    if (!trigged && time >= 10 && time < 11) {
       trigged = true; // Impede de disparar mais de uma vez
       console.log('Dispare aqui a ação desejada');
    }
});
-3

Existem duas maneiras de fazer isso, a mais convencional é usando:

videoElement.addEventListener('timeupdate', (event) => { 
   //e aqui você pode pegar o valor como event.target.currentTime 
}

Se você pretende fazer essa ação pro vídeo correndo normalmente essse trecho vai servir, porém se você pretende realizar a ação durante o seek do video(quando o usuário clica em determinado período do vídeo ou arrasta o indicador) pode se tornar problemático, uma vez que seu video pode não estar carregado, resultando na trava temporária da sua função de observação. Eu prefiro usar como:

    setInterval(async () => {
         let TempoAtual = videoElement.currentTime
         if(TempoAtual >= tempo que voce quer que atinja){
             //seu código aqui
         }
    },100);

Isso executa a verificação a cada 100ms, não importando se o player esta correndo normalmente ou se foi clicado//arrastado pelo usuário :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .