ManagedMediaSource: endstreaming — Ereignis · JavaScript-Referenz

Signatur

managedMediaSource.addEventListener("endstreaming", handler)

Beschreibung

Das Ereignis endstreaming gehört zur ManagedMediaSource, einer energiesparenden Variante von MediaSource (Media Source Extensions). Anders als bei der klassischen MediaSource entscheidet hier der Browser, wann die Seite Mediensegmente nachladen soll. Er meldet das über die Eigenschaft streaming und die Ereignisse startstreaming und endstreaming.

Wird endstreaming ausgelöst, hat streaming gerade den Wert false angenommen. Das heißt: Der Puffer ist ausreichend gefüllt, oder der Browser möchte (etwa bei Akkubetrieb oder über Mobilfunk) das Funkmodul schonen. Die Anwendung sollte dann laufende Segment-Downloads pausieren und keine weiteren Daten per SourceBuffer.appendBuffer() anhängen, bis wieder startstreaming eintrifft.

Registriert wird der Handler über addEventListener("endstreaming", handler) oder über die Eigenschaft onendstreaming. Das Ereignis ist ein einfaches Event ohne zusätzliche Daten, blubbert nicht und ist nicht abbrechbar.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"endstreaming"`.
$handler Pflicht	(event: Event) => void		Callback, der beim Wechsel von `streaming` auf `false` aufgerufen wird. Erhält ein generisches `Event`-Objekt.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener() liefert keinen Rückgabewert. Das übergebene Ereignis ist ein Event mit type === "endstreaming".

Beispiele

Segment-Downloads bei endstreaming pausieren

const video = document.querySelector('video');
const MS = window.ManagedMediaSource ?? window.MediaSource;
const source = new MS();

// Pflicht bei ManagedMediaSource in Safari: Remote-Playback deaktivieren oder AirPlay-Quelle angeben
video.disableRemotePlayback = true;
video.src = URL.createObjectURL(source);

let downloadController = null;

source.addEventListener('startstreaming', () => {
  console.log('Browser wünscht Daten – Download startet');
  downloadController = new AbortController();
  // loadSegments(downloadController.signal);
});

source.addEventListener('endstreaming', () => {
  console.log('streaming =', source.streaming, '– Download pausiert');
  downloadController?.abort();
  downloadController = null;
});

Browser wünscht Daten – Download startet streaming = false – Download pausiert

Handler über die on-Property setzen und wieder entfernen

const source = new ManagedMediaSource();

source.onendstreaming = (event) => {
  console.log(`Ereignis: ${event.type}, streaming: ${source.streaming}`);
};

// Später, z. B. beim Abbau des Players:
source.onendstreaming = null;

Ereignis: endstreaming, streaming: false

Fetch-Schleife mit Streaming-Steuerung

const video = document.querySelector('video');
const source = new ManagedMediaSource();
video.disableRemotePlayback = true;
video.src = URL.createObjectURL(source);

const segments = ['/seg/1.m4s', '/seg/2.m4s', '/seg/3.m4s'];
let index = 0;

source.addEventListener('sourceopen', () => {
  const sb = source.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');

  const appendNext = async () => {
    // Nur laden, solange der Browser streamen möchte
    if (!source.streaming || index >= segments.length || sb.updating) return;
    const data = await (await fetch(segments[index++])).arrayBuffer();
    sb.appendBuffer(data);
  };

  sb.addEventListener('updateend', appendNext);
  source.addEventListener('startstreaming', appendNext);
  source.addEventListener('endstreaming', () => console.log('Pause bei Segment', index));
});

Pause bei Segment 2

// Wichtig · Fallstricke

Browser-Kompatibilität: ManagedMediaSource wird vor allem von Safari 17.1+ (macOS, iPadOS und – als einzige MSE-Variante – iOS/iPhone) unterstützt. Andere Browser unterstützen sie teilweise oder gar nicht; per window.ManagedMediaSource ?? window.MediaSource auf die klassische Variante zurückfallen und endstreaming dann ignorieren.
Das Ereignis ist ein Hinweis, keine harte Sperre: Die Seite kann weiter anhängen, verschwendet damit aber Energie, und der Browser kann gepufferte Daten jederzeit wieder entfernen (bufferedchange am ManagedSourceBuffer).
In Safari muss am <video> entweder disableRemotePlayback = true gesetzt oder eine alternative AirPlay-Quelle (<source> mit HLS) angegeben werden, sonst wird die Quelle nicht geöffnet und es treten keine Streaming-Ereignisse auf.
Den Zustand immer über source.streaming prüfen, statt nur auf Ereignisse zu vertrauen – etwa direkt nach sourceopen, falls startstreaming schon vor der Registrierung des Handlers gefeuert hat.

Siehe auch

ManagedMediaSource ManagedMediaSource: startstreaming ManagedMediaSource.streaming ManagedSourceBuffer: bufferedchange MediaSource SourceBuffer.prototype.appendBuffer() MediaSource: sourceclose