Retrieving HTML5 video duration separately from the file
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
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);
});
This is the modification to your code
var duration = document.getElementById("duration");
var vid_duration = Math.round(document.getElementById("video").duration);
//alert(vid_duration);
duration.innerHTML = vid_duration;
//duration.firstChild.nodeValue = vid_duration;
Hope this helps.
It looks like you're using IE, why don't you use document.getElementById
method to retrieve video object?
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.