preload

preload attribute

The preload attribute in HTML is applied to <audio> and <video> elements to control whether and how the browser loads the media content before playback starts, improving the user experience.

Syntax

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

Example

• Here’s an example of how to use the preload attribute 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 class="!h-80 !w-80" controls preload="auto">
  <source src="video.mp4"  type="video/mp4">
  Your browser does not support the video tag.
  Your browser does not support the video tag.
</video>

Values

• auto: The browser may choose to preload the entire media file based on its own algorithms, which can ensure faster playback but might also lead to higher data consumption.
• metadata: Only metadata, such as duration and dimensions, is preloaded, enabling faster setup without loading the entire media file, thus saving data.
• none: The browser does not preload the media, which helps reduce bandwidth usage, making it ideal for conserving data on mobile networks or for delaying playback.

Applies To

The preload attribute can be applied to the following HTML elements:

• <audio>
• <video>

Example

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

Conclusion

The preload attribute in HTML lets developers control how media files are loaded. It offers three options: auto, metadata, and none, allowing for better performance and data management. By regulating media readiness before playback, this attribute enhances the user experience. Its versatile use with both <audio> and <video> elements helps improve media handling on various devices.