How to get the length of a video formatted in Html5? [duplicate]

Navigation
2

I'm developing a player in Html5. I'm in the part where I need to display the total duration time and the current time. But I only know how to get the values through the float.

Example 

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

Does html5 offer some property or function where I can get these values in hh:mm:ss format?

    
asked by anonymous 06.05.2018 / 01:16

1 answer

1

With pure javascript 

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>

Sources:

06.05.2018 / 05:29
How do I put a select within the while? creating a tooltip in javascript for an html with thymeleaf