Does the metadata preload attribute on html 5 loads the entire video?

Question

When using html 5 video tag, does the preload="metadata" attribute load the video already? I'm a bit concerned about the performance issue on page load is should the video size be greater than 100MB.

I notice that when having this attribute, an image of the very first second of the video is loaded but does not exactly play the video.

<video width="320" height="240" controls preload="metadata">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

First, browsers don't have to follow this attribute. Then, the metadata value says the browser that you'd like to download **only** the metadatas of the media (width, height, duration...). — Kaiido, Sep 07 '16 at 01:47
@Kaiido so does that mean that the video itself is not being loaded and only the metadata? Should that be the case, load performance issue should not be a concern here? Thanks! — basagabi, Sep 07 '16 at 01:59
@basagabi keep in mind that that while `preload` is not a guarantee that the video will be downloading immediately, it leaves the browser open to that possibility. Safari on older Macs have a tendency to totally fail when `preload=auto`. But all mobile devices will ignore `preload = auto` so there's no worries there at least. — zer00ne, Sep 07 '16 at 02:13

score 5 · Answer 1 · edited Jun 20 '20 at 09:12

5

The preload attribute provide a hint to the browser about whether optimistic downloading of the video itself or its metadata is considered worthwhile.

The metadata won'y download all video immediately only the meta data. The specification advises it to be set to metadata.

Here a list with all the options available:

none - Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable.

metadata - Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable.

auto - Hints to the browser that optimistically downloading the entire video is considered desirable.

More information: https://developer.mozilla.org/en/docs/Web/HTML/Element/video

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 08 '17 at 09:40

GibboK

71,848
143
435
658

2

The metadata tag does not work as intended in all browsers. At least in Chrome v63.0.3239.132, `preload='metadata'` downloads the entire video upon page load, just as if it would be `preload='auto'`. – Martin Carel Jan 23 '18 at 16:17
Ugh, this has been driving me insane. Now I understand why my video is downloading twice. – jscul Aug 03 '21 at 06:36
Why Chrome Why? – Simon_Weaver Mar 06 '22 at 00:16

score 3 · Answer 2 · answered Nov 22 '17 at 19:23

3

As per spec, it shouldn't download the whole video, only the metadata, but WebKit browsers apparently do preload the whole video before the metadata.

I hope this helps.

Also see: Problem retrieving HTML5 video duration

answered Nov 22 '17 at 19:23

ejcortes

609
7
13

score 3 · Answer 3 · answered Oct 20 '20 at 09:59

It depends on the browser and device.

Chrome buffers 25 seconds of video on desktop but none on iOS or Android.

This means that on mobile, there may be playback startup delays that don't happen on desktop: https://developers.google.com/web/fundamentals/media/video#preload

score 2 · Answer 4 · answered Dec 12 '18 at 10:54

Maybe I'll put my 2 cents... The solution that is allways works for me is to set "autoplay" "muted" options in VIDEO html tag. Then, when the page has fully loaded i pause, unmute and rewind the video in JavaScript before the video is shown. God... what would we do without JS. HTML lacks some stable cross browser options sometines :) Hope this helps someone.

Does the metadata preload attribute on html 5 loads the entire video?

4 Answers4