Retrieving HTML5 video duration separately from the file

Do that:

var myVideoPlayer = document.getElementById('video_player');myVideoPlayer.addEventListener('loadedmetadata', function() {    console.log(myVideoPlayer.duration);});

Gets triggered when the browser received all the meta data from the video.

[edit] Since then the better approach would be to listen to 'durationchange' instead of 'loadedmetadata' which can be unreliable, as such:

myVideoPlayer.addEventListener('durationchange', function() {    console.log('Duration change', myVideoPlayer.duration);});

The issue is in WebKit browsers; the video metadata is loaded after the video so is not available when the JS runs. You need to query the readyState attribute; this has a series of values from 0 to 4, letting you know what state the video is in; when the metadata has loaded you'll get a value of 1.

So you need to do something like:

window.setInterval(function(t){  if (video.readyState > 0) {    var duration = $('#duration').get(0);    var vid_duration = Math.round(video.duration);    duration.firstChild.nodeValue = vid_duration;    clearInterval(t);  }},500);

I haven't tested that code, but it (or something like it) should work.

There's more information about media element attributes on developer.mozilla.org.

The HTML5 spec does allow for only preloading the metadata:

<video id="video" poster="image.jpg" controls preload="metadata">         <source src="video_path.mp4" type="video/mp4" />    <source src="video_path.ogv" type="video/ogg" /> </video>

http://www.w3.org/TR/html-markup/video.html#video.attrs.preload