HTML preload Attribute

The HTML preload attribute provides a hint to the browser about how much audio or video data should be loaded before playback begins. It can help balance faster media playback with bandwidth and server usage.

Elements That Use the preload Attribute

The preload attribute is used with the <audio> and <video> elements.

Element	Description
`<audio>`	Provides a hint about how much of an audio resource should be loaded before playback begins.
`<video>`	Provides a hint about how much of a video resource should be loaded before playback begins.

preload Values

The preload attribute is an enumerated attribute with three named values: none, metadata, and auto. An empty value is also allowed and is equivalent to auto.

Value	Description
`none`	Hints that the media resource is not expected to be needed before the user starts playback and unnecessary network traffic should be minimized.
`metadata`	Hints that loading media metadata, such as duration, dimensions, and track information, is appropriate.
`auto`	Hints that the browser may download as much of the media resource as it considers appropriate, potentially including the entire resource.

How preload Works

The preload attribute is a hint rather than a requirement. Browsers can choose how much media data to download based on factors such as user preferences, available network connectivity, and other browser policies.

If preload is omitted or contains an invalid value, the browser determines the loading behavior. The HTML standard suggests metadata as a reasonable compromise between reducing unnecessary server traffic and providing a useful playback experience.

This means you should not rely on preload to guarantee that a specific amount of media data will or will not be downloaded.

preload="none"

The none value indicates that the author does not expect the user to need the media resource before playback begins or wants to minimize unnecessary network traffic.

<video controls preload="none">
  <source src="video.mp4" type="video/mp4">
</video>

This can be useful on pages containing several media elements where downloading media before the user chooses to play it could consume unnecessary bandwidth.

preload="metadata"

The metadata value indicates that the browser may load information about the media resource without intentionally downloading the entire file. Metadata can include information such as duration, dimensions, and available tracks.

<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4">
</video>

The browser may download some additional media data along with the metadata, so this value should not be treated as a strict download limit.

preload="auto"

The auto value indicates that the browser may download as much of the media resource as it considers useful, including potentially the entire file.

<audio controls preload="auto">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

An empty preload attribute is equivalent to preload="auto".

<audio controls preload>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

preload and autoplay

The autoplay attribute can override the loading hint provided by preload. If the browser allows the media to begin playing automatically, it must load enough media data for playback regardless of the preload value.

<video autoplay muted preload="none">
  <source src="video.mp4" type="video/mp4">
</video>

Using both attributes is valid, but preload="none" cannot prevent loading when the media needs to begin playback.

Common Mistakes

Do not treat preload as a command that browsers must follow. It provides a loading hint, and browsers can adjust or ignore the requested behavior.

Do not assume that omitting preload is equivalent to preload="auto". When the attribute is omitted, the browser determines the default loading behavior.

Do not assume that preload="metadata" guarantees that only metadata will be downloaded. The browser may obtain some additional media data while loading the metadata.

Do not rely on preload="none" to prevent loading when autoplay causes the media to begin playback.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The preload attribute is widely supported on both <audio> and <video> elements. The amount of media actually downloaded can still vary because preload is a browser hint rather than a requirement.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the preload Attribute

The example uses preload="metadata" to indicate that the browser may load information about the video before playback without intentionally preloading the entire media resource.

Play in Editor

Summary

The HTML preload attribute provides a loading hint for <audio> and <video> elements. The none, metadata, and auto values indicate different preferred levels of preloading, but browsers can adjust or ignore the hint based on user preferences, network conditions, and other factors.