问题描述
感谢Saar Davidson(This 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的提示:)