HTML onemptied Attribute

Introduction

The onemptied attribute is an inline event handler that runs JavaScript when the emptied event fires. That happens on <audio> and <video> when the element clears its current media resource and returns to an empty state. Common triggers include calling element.load() on already-loaded media, changing src, or swapping <source> children. Use it to reset custom players, clear progress UI, or log when a clip is about to reload. It does not fire when the user simply seeks to the beginning—only when the resource itself is released.

What You’ll Learn

Purpose of onemptied Attribute

The primary purpose of onemptied is to react when media is reset or replaced. You might hide a custom progress bar, clear cached duration labels, show a “Reloading…” message, or tear down analytics tied to the previous clip. The event sits in the media lifecycle alongside loadstart, loadedmetadata, and abort.

After emptied, the browser often fires loadstart as it fetches media again. Update UI in emptied for the cleared state; use loadedmetadata or canplay when the new resource is ready.

📝 Syntax

Set onemptied on audio or video, or assign element.onemptied:

<script>
  function handleEmptied() {
    console.log("Media resource cleared.");
  }
</script>

<video controls onemptied="handleEmptied()">
  <source src="clip.mp4" type="video/mp4">
</video>

Syntax Rules

• Value is JavaScript code executed when the emptied event fires.
• Applies to <audio> and <video> media elements.
• Fires when the element releases its media resource (not on simple seek-to-start).
• JavaScript: media.onemptied = function() { … }.
• Modern alternative: media.addEventListener("emptied", handler).
• Often followed by loadstart when media reloads.

💎 Values

The onemptied attribute accepts a string of JavaScript code:

• onemptied="handleEmpty()" — Call a named function.
• onemptied="resetPlayerUI()" — Inline statement.
• JavaScript: video.onemptied = () => { … } assigns the handler.

const audio = document.getElementById("song");

audio.addEventListener("emptied", () => {
  document.getElementById("duration-label").textContent = "—";
});

document.getElementById("reload-btn").addEventListener("click", () => {
  audio.load(); // triggers emptied, then loadstart
});

Applicable Elements

onemptied vs onloadstart vs onabort

Examples Gallery

Inline onemptied on audio, addEventListener on video, and reload with load().

<video controls onemptied="handleEmptyEvent()">
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  function handleEmptyEvent() {
    console.log("Media element has been emptied!");
  }
</script>

<script>
  document.getElementById("dynamicVideo").addEventListener("emptied", function () {
    console.log("Dynamic emptied event triggered!");
  });

  // Or property form:
  document.getElementById("dynamicVideo").onemptied = function () { /* … */ };
</script>

const audio = document.getElementById("song");

audio.addEventListener("emptied", () => {
  status.textContent = "Resource cleared — waiting for reload…";
});

audio.addEventListener("canplay", () => {
  status.textContent = "Ready to play again.";
});

document.getElementById("reload").addEventListener("click", () => {
  audio.load();
});

♿ Accessibility

• Announce reload state — If you hide native controls, use a live region when media is cleared and reloading.
• Do not autoplay on reload — Respect user intent; let them press play after emptied.
• Avoid alert() on emptied — Update visible status text instead of blocking dialogs.
• Keyboard controls — Native controls support keyboard users; custom players need full keyboard support.
• Captions persist — Clearing media may remove tracks; reattach captions when the new source loads.

💡 Best Practices