preload

Media loading strategy for audio and video elements. Balance bandwidth savings against playback responsiveness with none, metadata, or auto.

Overview

The preload attribute hints to the browser how much of a media file to download before the user presses play. It controls the tradeoff between bandwidth usage and playback responsiveness.

Applies to: <audio>, <video>

Values

Value	What Loads	Tradeoff
`none`	Nothing until play is triggered	Maximum bandwidth savings; playback starts with a delay
`metadata`	Duration, dimensions, first frame (small download)	Good balance; UI shows duration and timeline immediately
`auto`	Browser decides, often buffers the entire file	Fastest playback start; highest bandwidth cost
`""` (empty string)	Same as `auto`	Equivalent to `auto` per the spec

The default when the attribute is absent varies by browser, but most treat it as metadata.

<video src="interview.mp4" preload="none" controls poster="interview-poster.jpg" width="640" height="360"> </video>  <audio src="podcast-ep12.mp3" preload="metadata" controls></audio>  <video src="tutorial.mp4" preload="auto" controls width="640" height="360"> </video>

Choosing a Strategy

preload="none" + poster

Best for pages with multiple videos or hero sections. The browser downloads zero video data, showing only the poster image. Pair with poster to avoid a blank rectangle.

<video src="hero-background.mp4" poster="hero-poster.jpg" preload="none" controls width="1280" height="720" style="max-width: 100%; height: auto;"> </video>

preload="metadata"

Best for audio players and single-video pages. The browser fetches just enough data to display the duration, timeline scrubber, and first video frame. This is typically a few hundred kilobytes.

<audio src="episode-42.mp3" preload="metadata" controls></audio>  <audio src="notification.mp3" preload="auto"></audio>

preload="auto"

Best when instant playback is critical (e.g., a short sound effect, a video that users are very likely to play). The browser may buffer the entire file, so use sparingly on pages with multiple media elements.

Interaction with autoplay

The autoplay attribute overrides preload. The browser must download the media to begin playback, regardless of the preload value. Setting preload="none" alongside autoplay has no practical effect.

<video src="background-loop.mp4" autoplay muted loop playsinline preload="auto" width="1280" height="720"> </video>

Multiple Media on One Page

On pages with several videos, set preload="none" on all but the primary video. This prevents the browser from downloading gigabytes of data the user may never watch.

<section> <h2>Featured</h2> <video src="featured.mp4" preload="metadata" controls poster="featured-poster.jpg" width="640" height="360"> </video> </section> <section> <h2>More Videos</h2> <video src="extra-1.mp4" preload="none" controls poster="extra-1-poster.jpg" width="640" height="360"> </video> <video src="extra-2.mp4" preload="none" controls poster="extra-2-poster.jpg" width="640" height="360"> </video> </section>

Accessibility

preload="none" with no poster renders a blank box, which gives sighted users no indication a video exists. Always pair with a poster or surrounding descriptive text.
When preload="metadata" loads the duration, screen readers can announce the media length, improving the user's ability to decide whether to play.
Preload does not affect whether controls are shown. Ensure controls are present (or a custom UI is provided) regardless of preload strategy.

Limitations

It is a hint, not a command. Browsers may ignore preload based on network conditions, data saver mode, or internal heuristics. Chrome on Android with Data Saver forces preload="none".
There is no event to confirm which preload strategy the browser actually used.
preload does not apply to <source> elements. It goes on the parent <video> or <audio> element.
Changing preload via JavaScript after the media element is in the DOM may have no effect if the browser has already started loading.
On iOS Safari, video preloading behavior is heavily restricted. The browser often treats all values as none until a user gesture triggers playback.