Start HTML5 video at a particular position when loading?

Question

I need HTML5 video to start at certain point. Let's say at time 50 seconds onward.

I tried but its not working as expected. is there something i am doing wrong?

Here is the code:

   <video id="vid1" width="640" height="360">        <source src="file.webm" type="video/webm" />         Your browser does not support the video tag.    </video>    <script>        document.getElementById('vid1').currentTime = 50;    </script>  

When the page loads, it just starts playing from beginning. However if I call this during playback like after some time, it works fine. Is there anything I am missing?

Answer 1

You have to wait until the browser knows the duration of the video before you can seek to a particular time. So, I think you want to wait for the 'loadedmetadata' event something like this:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {   this.currentTime = 50; }, false); 

Answer 2

WITHOUT USING JAVASCRIPT

Just add #t=[(start_time), (end_time)] to the end of your media URL. The only setback (if you want to see it that way) is you'll need to know how long your video is to indicate the end time. Example:

<video>     <source src="splash.mp4#t=10,20" type="video/mp4"> </video> 

Notes: Not supported in IE