The HTML preload attribute
The HTML preload attribute hints how much of a media file to fetch before playback. It works on <audio> and <video>, takes none, metadata or auto, and browsers treat it as a hint that they may override.
Overview
The preload attribute is a loading hint for media elements. On <video> and <audio> it tells the browser whether to fetch nothing, only the metadata, or as much of the file as it likes before the viewer presses play.
Each value describes a different trade-off. none says the viewer probably will not need the file or the server wants to save traffic. metadata allows the duration, dimensions and track list, and maybe the first few frames. auto, or an empty value, lets the browser put the viewer first, up to downloading the whole resource.
Leaving the attribute out does not mean auto. The HTML Standard makes the missing and invalid defaults implementation-defined and suggests metadata, and MDN's compatibility data notes that Chrome has defaulted to metadata since version 64. An empty preload value, on the other hand, maps to auto.
The hint has limits. autoplay can override it, because media that plays has to buffer, and the standard lets browsers ignore the attribute based on user preferences or the connection. You can also change it from script, for example switching a page of videos from none to auto once the viewer starts one.
Syntax
<video src="lecture.mp4" preload="metadata" controls></video>Values
| Value |
|---|
| none | metadata | auto |
Example
<video id="lazy" src="https://codeshack.io/web/example.mp4" preload="none" controls width="150"></video>
<video id="meta" src="https://codeshack.io/web/example.mp4" preload="metadata" controls width="150"></video>
<p id="out">Waiting for metadata...</p>
<script>
const lazy = document.getElementById('lazy');
const meta = document.getElementById('meta');
const report = () => {
document.getElementById('out').textContent =
'none: duration ' + lazy.duration + ' | metadata: duration ' + meta.duration.toFixed(1) + ' s';
};
meta.addEventListener('loadedmetadata', report);
if (meta.readyState > 0) report();
</script>Best practices
- Use
preload="none"on pages with many videos, which the HTML Standard gives as a way to say they should not download unless requested. - Choose
metadatawhen you want the duration and dimensions available before playback without fetching the whole file. - Pair
preload="none"with a poster image, because the browser has no frame to show until playback begins. - Set the attribute explicitly instead of trusting the default, since the default differs between browsers.
- Do not count on
preloadfor guaranteed savings. autoplay can override it, and browsers may ignore it based on user settings.
