Start HTML5 video at a particular position when loading?

I am trying to play HTML5 video (VP8 encoded). What I want is to play it at a certain position. Let's say at time 50 seconds onward.

I have tried but there seem to be some problem. Can you suggest if there is something I'm 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>

I have tried but it doesn’t work. When video loads, it just starts playing from start. However if I call this during playback like after some time video is playing it works fine. Is there something I am missing?

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);

You can link directly with Media Fragments URI, just change the filename to file.webm#t=50

Here's an example

This is pretty cool, you can do all sorts of things. But I don't know the current state of browser support.

anita

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

adjust video start and end time when using the video tag in html5;

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

where left of comma is start time in seconds, right of comma is end time in seconds. drop the comma and end time to effect the start time only.

Kamila

Using a #t=10,20 fragment worked for me.

On Safari Mac for an HLS source, I needed to use the loadeddata event instead of the metadata event.

来源：https://stackoverflow.com/questions/5981427/start-html5-video-at-a-particular-position-when-loading

标签

javascript

html5-video