HTMLMediaElement: abort — Ereignis · JavaScript-Referenz

Signatur

mediaElement.addEventListener("abort", handler)

Beschreibung

Das abort-Ereignis tritt an einem <audio>- oder <video>-Element (HTMLMediaElement) auf, wenn der Browser das Abrufen der Medienressource beendet, bevor sie vollständig geladen ist. Ein Netzwerk- oder Dekodierfehler steckt nicht dahinter, dafür gibt es das error-Ereignis. Typischerweise liegt es an einer bewussten Aktion: Das Skript setzt ein neues src, ruft load() erneut auf oder entfernt die Quelle.

Registrieren lässt sich das Ereignis mit element.addEventListener("abort", handler) oder über die Eigenschaft element.onabort = handler. Der Handler bekommt ein einfaches Event-Objekt. Das Ereignis ist nicht abbrechbar (cancelable: false) und steigt nicht im DOM auf (bubbles: false).

Praktisch nützlich ist abort für Ladeanzeigen, Statistiken und Aufräumarbeiten. Ein Beispiel: Wechselt der Nutzer in einer Playlist schnell zwischen Titeln, bricht der Browser den laufenden Ladevorgang jeweils ab. Mit dem Ereignis kann man dann einen Lade-Spinner zurücksetzen oder vermerken, dass ein Titel nicht fertig geladen wurde.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses, hier immer `"abort"`.
$handler Pflicht	(event: Event) => void		Funktion, die beim Abbruch aufgerufen wird. Sie erhält ein `Event`-Objekt, dessen `target` das Medienelement ist.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein Event-Objekt.

Beispiele

Abbruch beim Quellenwechsel protokollieren

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

video.addEventListener('abort', (event) => {
  console.log(`Laden abgebrochen: ${event.target.currentSrc}`);
});

video.src = 'https://example.com/film-grosz.mp4';
// Kurz darauf eine andere Quelle setzen → das erste Laden wird abgebrochen
setTimeout(() => {
  video.src = 'https://example.com/trailer.mp4';
}, 100);

Laden abgebrochen: https://example.com/film-grosz.mp4

on-Property: Lade-Spinner in einer Playlist zurücksetzen

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

audio.onloadstart = () => spinner.hidden = false;
audio.oncanplay = () => spinner.hidden = true;
audio.onabort = () => {
  spinner.hidden = true;
  console.log('Titelwechsel – vorheriger Ladevorgang abgebrochen');
};

const playTrack = (url) => {
  audio.src = url;
  audio.play().catch(() => {});
};

playTrack('/musik/titel1.mp3');
playTrack('/musik/titel2.mp3'); // bricht titel1 ab

Titelwechsel – vorheriger Ladevorgang abgebrochen

Listener mit AbortController wieder entfernen

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

const onAbort = () => console.log('Medien-Laden abgebrochen');
video.addEventListener('abort', onAbort, { signal: controller.signal });

// Später, z. B. beim Entfernen der Komponente:
controller.abort();
// Alternativ klassisch:
// video.removeEventListener('abort', onAbort);

// Wichtig · Fallstricke

abort oder error: abort heißt „absichtlich bzw. ohne Fehler abgebrochen“. Netzwerkfehler oder nicht unterstützte Formate lösen error aus, und video.error ist dann gesetzt. Bei abort bleibt error in der Regel null.
Nicht verwechseln mit AbortController bzw. dem abort-Ereignis von AbortSignal oder XMLHttpRequest. Das sind eigenständige APIs.
Das Ereignis steigt nicht auf. Eine Ereignisdelegation am Elternelement funktioniert deshalb nur in der Capture-Phase ({ capture: true }).
Wann genau abort feuert, unterscheidet sich zwischen den Browsern etwas. Manche Browser lösen es auch beim ersten Setzen von src aus, wenn zuvor gar nichts geladen wurde. Daher keine kritische Logik allein darauf stützen und zusätzlich emptied bzw. loadstart auswerten.
Unterstützung: alle modernen Browser, auch ältere Versionen.

Siehe auch

HTMLMediaElement HTMLMediaElement.prototype.load() EventTarget.prototype.addEventListener() HTMLDialogElement: close HTMLMediaElement: error