Databases
StackOverflow2013
Postsdbo
POProblem retrieving HTML5 video duration
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblem retrieving HTML5 video duration
    text
    copied!<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>I know... its cheating. But for now it makes me happy :)</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> <hr> <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 real simple (see below)</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 is works fine (minus the annoying alert that pops up). Any ideas what is happening here or how I can fix it?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload