HTML onplaying Attribute

Introduction

The onplaying attribute is an inline event handler for the playing event on audio or video elements. It runs when media is actively outputting sound or frames — after buffering finishes or after resuming from pause. This is different from onplay, which fires when playback is requested. Use onplaying to hide loading spinners, start synced animations, or confirm real playback. Pair with onwaiting for buffering UX. Prefer addEventListener("playing", …) in production.

What You’ll Learn

Purpose of onplaying Attribute

The primary purpose of onplaying is to react when media is truly playing — not just when the user clicked play. After a slow network, the browser may fire play first, then waiting while buffering, then playing when data is ready. Your handler on playing is the right moment to hide spinners and start time-synced effects.

The playing event also fires when playback resumes after being paused and data is available again. It does not fire when media reaches the end — use onended for that.

📝 Syntax

Set onplaying on audio or video, or assign media.onplaying in JavaScript:

<audio controls onplaying="handlePlaying()" onwaiting="showSpinner()">
  <source src="/audio/count.mp3" type="audio/mpeg">
</audio>

<script>
  media.onplaying = handlePlaying;
</script>

Syntax Rules

• Value is JavaScript executed when the playing event fires.
• Valid on <audio> and <video> elements.
• Also assignable as element.onplaying in script.
• Pair with onwaiting to show/hide buffering UI.
• Not the same as onplay — fires later when output starts.
• Modern alternative: media.addEventListener("playing", handler).
• Not for non-media elements.

💎 Values

The onplaying attribute accepts a string of JavaScript code:

• onplaying="handlePlaying()" — Call a named function.
• onplaying="spinner.hidden = true" — Hide loader inline.
• JavaScript: video.onplaying = () => { … } — property assignment.

function handlePlaying() {
  spinner.hidden = true;
  status.textContent = "Now playing";
}

function showSpinner() {
  spinner.hidden = false;
  status.textContent = "Buffering…";
}

media.addEventListener("playing", handlePlaying);
media.addEventListener("waiting", showSpinner);

Applicable Elements

onplaying vs onplay vs onwaiting

Examples Gallery

Inline audio handler, dynamic assignment, and play vs playing status comparison.

<audio controls onplaying="handlePlayingEvent()">
  <source src="/audio/count.mp3" type="audio/mpeg">
</audio>
  <p id="status">Ready</p>

<script>
  function handlePlayingEvent() {
    document.getElementById("status").textContent =
      "Now playing";
  }
</script>

<audio controls id="myAudio">
  <source src="/audio/count.mp3" type="audio/mpeg">
</audio>

<script>
  document.getElementById("myAudio").onplaying = function () {
    document.getElementById("log").textContent =
      "Media is now playing!";
  };
</script>

media.addEventListener("waiting", function () {
  spinner.hidden = false;
  status.textContent = "Buffering…";
});

media.addEventListener("playing", function () {
  spinner.hidden = true;
  status.textContent = "Playing";
});

♿ Accessibility

• Announce buffering — Use aria-live="polite" when status changes between waiting and playing.
• Do not rely on spinners alone — Include text like “Loading” or “Playing”.
• Keep native controls — Or provide accessible custom play/pause buttons.
• Captions for video — Sync caption tracks when playing fires if needed.
• Respect autoplay policy — User gesture may be required before play/playing occur.

💡 Best Practices