Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 280
basagabi Avatar asked Sep 07 '16 01:09

basagabi


People also ask

What does the preload attribute do in HTML?

The preload attribute specifies if and how the author thinks that the media file should be loaded when the page loads. The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience.

What is video preload in HTML?

Preload is an attribute of the HTML5 video tag. The preload attribute lets the developer advise the browser how much of the video should be preloaded prior to viewing. There are 3 values for the preload attribute: None: preload=none tells the browser that there is a video, but to download 0 bytes of the file.

How does HTML 5 video work?

How does the HTML5 video element work? The HTML5 video element tells the browser to load a video file from another source by specifying the video file's location, similar to the way a browser loads an image file (the image itself is not stored in the HTML file — the browser pulls it from somewhere else).


2 Answers

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

like image 130
GibboK Avatar answered Oct 18 '22 06:10

GibboK


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

like image 32
ejcortes Avatar answered Oct 18 '22 07:10

ejcortes