以mm:ss格式显示视频时长

问题描述

感谢Saar DavidsonThis Answer),我们知道如何在页面显示多个视频的时长。 但是,如何将显示的秒转换为 mm:ss 格式?!

以下是显示视频时长(以秒为单位)的代码

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>

解决方法

没有任何图书馆的需要。我已经更新了代码。

检查一下:

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>

感谢Saar Davidson的提示:)