HTML onloadedmetadata Attribute

Introduction

The onloadedmetadata attribute is an inline event handler for the loadedmetadata event on media elements — <audio> and <video>. It runs when the browser has loaded metadata about the file: duration, and for video, width and height. That happens before loadeddata in the media timeline. Use it to show duration labels, size the player, or prepare the UI before frame data arrives. Pass the element to your handler (e.g. handleMetadata(this)) — this is not the media element inside a standalone function unless you bind it.

What You’ll Learn

Purpose of onloadedmetadata Attribute

The primary purpose of onloadedmetadata is to react as soon as the browser knows what the media file is — how long it is, how big the video frame is, and what tracks exist — even before enough data is buffered to paint the first frame. That is ideal for displaying “3:42” next to a progress bar or setting the video element’s aspect ratio.

In the loading sequence, loadstart → loadedmetadata → loadeddata → canplay. Metadata arrives early, so you can update labels while the rest of the file still downloads.

📝 Syntax

Set onloadedmetadata on an audio or video element:

<audio controls onloadedmetadata="showDuration(this)">
  <source src="track.mp3" type="audio/mpeg">
</audio>

<video controls onloadedmetadata="handleMetadata(this)">
  <source src="clip.mp4" type="video/mp4">
</video>

Syntax Rules

• Value is JavaScript executed when the loadedmetadata event fires.
• Works on <audio> and <video> only.
• Fires once metadata is parsed — before full frame data is ready.
• Read element.duration, videoWidth, videoHeight (video).
• Pass this from inline handler or use event.target in listeners.
• Modern alternative: media.addEventListener("loadedmetadata", handler).
• Pair with onerror if metadata cannot be loaded.

💎 Values

The onloadedmetadata attribute accepts a string of JavaScript code:

• onloadedmetadata="handleMetadata(this)" — Pass the media element.
• onloadedmetadata="showDuration(event.target)" — If using event in listener style.
• JavaScript: video.onloadedmetadata = () => { … } — inside, video.duration works.

player.addEventListener("loadedmetadata", () => {
  const mins = Math.floor(player.duration / 60);
  const secs = Math.floor(player.duration % 60);
  document.getElementById("duration").textContent =
    mins + ":" + String(secs).padStart(2, "0");
});

Applicable Elements

onloadedmetadata vs onloadeddata vs oncanplay

Examples Gallery

Display duration on metadata load, addEventListener, and format mm:ss labels.

<video controls onloadedmetadata="handleMetadataLoaded(this)">
  <source src="example.mp4" type="video/mp4">
</video>
<p id="metaOut"></p>

<script>
  function handleMetadataLoaded(media) {
    document.getElementById("metaOut").textContent =
      "Duration: " + media.duration.toFixed(1) + " s";
  }
</script>

<audio id="dynamicMedia" controls>
  <source src="track.mp3" type="audio/mpeg">
</audio>

<script>
  document.getElementById("dynamicMedia").addEventListener("loadedmetadata", function () {
    document.getElementById("log").textContent =
      "Metadata loaded! Duration: " + this.duration + " s";
  });
</script>

function formatDuration(seconds) {
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60);
  return m + ":" + String(s).padStart(2, "0");
}

audio.addEventListener("loadedmetadata", () => {
  label.textContent = formatDuration(audio.duration);
});

♿ Accessibility

• Expose duration to users — Screen reader users benefit from visible duration text.
• Use native controls — Or build custom controls with ARIA labels and keyboard support.
• Do not rely on metadata alone — Playback may still buffer; use canplay for play readiness.
• Captions for video — Add <track kind="captions"> for accessible video.
• Loading states — Announce when duration becomes available with visible text.

💡 Best Practices