HTML onloadeddata Attribute

Introduction

The onloadeddata attribute is an inline event handler for the loadeddata event on media elements — <audio> and <video>. It runs when the first frame of media data at the current playback position is loaded and ready to render. Use it to hide loading spinners, enable play buttons, or show “ready to play” messages. This is not the same as onload on the page or an image — those are different events. Prefer addEventListener("loadeddata", …) in production; inline onloadeddata is fine for learning.

What You’ll Learn

Purpose of onloadeddata Attribute

The primary purpose of onloadeddata is to react when an <audio> or <video> element has enough media data loaded to display or play the current frame. That is the moment you can safely hide a “Loading…” overlay, show duration from metadata (often already available), or enable custom controls.

Media elements fire a sequence of events: loadstart → loadedmetadata → loadeddata → canplay → playing. The loadeddata event sits after metadata is known and before playback is guaranteed to be smooth (canplaythrough).

📝 Syntax

Set onloadeddata on an audio or video element:

<audio controls onloadeddata="handleLoadedData()">
  <source src="track.mp3" type="audio/mpeg">
</audio>

<video controls src="clip.mp4" onloadeddata="videoReady()"></video>

Syntax Rules

• Value is JavaScript executed when the loadeddata event fires.
• Works on <audio> and <video> only.
• Fires when media data for the current frame is available — not when the entire file is buffered.
• May fire again if the user seeks to an unloaded portion of the media.
• Pair with onerror if loading fails.
• Modern alternative: media.addEventListener("loadeddata", handler).
• Use correct MIME type on <source type> (e.g. audio/mpeg, not audio/mp3).

💎 Values

The onloadeddata attribute accepts a string of JavaScript code:

• onloadeddata="handleLoadedData()" — Call a named function.
• onloadeddata="this.classList.add('ready')" — Inline statement on the element.
• JavaScript: video.onloadeddata = () => { … } assigns the handler.

const player = document.getElementById("myVideo");

player.addEventListener("loadeddata", () => {
  document.getElementById("loader").hidden = true;
  document.getElementById("status").textContent = "Media data loaded — ready.";
});

Applicable Elements

onloadeddata vs onloadedmetadata vs oncanplay

Examples Gallery

Audio loadeddata handler, addEventListener on video, and hide a loading message.

<audio controls onloadeddata="handleLoadedData()">
  <source src="track.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<p id="status"></p>

<script>
  function handleLoadedData() {
    document.getElementById("status").textContent =
      "Audio data has been loaded!";
  }
</script>

<video id="dynamicMedia" controls src="clip.mp4"></video>

<script>
  document.getElementById("dynamicMedia").addEventListener("loadeddata", function () {
    console.log("Media data has been loaded!");
  });
</script>

const audio = document.getElementById("player");
const loader = document.getElementById("loader");

audio.addEventListener("loadeddata", () => {
  loader.hidden = true;
  audio.hidden = false;
});

♿ Accessibility

• Provide native controls — Use controls or accessible custom controls with labels.
• Announce ready state — Use aria-busy="false" when loading finishes.
• Do not autoplay with sound — Respect user preferences; use muted if autoplay is required.
• Captions for video — loadeddata does not replace <track kind="captions">.
• Loading feedback — Visible or screen-reader text while media loads helps all users.

💡 Best Practices