I am working on building a HTML5 video player with a custom interface, but I am having some problems getting the video duration information to display.

My HTML is simple:

<video id=video poster=image.jpg controls>     

    <source src=video_path.mp4 type=video/mp4 />

    <source src=video_path.ogv type=video/ogg /> 

</video>

<ul class=controls> 

<li class=time><p><span id=timer>0</span> of <span id=duration>0</span></p></li>  

</ul>

And the javascript I am using to get and insert the duration is

var duration = $('#duration').get(0);

var vid_duration = Math.round(video.duration);

duration.firstChild.nodeValue = vid_duration;

The problem is nothing happens. I know the video file has the duration data because if I just use the default controls, it displays fine.

But the real strange thing is if I put alert(duration) in my code like so

alert(duration);

var vid_duration = Math.round(video.duration);

duration.firstChild.nodeValue = vid_duration;

then it works fine (minus the annoying alert that pops up). Any ideas what is happening here or how I can fix it?

UPDATE: Ok so although I haven't solved this problem exactly, but I did figure out a work around that handles my biggest concern... the user experience.

First the video doesn't begin loading until after the viewer hits the play button, so I am assuming that the duration information wasn't available to be pulled (I don't know how to fix this particular issue... although I assume that it would involve just loading the video metadata separately from the video, but I don't even know if that is possible).

So to get around the fact that there is no duration data, I decided to hide the duration info (and actually the entire control) completely until you hit play.

That said, if anyone knows how to load the video metadata separately from the video file, please share. I think that should completely solve this problem.