MediaSource.clearLiveSeekableRange() — Methode · JavaScript-Referenz

Signatur

MediaSource.prototype.clearLiveSeekableRange()

Beschreibung

clearLiveSeekableRange() gehört zu den Media Source Extensions (MSE) und setzt den intern gespeicherten Live-Suchbereich eines MediaSource-Objekts wieder auf einen leeren Bereich zurück. Diesen Bereich legst du vorher mit setLiveSeekableRange(start, end) fest, typischerweise bei Live-Streams mit DVR-Funktion (Zeitversatz-Fenster), deren duration auf Infinity steht.

Relevant ist der Live-Suchbereich nur, solange mediaSource.duration === Infinity gilt. Dann berechnet der Browser HTMLMediaElement.seekable so:

Live-Suchbereich gesetzt: Vereinigung aus dem Live-Suchbereich und den gepufferten Bereichen (buffered).
Kein Live-Suchbereich (also nach clearLiveSeekableRange()): ein einziger Bereich von 0 bis zum Ende der gepufferten Daten, oder ein leerer Bereich, wenn noch nichts gepuffert ist.

Du rufst die Methode zum Beispiel auf, wenn ein Live-Event ohne Zeitversatz weiterläuft, wenn der Server das DVR-Fenster nicht mehr anbietet oder wenn du vor einem Quellwechsel den Zustand zurücksetzen willst. Die Methode nimmt keine Argumente entgegen und gibt nichts zurück. Sie funktioniert nur, wenn readyState den Wert "open" hat.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Die Wirkung siehst du indirekt an video.seekable.

Beispiele

Grundlegende Nutzung: Live-Suchbereich setzen und wieder entfernen

const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  // Live-Stream: unbekannte Gesamtdauer
  mediaSource.duration = Infinity;

  // DVR-Fenster: Nutzer darf zwischen 0 s und 300 s springen
  mediaSource.setLiveSeekableRange(0, 300);
  console.log('Mit Bereich:', video.seekable.length, video.seekable.end(0));

  // Bereich wieder entfernen
  mediaSource.clearLiveSeekableRange();
  console.log('Ohne Bereich:', video.seekable.length);
});

Mit Bereich: 1 300 Ohne Bereich: 0

DVR-Fenster abschalten, wenn der Server keinen Zeitversatz mehr anbietet

const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

const updateDvrWindow = (manifest) => {
  if (mediaSource.readyState !== 'open') return;

  if (manifest.dvrWindowSeconds > 0) {
    const end = manifest.liveEdge;
    const start = Math.max(0, end - manifest.dvrWindowSeconds);
    mediaSource.setLiveSeekableRange(start, end);
  } else {
    // Kein Zeitversatz mehr: seekable basiert nur noch auf buffered
    mediaSource.clearLiveSeekableRange();
  }
};

mediaSource.addEventListener('sourceopen', () => {
  mediaSource.duration = Infinity;
  updateDvrWindow({ liveEdge: 1200, dvrWindowSeconds: 600 });
  // später meldet das Manifest: DVR deaktiviert
  updateDvrWindow({ liveEdge: 1260, dvrWindowSeconds: 0 });
  console.log('seekable-Bereiche:', video.seekable.length);
});

seekable-Bereiche: 0

InvalidStateError sicher abfangen

const mediaSource = new MediaSource();

// Noch nicht an ein Medienelement gebunden, readyState ist 'closed'
try {
  mediaSource.clearLiveSeekableRange();
} catch (err) {
  console.log(err.name, '- readyState:', mediaSource.readyState);
}

InvalidStateError - readyState: closed

// Wichtig · Fallstricke

InvalidStateError: Die Methode wirft einen DOMException vom Typ InvalidStateError, wenn readyState nicht "open" ist, also vor dem sourceopen-Event oder nach endOfStream()/"ended". Prüfe den Zustand vorher oder fange den Fehler mit try/catch ab.
Nur bei duration === Infinity sichtbar: Bei endlicher Dauer ignoriert der Browser den Live-Suchbereich ohnehin. Der Aufruf ist dann erlaubt, ändert an seekable aber nichts.
Löscht keine Mediendaten: Gepufferte Segmente bleiben erhalten. Wenn du Daten entfernen willst, nimm SourceBuffer.remove().
Mehrfache Aufrufe sind unkritisch. Ist kein Bereich gesetzt, passiert nichts.
Kompatibilität: Unterstützt in Chromium-Browsern ab Version 71 und in Firefox ab Version 128. In Safari ist die Methode über ManagedMediaSource verfügbar (unter iOS ab 17.1). Mit 'clearLiveSeekableRange' in MediaSource.prototype prüfst du, ob sie vorhanden ist. In Chromium ist MSE zusätzlich in Dedicated Workers nutzbar.

Siehe auch

MediaSource.setLiveSeekableRange() MediaSource.removeSourceBuffer() MediaSource.addSourceBuffer() MediaSource.endOfStream() MediaSource.isTypeSupported()