How to get the duration of a formatted video in Html5?

Asked

Viewed 128 times

2

I am developing a player in Html5. I am 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

Html5 offers some property or function where I can get these values in the format hh:mm:ss?

html5 video

  • I already answered a question by doing this but for an audio instead of video. You can see here

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:

Browser other questions tagged html5 video

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