HTMLMediaElement: pause — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("pause", handler)

Beschreibung

Das Ereignis pause wird an einem HTMLMediaElement (also <audio> oder <video>) ausgelöst, sobald eine Pause-Anforderung bearbeitet wurde und das Medium in den pausierten Zustand gewechselt ist. Danach ist media.paused auf true gesetzt. Meist ist der Auslöser ein Aufruf von HTMLMediaElement.prototype.pause(). Es kann aber auch der Nutzer über die eingebauten Bedienelemente pausieren, das Betriebssystem (z. B. über Medientasten oder die Media Session) oder der Browser, etwa wenn ein anderer Tab den Audiofokus übernimmt.

Typische Einsatzzwecke sind eigene Play/Pause-Schaltflächen, die mit dem Zustand synchron bleiben sollen, das Speichern der Wiedergabeposition (currentTime), das Pausieren von Animationen oder Analyse-Tracking und das Anpassen der Oberfläche, z. B. ein Overlay einblenden.

Das Ereignis ist ein einfaches Event ohne zusätzliche Daten. Es steigt nicht auf (bubbles: false) und lässt sich nicht abbrechen. Du registrierst es entweder mit addEventListener("pause", handler) oder über die Eigenschaft onpause. Für Event-Delegation an einem Elternelement musst du die Capture-Phase nutzen ({ capture: true }).

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"pause"`.
$handler Pflicht	(event: Event) => void \| EventListenerObject		Callback, der beim Pausieren aufgerufen wird. `event.target` ist das Medienelement.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `capture`, `passive` oder `signal` (ein `AbortSignal`, mit dem sich der Listener wieder entfernen lässt).

Rückgabewert

Typ

void

Beschreibung

addEventListener hat keinen Rückgabewert. Der Handler erhält ein Event-Objekt.

Beispiele

Eigene Play/Pause-Schaltfläche synchron halten

const video = document.querySelector('video');
const button = document.querySelector('#toggle');

button.addEventListener('click', () => {
  video.paused ? video.play() : video.pause();
});

video.addEventListener('play', () => {
  button.textContent = '⏸ Pause';
});

video.addEventListener('pause', () => {
  button.textContent = '▶ Abspielen';
  console.log('Pausiert bei', video.currentTime.toFixed(1), 's');
});

Pausiert bei 12.4 s

Wiedergabeposition beim Pausieren speichern

const audio = document.querySelector('audio');
const key = `pos:${audio.currentSrc || audio.src}`;

// Position beim Laden wiederherstellen
audio.addEventListener('loadedmetadata', () => {
  const saved = Number(localStorage.getItem(key));
  if (saved) audio.currentTime = saved;
}, { once: true });

// Beim Pausieren sichern
audio.onpause = () => {
  localStorage.setItem(key, String(audio.currentTime));
};

Listener per AbortController wieder entfernen

const video = document.querySelector('video');
const controller = new AbortController();

const onPause = (event) => {
  console.log('Pause-Ereignis von', event.target.tagName);
};

video.addEventListener('pause', onPause, { signal: controller.signal });

// Später, z. B. beim Abbau einer Komponente:
controller.abort();
// Alternativ: video.removeEventListener('pause', onPause);

Pause-Ereignis von VIDEO

Alle Medien einer Seite per Capture überwachen

// pause steigt nicht auf, deshalb Capture-Phase nutzen
document.addEventListener('pause', (event) => {
  if (event.target instanceof HTMLMediaElement) {
    console.log('Pausiert:', event.target.id || event.target.currentSrc);
  }
}, true);

Pausiert: intro-video

// Wichtig · Fallstricke

Kein Bubbling: pause steigt nicht auf. Ein Listener am document greift nur mit capture: true.
Nicht bei jedem Ende: Läuft ein Medium ohne loop bis zum Schluss, wird paused zwar auf true gesetzt, laut Spezifikation feuern dabei aber pause und ended. Für „fertig abgespielt“ solltest du ended verwenden.
Abgelehntes play(): Blockiert die Autoplay-Richtlinie das Abspielen, wird das Promise von play() abgelehnt (NotAllowedError). Ob dann ein pause-Ereignis kommt, verlässt sich nicht einheitlich auf alle Browser. Werte deshalb das Promise aus.
Ein Aufruf von pause() auf einem Medium, das bereits pausiert ist, löst kein neues Ereignis aus.
pause wird auch vom Browser oder System ausgelöst, z. B. durch Medientasten, die Media Session API, das Entfernen eines Kopfhörers auf Mobilgeräten oder wenn ein Element aus dem DOM entfernt wird. Die Ursache ist im Ereignis nicht erkennbar.
Nicht verwechseln mit waiting oder stalled: Diese melden Pufferprobleme, keine gewollte Pause.
Kompatibilität: wird seit langem von allen modernen Browsern unterstützt.

Siehe auch

HTMLMediaElement.prototype.pause() HTMLMediaElement.prototype.play() HTMLMediaElement.paused HTMLMediaElement HTMLMediaElement: play