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?

What browsers? Have you tried delaying the call a few miliseconds? Maybe it's taking a little longer to fully load the video element — Ortiga, May 12 '11 at 16:49

score 155 · Accepted Answer · answered May 12 '11 at 19:14

155

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

answered May 12 '11 at 19:14

Richard M

14,244
6
52
48

2

This does not work in Safari. I tried loadeddata event too. Any ideas? – Simon Perepelitsa Nov 04 '12 at 19:22
1

Never mind. This is an issue with WEBM format. MP4 works fine. – Simon Perepelitsa Nov 04 '12 at 19:27
2

Use 'durationchange' event and always call pause before making changes to playing video – Jason White Jul 28 '16 at 19:18

score 89 · Answer 2 · edited Feb 02 '17 at 20:43

89

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

edited Feb 02 '17 at 20:43

Aamir Shahzad

6,683
8
47
70

answered Aug 11 '14 at 03:45

anita

1,477
1
14
12

the second digit doesn't seem to end how much of the video was loaded to begin with... first digit worked tho. Any thoughts? – MartianMartian Mar 10 '18 at 13:59
this doesn't really work well. the browser still preload as much as it wants, maybe just start and end at where you decided, but the preload didn't stop... – MartianMartian Mar 10 '18 at 14:43
4

if you don't want to specify the end time you can simply do add `#t=10` – Divakar Rajesh Jul 09 '21 at 12:15
This is easily the simplest and best solution for starting video at a certain time – James Hooper Sep 25 '21 at 17:45
If you use `autoplay` and `muted` attributes none of the other uses are useful with js, but this one works properly. – gurkan Mar 03 '22 at 10:48
1

Just to add, this is called media fragments, see more in the spec: http://www.w3.org/TR/media-frags/ – Samuel Apr 21 '22 at 19:43
also see https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery#specifying_playback_range – djvg Feb 20 '23 at 08:34

score 64 · Answer 3 · answered May 12 '11 at 21:14

64

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.

answered May 12 '11 at 21:14

rlovtang

4,860
2
30
30

Browser support is good. I think all HTML5 supporting browsers also support at least the basic temporal media fragments. – Jim S. Jun 07 '13 at 20:47
@michaelhanon, it would be rather easy to write a polyfill for IE to achieve that. Detect browser, if not supported, break up URL, find the query parameter, use Javascript to change the video's time... I might do it if I get a chance – gdgr Feb 23 '16 at 10:41
is there a fragment to set the END time? – DGoiko Dec 10 '18 at 01:00
1

It even allows fractions of a second after a dot: `#t=17.79` ^_^ – Klesun Oct 07 '20 at 12:27

score 36 · Answer 4 · answered Dec 05 '12 at 02:20

36

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.

answered Dec 05 '12 at 02:20

BobK

369
3
2

the second digit doesn't seem to end how much of the video was loaded to begin with... first digit worked tho. Any thoughts? – MartianMartian Mar 10 '18 at 14:00
1

When working with browsers, it's always better to check the W3C spec and caniuse.com to see how widely supported a feature is. (The best StackOverflow answers link to the specs.) In this case, they're called 'Media Fragments', and the spec is here. https://www.w3.org/TR/media-frags/ – Michael Scheper Apr 03 '20 at 20:29

score 6 · Answer 5 · answered Jul 31 '12 at 16:44

6

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

answered Jul 31 '12 at 16:44

Robert Reinhardt

81
1
1

I think the loadedmetadata is supposed to be the correct event, but I too was getting seekable.length 0 (only in Safari on OSX) unless I listened for dataloaded. Thanks – Statuswoe Jul 02 '15 at 14:11
1

Why was this downvoted? It's probably not directly related to the example provided by the OP, but it's factually accurate and relevant to the general subject of the question. – JayPea Nov 19 '15 at 21:08

Start HTML5 video at a particular position when loading?

5 Answers5

Linked

Related