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.
I know... its cheating. But for now it makes me happy :)
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.
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 real simple (see below)
<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 is works fine (minus
the annoying alert that pops up). Any ideas what is happening here or how I can fix it?
