Длительность отображения нескольких видеороликов на странице

#javascript #html #video #html5-video #metadata

#javascript #HTML #Видео #html5-видео #метаданные

Вопрос:

Я пытаюсь отобразить «длительность» для каждого видео на странице с помощью 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>

Проблема в том, что он возвращает длительность только для 1-го видео.

Что мне делать?

PS Если есть какие-либо другие способы, кроме JavaScript, для отображения продолжительности, пожалуйста, дайте мне подсказку.

Спасибо всем

1. Вместо querySelector используйте getElementsByClassName, который вернет массив элементов, и вы можете перебирать его и обновлять продолжительность для каждого из них.

2. я сделал это, но не сработало! 🙁

Ответ №1:

с 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>

1. извините, я полный новичок. Я просто скопировал вставил это, и ничего не произошло! даже длительность не отображается для 1-го видео. не могли бы вы помочь мне в этом?