时间戳

首页 > 解决方案 > 页面上多个视频的显示持续时间

javascript - 页面上多个视频的显示持续时间

问题描述

我正在尝试使用 JavaScript 为页面上的每个视频显示“持续时间”。到目前为止，这是我想出的：

var vid = document.querySelector(".mhdividdur");
vid.onloadedmetadata = function() {
  var x = document.querySelector(".mhdividdur").duration;
document.querySelector(".mhdi_video_duration").innerHTML = x;
};
<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>

问题是它只返回第一个视频的持续时间。

我应该怎么办？

PS如果有除了JavaScript以外的其他方式来显示时长，请给我提示。

谢谢你们

标签： javascripthtmlvideohtml5-videometadata

解决方案

使用querySelector函数，您可以获得与您输入的选择器匹配的第一个元素。这就是为什么您需要使用函数获取所有视频元素的原因，该querySelectorAll函数将返回一个元素数组并循环打印它们的持续时间。

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>

推荐阅读