MediaSource.setLiveSeekableRange() — Methode · JavaScript-Referenz

Signatur

MediaSource.prototype.setLiveSeekableRange(start, end)

Beschreibung

Mit setLiveSeekableRange() teilst du dem Browser bei einem Live-Stream mit, welcher Zeitbereich angesteuert werden darf. Typischer Fall ist ein DVR- oder Timeshift-Fenster, z. B. „die letzten 30 Minuten“. Der Bereich wird in Sekunden auf der Zeitachse des Medien-Elements angegeben.

Wirksam wird die Methode nur, wenn MediaSource.duration auf Infinity steht, also bei einem echten Live-Stream. Dann liefert HTMLMediaElement.seekable die Vereinigung aus dem gesetzten Live-Bereich und dem gerade gepufferten Bereich. Die Steuerelemente des Players, eigene Zeitleisten und Aufrufe von currentTime richten sich nach diesem Bereich. Bei endlicher Dauer ignoriert der Browser den gesetzten Bereich bei der Berechnung von seekable.

Weil sich das Fenster bei Live-Inhalten ständig verschiebt, rufst du die Methode meist wiederholt auf, zum Beispiel nach jedem angehängten Segment im updateend-Ereignis des SourceBuffer oder nach jedem Neuladen des Manifests. Mit clearLiveSeekableRange() entfernst du den Bereich wieder.

Parameter

Name	Typ	Default	Beschreibung
$start Pflicht	number		Beginn des ansteuerbaren Bereichs in Sekunden. Muss ≥ 0 sein.
$end Pflicht	number		Ende des ansteuerbaren Bereichs in Sekunden. Muss ≥ `start` sein.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Die Wirkung zeigt sich über HTMLMediaElement.seekable.

Beispiele

DVR-Fenster für einen Live-Stream setzen

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

mediaSource.addEventListener('sourceopen', () => {
  // Live-Stream: Dauer unendlich
  mediaSource.duration = Infinity;
  const sb = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

  // Die letzten 30 Minuten (0–1800 s) dürfen angesteuert werden
  mediaSource.setLiveSeekableRange(0, 1800);

  const r = video.seekable;
  console.log(r.length, r.start(0), r.end(0));
});

1 0 1800

Gleitendes Fenster nach jedem Segment nachführen

const WINDOW = 120; // 2 Minuten Timeshift

const updateLiveWindow = (mediaSource, sourceBuffer) => {
  if (mediaSource.readyState !== 'open' || sourceBuffer.buffered.length === 0) return;
  const liveEdge = sourceBuffer.buffered.end(sourceBuffer.buffered.length - 1);
  const start = Math.max(0, liveEdge - WINDOW);
  mediaSource.setLiveSeekableRange(start, liveEdge);
  console.log(`Seekbar: ${start.toFixed(1)}–${liveEdge.toFixed(1)} s`);
};

// sourceBuffer.addEventListener('updateend', () => updateLiveWindow(mediaSource, sourceBuffer));

Seekbar: 480.0–600.0 s

Fehlerbehandlung und Zurücksetzen

const safeSetRange = (mediaSource, start, end) => {
  try {
    mediaSource.setLiveSeekableRange(start, end);
  } catch (err) {
    // InvalidStateError: readyState ist nicht "open"
    // TypeError: start < 0 oder start > end
    console.warn(err.name, err.message);
  }
};

safeSetRange(mediaSource, 50, 10); // ungültig

// Stream wird zu Video-on-Demand: Live-Bereich entfernen
mediaSource.clearLiveSeekableRange();

TypeError …

// Wichtig · Fallstricke

Löst einen InvalidStateError (DOMException) aus, wenn readyState nicht "open" ist. Rufe die Methode also erst nach sourceopen auf und nicht mehr nach endOfStream().
Löst einen TypeError aus, wenn start negativ ist oder größer als end. Nicht-endliche Werte wie NaN werden über die WebIDL-Prüfung ebenfalls abgelehnt.
Die Methode wirkt nur bei duration === Infinity. Bei endlicher Dauer berechnet sich seekable unabhängig vom gesetzten Bereich.
Der Bereich wird nicht automatisch nachgeführt. Bei gleitenden Fenstern musst du ihn regelmäßig selbst aktualisieren. Liegt currentTime außerhalb des Fensters, springt der Browser beim Ansteuern an den nächstgelegenen gültigen Zeitpunkt.
Die Methode entfernt keine Daten aus dem Puffer. Alte Segmente löschst du bei Bedarf mit SourceBuffer.remove().
Browserunterstützung: Chromium-Browser seit Version 62. Firefox und Safari unterstützen die Methode in aktuellen Versionen. Auf dem iPhone (iOS) gibt es sie über ManagedMediaSource (ab iOS 17.1). Prüfe die Verfügbarkeit mit 'setLiveSeekableRange' in MediaSource.prototype.

Siehe auch

MediaSession.setScreenshareActive() MediaSource.clearLiveSeekableRange() MediaSource.removeSourceBuffer() MediaSource.endOfStream() MediaSource.isTypeSupported()