HTMLMediaElement.pause() — Methode · JavaScript-Referenz

Signatur

HTMLMediaElement.prototype.pause()

Beschreibung

pause() hält die Wiedergabe eines Medienelements (<audio> oder <video>) an. Anders als ein „Stopp“ setzt die Methode die Wiedergabeposition nicht zurück. Ein späterer Aufruf von play() spielt an derselben Stelle weiter.

Läuft das Medium gerade, setzt der Aufruf die Eigenschaft paused auf true, löst die Ereignisse timeupdate und pause aus und weist alle noch offenen play()-Promises mit einem AbortError zurück. Ist das Medium schon pausiert, bewirkt der Aufruf nichts Sichtbares.

Typische Anwendungen sind eigene Steuerelemente für Player, das automatische Anhalten, wenn ein Video aus dem sichtbaren Bereich scrollt oder der Tab in den Hintergrund wechselt, und das Sicherstellen, dass auf einer Seite immer nur ein Medium gleichzeitig läuft.

Für ein echtes „Stopp“ setzt man nach pause() zusätzlich currentTime = 0.

Beispiele

Play/Pause-Umschalter für ein Video

const video = document.querySelector('#player');
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();
  }
});

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

Echtes Stoppen: pausieren und an den Anfang springen

const stopMedia = (media) => {
  media.pause();
  media.currentTime = 0;
};

const audio = new Audio('/sounds/hinweis.mp3');
await audio.play();
setTimeout(() => {
  stopMedia(audio);
  console.log(audio.paused, audio.currentTime);
}, 2000);

true 0

Video anhalten, wenn es aus dem Sichtbereich scrollt

const videos = document.querySelectorAll('video[data-autopause]');

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting && !entry.target.paused) {
      entry.target.pause();
    }
  }
}, { threshold: 0.25 });

videos.forEach((v) => observer.observe(v));

// Außerdem pausieren, wenn der Tab in den Hintergrund wechselt
document.addEventListener('visibilitychange', () => {
  if (document.hidden) videos.forEach((v) => v.pause());
});

Nur ein Medium gleichzeitig abspielen

document.addEventListener('play', (event) => {
  document.querySelectorAll('audio, video').forEach((media) => {
    if (media !== event.target) media.pause();
  });
}, true); // Capture-Phase, weil 'play' nicht nach oben weitergereicht wird

// Wichtig · Fallstricke

AbortError durch play(): Wird pause() aufgerufen, solange das Promise von play() noch offen ist, wird dieses mit DOMException: The play() request was interrupted by a call to pause() zurückgewiesen. Deshalb play() immer mit await und try/catch bzw. .catch() behandeln.
Kein Zurücksetzen: pause() ändert currentTime nicht. Für ein Stoppen muss man currentTime = 0 zusätzlich setzen.
Kein Promise: Das Ergebnis von pause() kann man nicht mit await abwarten. Wer auf den Zustand reagieren will, hört auf das pause-Ereignis.
Kein Bubbling: Medienereignisse wie pause und play werden nicht nach oben weitergereicht. Wer sie zentral am Dokument abfangen will, muss sie in der Capture-Phase registrieren (addEventListener(..., true)).
Kompatibilität: Wird von allen modernen Browsern unterstützt. Auf Mobilgeräten kann das Betriebssystem Medien selbst anhalten, zum Beispiel bei einem Anruf. Auch dann wird das pause-Ereignis ausgelöst.

Siehe auch

HTMLMediaElement.play() HTMLMediaElement.paused HTMLMediaElement.currentTime HTMLMediaElement.load() HTMLMediaElement HTMLMediaElement.captureStream()