Start · Sprachen · JavaScript · Referenz · HTMLMediaElement.paused

HTMLMediaElement.paused

Eigenschaft

Die schreibgeschützte Eigenschaft <code>paused</code> gibt als <code>boolean</code> an, ob ein <code>&lt;audio&gt;</code>- oder <code>&lt;video&gt;</code>-Element gerade pausiert ist.

seit JavaScript Baseline: alle Browser Kategorie: webapi

Signatur

HTMLMediaElement.paused

Beschreibung

Die Eigenschaft HTMLMediaElement.paused liefert true, wenn das Medien-Element pausiert ist, und false, sobald die Wiedergabe angefordert wurde. Sie steht an allen <audio>- und <video>-Elementen zur Verfügung und ist schreibgeschützt. Um den Zustand zu ändern, rufst du play() oder pause() auf.

Ein Medien-Element startet im Zustand paused === true, außer autoplay ist gesetzt und der Browser lässt die automatische Wiedergabe zu. Der Wert wird false, sobald play() aufgerufen wurde, auch wenn noch gepuffert wird und noch kein Bild oder Ton ausgegeben wird. Umgekehrt setzt der Browser paused auf true, wenn pause() aufgerufen wird. Am Ende des Mediums (ohne loop) wird paused ebenfalls true.

Typische Einsatzfälle sind eigene Wiedergabe-Steuerelemente (z. B. ein Umschalter zwischen Abspielen und Pause), das Anpassen der Oberfläche an den aktuellen Zustand und das Pausieren aller anderen Medien auf einer Seite, wenn eines startet. Wenn du auf Zustandswechsel reagieren willst, höre auf die Ereignisse play, playing und pause, statt paused regelmäßig abzufragen.

Rückgabewert

Typ
boolean
Beschreibung
true, wenn das Medium pausiert ist (oder die Wiedergabe noch nicht gestartet wurde), sonst false.

Beispiele

Wiedergabe mit einem Button umschalten

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

button.addEventListener('click', async () => {
  if (video.paused) {
    try {
      await video.play();
    } catch (err) {
      console.warn('Wiedergabe blockiert:', err.name);
    }
  } else {
    video.pause();
  }
});

// Beschriftung aktuell halten
const updateLabel = () => {
  button.textContent = video.paused ? '▶ Abspielen' : '⏸ Pause';
};
video.addEventListener('play', updateLabel);
video.addEventListener('pause', updateLabel);
updateLabel();

Ausgangszustand prüfen

const audio = new Audio('podcast.mp3');
console.log(audio.paused);

audio.play().then(() => {
  console.log(audio.paused);
  audio.pause();
  console.log(audio.paused);
}).catch(err => console.warn(err.name));
true false true

Nur ein Medium gleichzeitig abspielen

const medien = [...document.querySelectorAll('audio, video')];

medien.forEach((element) => {
  element.addEventListener('play', () => {
    medien
      .filter((anderes) => anderes !== element && !anderes.paused)
      .forEach((anderes) => anderes.pause());
  });
});

Beim Verlassen des Tabs pausieren und später fortsetzen

const video = document.querySelector('video');
let warAktiv = false;

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    warAktiv = !video.paused;
    if (warAktiv) video.pause();
  } else if (warAktiv) {
    video.play().catch(() => {});
  }
});

// Wichtig · Fallstricke

  • Schreibgeschützt: video.paused = true bewirkt nichts (im Strict Mode gibt es keinen Fehler, weil nur ein Getter existiert und die Zuweisung still ignoriert wird). Nutze stattdessen pause() oder play().
  • paused === false heißt nicht „es läuft sichtbar“: Während des Pufferns (waiting) oder wenn play() noch auf Daten wartet, ist paused bereits false. Ob wirklich abgespielt wird, erkennst du am Ereignis playing oder an readyState.
  • Autoplay-Richtlinien: Lehnt der Browser play() ab (ohne Nutzerinteraktion, nicht stummgeschaltet), wird das Promise mit NotAllowedError abgelehnt und paused wieder auf true gesetzt. Behandle die Ablehnung deshalb immer.
  • Nach dem Ende des Mediums ohne loop ist paused true und ended ebenfalls true.
  • Wird in allen modernen Browsern seit Langem unterstützt (auch in älteren wie IE9+).