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');
}
});