I have a small problem in the time conversion of a video, I'm not sure why, but at the beginning in the total time "NaN" appears, and after it starts to play the video the total time normally appears
window.onload = function() {
function inicio() {
//defina os objetos
player = document.getElementById("player");
video = player.querySelector("video");
tempoAtual = player.querySelector(".tempoatual");
tempoTotal = player.querySelector(".tempototal");
//defina os eventos
video.addEventListener("timeupdate", TempoDuracao, false);
}
inicio();
function TempoDuracao(event) {
//Tempo total
totalH = Math.floor(video.duration / 3600);
totalM = Math.floor(video.duration / 60);
totalS = Math.floor(((video.duration / 60) % 1) * 60);
//Tempo atual
atualH = Math.floor(video.currentTime / 3600);
atualM = Math.floor(video.currentTime / 60);
atualS = Math.floor(((video.currentTime / 60) % 1) * 60);
tempoAtual.innerHTML = conversaoT(atualH, atualM, atualS);
tempoTotal.innerHTML = conversaoT(totalH, totalM, totalS);
}
function conversaoT(H, M, S) {
if (H < 10 && H > 0) {
H = '0' + String(H) + ":";
} else {
H = '';
}
if (M < 10) {
M = '0' + String(M);
} else if (M > 59) {
M = M - (Math.floor(M / 60) * 60);
}
if (S < 10) {
S = '0' + String(S);
}
return String(H) + String(M) + ':' + String(S);
}
}
<div id="player">
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"width="250px" controls="controls"></video>
<p class="tempoatual"></p>
<p class="tempototal"></p>
</div>