HTMLMediaElement: playing — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("playing", handler)

Beschreibung

Das playing-Ereignis eines HTMLMediaElement wird ausgelöst, wenn die Wiedergabe tatsächlich läuft. Das passiert beim ersten Start und jedes Mal, wenn die Wiedergabe nach einer Pause, nach dem Ende (bei erneutem Abspielen), nach einem Sprung (seek) oder nach einer Unterbrechung wegen fehlender Daten (waiting) weitergeht.

Wichtig ist der Unterschied zum play-Ereignis: play wird sofort ausgelöst, wenn play() aufgerufen oder paused auf false gesetzt wird, auch wenn noch keine Daten vorliegen. playing kommt erst, wenn genügend Daten da sind und die Medienzeit wirklich voranschreitet. Deshalb eignet sich playing gut, um Ladeindikatoren auszublenden oder UI-Zustände wie „Läuft“ zuverlässig anzuzeigen.

Das Ereignis kann über addEventListener("playing", handler) oder über die Eigenschaft onplaying abonniert werden. Es wird nicht weitergereicht (bubbelt nicht) und ist nicht abbrechbar. Der Handler bekommt ein einfaches Event-Objekt.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier `"playing"`.
$handler Pflicht	(event: Event) => void		Callback, der beim (Wieder-)Beginn der Wiedergabe aufgerufen wird. `event.target` ist das Medienelement.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `signal` oder `capture`. Da `playing` nicht bubbelt, braucht man zum Delegieren auf Elternelemente `capture: true`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein Event-Objekt (bubbles: false, cancelable: false).

Beispiele

Ladeindikator ausblenden, sobald das Video wirklich läuft

const video = document.querySelector('#player');
const spinner = document.querySelector('#spinner');

// Bei Pufferung Spinner zeigen
video.addEventListener('waiting', () => {
  spinner.hidden = false;
});

// Wiedergabe läuft (wieder) – Spinner ausblenden
video.addEventListener('playing', (event) => {
  spinner.hidden = true;
  console.log(`Wiedergabe läuft ab ${event.target.currentTime.toFixed(1)} s`);
});

Wiedergabe läuft ab 0.0 s

Unterschied zwischen play und playing messen

const audio = new Audio('https://example.com/podcast.mp3');
let startRequested = 0;

audio.addEventListener('play', () => {
  startRequested = performance.now();
  console.log('play: Wiedergabe angefordert');
});

audio.addEventListener('playing', () => {
  const delay = Math.round(performance.now() - startRequested);
  console.log(`playing: Ton läuft nach ${delay} ms`);
}, { once: true });

document.querySelector('#start').addEventListener('click', async () => {
  try {
    await audio.play();
  } catch (err) {
    console.error('Wiedergabe blockiert:', err.name);
  }
});

play: Wiedergabe angefordert playing: Ton läuft nach 312 ms

onplaying-Eigenschaft setzen und Listener wieder entfernen

const video = document.querySelector('video');

// Variante 1: Event-Handler-Eigenschaft
video.onplaying = () => {
  document.body.classList.add('is-playing');
};

// Variante 2: benannter Listener, später entfernbar
const trackPlaying = () => console.log('Statistik: Wiedergabe gestartet');
video.addEventListener('playing', trackPlaying);

video.addEventListener('ended', () => {
  video.removeEventListener('playing', trackPlaying);
  video.onplaying = null;
  document.body.classList.remove('is-playing');
});

Statistik: Wiedergabe gestartet

// Wichtig · Fallstricke

play ≠ playing: play meldet nur den Wunsch zu starten. Wer wissen will, ob wirklich etwas läuft, horcht auf playing.
Mehrfaches Auslösen: playing kommt nach jeder Pufferpause (waiting) und nach jedem Seek während der Wiedergabe erneut. Für einmalige Aktionen wie Analytics-Zählung also { once: true } nutzen oder selbst ein Flag setzen.
Autoplay-Richtlinien: Blockieren Browser das Autoplay (meistens bei Videos mit Ton ohne Nutzerinteraktion), kommt kein playing. Das Promise von play() wird dann mit NotAllowedError abgelehnt, deshalb immer mit catch abfangen.
Kein Bubbling: Einen Listener auf einem Elternelement erreicht das Ereignis nur mit capture: true.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Auf iOS/Safari kann das Ereignis wegen Inline-/Stromspar-Regeln später oder gar nicht kommen, wenn playsinline fehlt.

Siehe auch

HTMLMediaElement.play() HTMLMediaElement.paused HTMLMediaElement HTMLMediaElement: play HTMLMediaElement: seeking