HTML preload Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The HTML preload attribute is used in conjunction with <audio> and <video> tags to specify if and how the browser should preload the content before playback starts. It aims to improve the user experience by controlling the loading behavior of multimedia content on a webpage.

It's worth noting that the actual behavior can vary across different browsers and their versions. The preload attribute is a hint rather than a strict directive, and browsers may adjust their preloading strategy based on various factors to optimize performance and user experience.

Example usage with an <audio> tag:

<audio controls preload="metadata">
  <source src="audiofile.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

And with a <video> tag:

<video controls preload="auto">
  <source src="videofile.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Choosing the right value for the preload attribute depends on the specific needs of your webpage and your audience. Consider factors like the expected user behavior, the size of the media files, and the importance of minimizing data usage versus ensuring quick media playback.

Syntax

<tagname preload="auto | metadata | none">

Values

autoThe browser may preload the entire audio or video file, depending on its own heuristics, which can vary by browser, the current network conditions, and user settings. This option ensures the media is ready for immediate playback, improving user experience at the cost of potentially higher data usage.
metadataThe browser will preload only the metadata of the audio or video file. Metadata includes information such as duration, dimensions (for video), and text tracks. This option strikes a balance between completely loading the media and not preloading anything at all, allowing for faster setup (e.g., displaying duration) without significant data usage.
noneThe browser should not preload the audio or video content. This option is useful when you want to minimize bandwidth usage, especially on mobile networks or in scenarios where you do not expect the user to play the media immediately.

Applies To

The preload attribute can be used on the following html elements.

Example

HTML

<video autoplay muted loop preload="auto">

  <source src="images/earth.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

Result

Editor