title: Retrieving HTML5 video duration separately from the file
body: <p>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.</p>
  
  <p>My HTML is simple:</p>
  
  <pre><code>&lt;video id="video" poster="image.jpg" controls&gt;     
      &lt;source src="video_path.mp4" type="video/mp4" /&gt;
      &lt;source src="video_path.ogv" type="video/ogg" /&gt; 
  &lt;/video&gt;
  &lt;ul class="controls"&gt; 
  &lt;li class="time"&gt;&lt;p&gt;&lt;span id="timer"&gt;0&lt;/span&gt; of &lt;span id="duration"&gt;0&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;  
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the javascript I am using to get and insert the duration is</p>
  
  <pre><code>var duration = $('#duration').get(0);
  var vid_duration = Math.round(video.duration);
  duration.firstChild.nodeValue = vid_duration;
  </code></pre>
  
  <p>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.</p>
  
  <p>But the real strange thing is if I put alert(duration) in my code like so</p>
  
  <pre><code>alert(duration);
  var vid_duration = Math.round(video.duration);
  duration.firstChild.nodeValue = vid_duration;
  </code></pre>
  
  <p>then it works fine (minus the annoying alert that pops up). Any ideas what is happening here or how I can fix it?</p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>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.</p>