Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Start HTML5 video at a particular position when loading?

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?

like image 374
Johnydep Avatar asked May 12 '11 16:05

Johnydep


People also ask

How do you start a video at a certain time in HTML?

We have set the ID of our video player as “myVideo”. In the above line of JavaScript code, we have set the currentTime property of our HTML video to 15 seconds. The currentTime property will set the starting time of the video. Here I have set it to 15 seconds.

How do you assign a video in HTML?

HTML allows playing video in the web browser by using <video> tag. To embed the video in the webpage, we use src element for mentioning the file address and width and height attributes are used to define its size. Example: In this example, we are using <video> tag to to add video into the web page.

How do you prevent HTML5 video from changing size when loading a new source?

If all you want is really to avoid the width/height to return to defaults (300 x 150) when the next video is loading, you just have to set your <video> 's width and height properties to the ones of the loaded video ( videoWidth and videoHeight are the real values of the media, not the ones of the element).


2 Answers

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); 
like image 91
Richard M Avatar answered Oct 11 '22 11:10

Richard M


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

like image 37
anita Avatar answered Oct 11 '22 09:10

anita