Time conversion function showing NaN

0

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>
    
asked by anonymous 10.05.2018 / 14:45

0 answers