Display Duration For Multiple Videos On A Page

I'm trying to display 'duration' for each video on the page using JavaScript. here is what I've come up with so far: The problem is that it only returns the duration for the 1st v

Solution 1:

with querySelector function you can get the first of the elements that match the selector you entered. that's why you need to get all the video elements with querySelectorAll function which will return an array of elements and loop to print their duration.

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;
  };
}

<videoclass="mhdividdur"width="240px"controlspreload="metadata"poster="http://cdn1.ko.cowa.ir//kocofeaturedimage.jpg"><sourcesrc="http://cdn1.ko.cowa.ir//hwasa.mp4"type='video/mp4'></video><pclass="mhdi_video_duration"></p><videoclass="mhdividdur"width="240px"controlspreload="metadata"poster="http://cdn1.ko.cowa.ir//kocofeaturedimage.jpg"><sourcesrc="http://cdn1.ko.cowa.ir//numb.mp4"type='video/mp4'></video><pclass="mhdi_video_duration"></p>