Time conversion function showing Nan

Asked

Viewed 52 times

0

I have a small problem in the conversion of time of a video, I do not know why, but at the beginning of the total time appears "Nan", and after that starts playing the video to appear the total time normally

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>

  • 2

    When running the code nay Nan appeared as mentioned.

  • Friend, I also could not reproduce the problem. Which browser you are using?

  • I use Chrome and Firefox

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.