Display Video Duration in mm:ss Format

Question

Thanks to Saar Davidson(This Answer) we know how to display duration of multiple videos on the page. But, how can I convert the seconds shown to mm:ss format?!

here is the code which displays duration of video in seconds:

var videos = document.querySelectorAll(".mhdividdur");
var durationsEl = document.querySelectorAll(".mhdi_video_duration");
for(let i = 0; i < videos.length; i++) {
  videos[i].onloadedmetadata = function() {
    durationsEl[i].innerHTML = videos[i].duration;
  };
}

<video class="mhdividdur" width="240px" controls preload="metadata" poster="http://cdn1.ko.cowa.ir//kocofeaturedimage.jpg">
<source src="http://cdn1.ko.cowa.ir//hwasa.mp4" type='video/mp4'>
</video>
<p class="mhdi_video_duration"></p>
<video class="mhdividdur" width="240px" controls preload="metadata" poster="http://cdn1.ko.cowa.ir//kocofeaturedimage.jpg">
<source src="http://cdn1.ko.cowa.ir//numb.mp4" type='video/mp4'>
</video>
<p class="mhdi_video_duration"></p>

you have nice answers for that here https://stackoverflow.com/questions/6312993/javascript-seconds-to-time-string-with-format-hhmmss — Saar Davidson, Sep 26 '20 at 16:04
You could use a library like [moment](https://momentjs.com/) — Parth Shah, Sep 26 '20 at 16:13

mhdi · Accepted Answer · 2020-09-29T10:18:27.690

There is NO NEED of any library. I have Updated the code.

Check it out:

var videos = document.querySelectorAll(".mhdividdur");
var durationsEl = document.querySelectorAll(".mhdi_video_duration");
for(let i = 0; i < videos.length; i++) {
  videos[i].onloadedmetadata = function() {
    var mzminutes = Math.floor(videos[i].duration / 60);
    var mzseconds = Math.floor(videos[i].duration - (mzminutes * 60));
    durationsEl[i].innerHTML = mzminutes+':'+mzseconds;
  };
}

<video class="mhdividdur" width="240px" controls preload="metadata">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type='video/mp4'>
</video>
<p class="mhdi_video_duration"></p>
<video class="mhdividdur" width="240px" controls preload="metadata">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type='video/mp4'>
</video>
<p class="mhdi_video_duration"></p>

thank you Saar Davidson for the hints :)

Display Video Duration in mm:ss Format

1 Answers1