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>
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.
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 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).
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With