HTML preload Attribute

Introduction

The preload attribute on <audio> and <video> tells the browser how much media to fetch before play. Values are none, metadata, and auto. Use preload="none" to save bandwidth on pages with many embeds; use metadata for duration without full download; use auto when instant playback matters. This is not the same as <link rel="preload"> in the document head — that is a separate resource-hint feature. Pair preload with poster on video for a lightweight idle state.

What You’ll Learn

Purpose of preload Attribute

Media files can be large. Without a preload hint, browsers make their own choices about buffering — which may waste mobile data on pages where users never press play. The preload attribute lets you declare your intent: fetch nothing, fetch only metadata, or allow full pre-buffering.

This improves performance tuning on blogs with embedded podcasts, course pages with optional clips, and landing pages with hero videos. Browsers treat the value as a hint — they may adjust based on connection speed, data-saver mode, or user settings.

📝 Syntax

Add preload with one of three keyword values on audio or video:

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

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

Syntax Rules

• Valid values: none, metadata, auto.
• Omitting the attribute or using an empty value defaults to auto per HTML spec.
• Valid only on <audio> and <video>.
• Hint only — browsers may override based on network or data-saver settings.
• JavaScript: media.preload = "metadata" on HTMLMediaElement.
• Combine with poster on video when using preload="none".
• Autoplay may cause buffering regardless of preload="none".

💎 Values

The preload attribute accepts one of three enumerated values:

• preload="none" — Browser should not preload media data. Best for saving bandwidth.
• preload="metadata" — Fetch duration, dimensions, and track info only.
• preload="auto" — Browser may buffer the entire file (default behavior).

<!-- Lightest — no media bytes until play -->
<video preload="none" poster="/images/apple.png" controls>…</video>

<!-- Middle — duration without full download -->
<audio preload="metadata" controls>…</audio>

<!-- Heaviest — ready for instant play -->
<video preload="auto" controls>…</video>

Applicable Elements

preload vs poster vs rel="preload"

Examples Gallery

Compare preload values on audio, set media.preload in JavaScript, and pair preload="none" with poster on video.

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

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

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

<video id="myVideo" controls width="320">
  <source src="/video/count.mp4" type="video/mp4">
</video>

<script>
  document.getElementById("myVideo").preload = "metadata";
</script>

<video
  controls
  width="320"
  preload="none"
  poster="/images/apple.png">
  <source src="/video/count.mp4" type="video/mp4">
</video>

♿ Accessibility

• Preload does not affect captions — Use <track kind="captions"> for accessible spoken content regardless of preload value.
• User data preferences — preload="none" respects users on limited data plans who may never play media.
• Don’t autoplay unmuted — Autoplay forces loading and can surprise users; pair with muted if required.
• Provide context — Describe what the audio or video contains in nearby text, not only in the media file.
• Keyboard access — Use controls or custom accessible controls so users can start playback.

💡 Best Practices