How to get time duration of video in html5 video player..?

Question

Hi I'am using a html5 video player i want to get a time duration of each video in my playlist array. Below is the code i'am using but it shows the NaN in console. Please Help Me...Thank's for all in advanced.

        $.each(self._playlist.videos_array, function(key ) {
        if(1) {
            self.dummy_video = $("<video />");  
            console.log(self._playlist.videos_array[key].Levels[0].mp4);
            self.dummy_video.attr('src', self._playlist.videos_array[key].Levels[0].mp4);
            //self.dummy_video.load();
            //self.dummy_video[0].play();
             //self.dummy_video[0].pause();         
             var video = self.dummy_video.get(0);
             console.log(video.duration);               
        }           
      });   

Answer 1

There are two ways of fixing this:

Using setInterval: Problem retrieving HTML5 video duration

Using events: current/duration time of html5 video?

Answer 2

From W3C#mediaevents:

The event loadedmetadata's description:

The user agent has just determined the duration and dimensions of the media resource and the text tracks are ready.

You can listen to that event, and until then, the duration of the video is NaN.

Demo below:

$(function() {
    var video = $("<video>");
    video[0].addEventListener("loadedmetadata", function() {
      // Here you will get a valid duration now.
      console.log("Video duration now: " + video[0].duration);
    });
    video.attr("controls", "controls").attr("src", "https://avvimeo-a.akamaihd.net/68093/485/101309641.mp4?token2=1436525964_a8966f84e4a514fdb7a406a9ee6f1e30&amp;aksessionid=6475e4121b60d4cf");
    video.appendTo($("#playblock"));

    // Here's the position of your console.log, it'll put NaN here.
    console.log("Video duration now: " + video[0].duration);
     
     
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="playblock"></div>