2

Estou desenvolvendo um player em Html5. Estou na parte onde preciso exibir o tempo de duração total e o tempo atual. Porém eu só sei obter os valores através do float.

Exemplo

 console.log(video.duration); // 6605
 console.log(video.currentTime); // 0.855

O html5 oferece alguma propriedade ou função onde consigo obter esses valores no formato hh:mm:ss?

1
  • Já respondi a uma pergunta fazendo isso mas para um audio ao invés de video. Pode ver aqui
    – Isac
    Commented 5/05/2018 às 23:28

1 Resposta 1

1

Com javascript puro

var vid = document.getElementById("myVideo");

vid.ontimeupdate = function() {myFunction()};

function myFunction() {
   document.getElementById("posicao").innerHTML = "Posição atual "+vid.currentTime;
   document.getElementById("duracao").innerHTML = "Duração "+toHHMMSS(vid.duration);
}
    
//função para transformar segundos em hh:mm:ss    
var toHHMMSS = (secs) => {
    var sec_num = parseInt(secs, 10)    
    var hours   = Math.floor(sec_num / 3600) % 24
    var minutes = Math.floor(sec_num / 60) % 60
    var seconds = sec_num % 60    
    return [hours,minutes,seconds]
        .map(v => v < 10 ? "0" + v : v)
        .filter((v,i) => v !== "00" || i > 0)
        .join(":")
}
    
<video id="myVideo" width="320" height="176" controls>
   <source src="http://kithomepage.com/sos/deo.mp4" type="video/mp4">
   <source src="mov_bbb.ogg" type="video/ogg">
   Seu browser não suporta HTML5 video.
</video>

<p id="posicao"></p>
<p id="duracao"></p>

Fontes:

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