ManagedMediaSource.streaming — Eigenschaft · JavaScript-Referenz

Signatur

ManagedMediaSource.streaming

Beschreibung

Die Eigenschaft streaming gehört zum Interface ManagedMediaSource, einer Variante von MediaSource, die dem Browser mehr Kontrolle über Pufferung und Speicher gibt. Über streaming teilt der Browser der Anwendung mit, ob sie gerade neue Segmente laden soll. Ist der Wert true, sollte die Anwendung Daten laden und anhängen. Ist er false, hat der Browser genug gepuffert oder will Energie sparen, zum Beispiel wenn das Gerät kein WLAN hat oder mit Akku läuft.

Ändert sich der Wert, löst der Browser eines von zwei Ereignissen aus: startstreaming, wenn streaming auf true wechselt, und endstreaming, wenn es auf false wechselt. Üblicherweise reagiert man auf diese Ereignisse und liest streaming zusätzlich direkt aus, etwa vor jedem Ladeversuch in der Download-Schleife.

Solange die Quelle noch nicht mit einem HTMLMediaElement verbunden ist (readyState ist "closed"), ist der Wert false. Die Eigenschaft ist schreibgeschützt. Eine Zuweisung hat keine Wirkung und löst im Strict Mode einen TypeError aus.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Anwendung Mediendaten laden und anhängen soll, sonst false.

Beispiele

Streaming-Status abfragen und Ereignisse beobachten

if ('ManagedMediaSource' in window) {
  const video = document.querySelector('video');
  const source = new ManagedMediaSource();
  video.disableRemotePlayback = true; // bei ManagedMediaSource in Safari nötig
  video.src = URL.createObjectURL(source);

  console.log('Vor sourceopen:', source.streaming);

  source.addEventListener('startstreaming', () => {
    console.log('Laden gestartet, streaming =', source.streaming);
  });
  source.addEventListener('endstreaming', () => {
    console.log('Laden pausiert, streaming =', source.streaming);
  });
}

Vor sourceopen: false Laden gestartet, streaming = true

Segment-Ladeschleife, die streaming beachtet

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

const segments = ['/video/init.mp4', '/video/seg1.m4s', '/video/seg2.m4s'];
let index = 0;
let sb;

const shouldFetch = () => !('streaming' in source) || source.streaming;

const appendNext = async () => {
  if (!shouldFetch() || sb.updating || index >= segments.length) return;
  const data = await (await fetch(segments[index++])).arrayBuffer();
  sb.appendBuffer(data);
};

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

// Nach einer Pause wieder aufnehmen
source.addEventListener('startstreaming', () => appendNext());

Schreibschutz demonstrieren

'use strict';
const source = new ManagedMediaSource();
try {
  source.streaming = true;
} catch (e) {
  console.log(e.name);
}
console.log(source.streaming);

TypeError false

// Wichtig · Fallstricke

Browser-Kompatibilität: ManagedMediaSource gibt es seit Safari 17.1, auf iOS/iPadOS ab 17.1 (dort gibt es kein klassisches MediaSource). Chromium-Browser unterstützen die API erst in neueren Versionen, Firefox bisher nicht. Prüfen Sie die Unterstützung mit 'ManagedMediaSource' in window und greifen Sie sonst auf MediaSource zurück. Das hat keine streaming-Eigenschaft.
Der Browser setzt streaming nicht durch. Die Anwendung kann auch bei false weiter anhängen. Dann kann der Browser aber gepufferte Daten entfernen (Ereignis bufferedchange), und die Anwendung verbraucht unnötig Energie und Datenvolumen.
Laufende fetch-Aufrufe sollten Sie bei endstreaming nicht unbedingt abbrechen. Es reicht, keine neuen Anfragen zu starten.
In Safari muss für ManagedMediaSource entweder disableRemotePlayback = true gesetzt oder eine AirPlay-Alternative (<source> mit HLS) angeboten werden. Sonst wird die Quelle nicht geöffnet und streaming bleibt false.

Siehe auch

ManagedMediaSource MediaSource SourceBuffer.appendBuffer() ManagedSourceBuffer PerformanceResourceTiming.serverTiming