MediaSource

Konstruktor

MediaSource()

Erstellt ein neues MediaSource-Objekt ohne zugehörige SourceBuffer und gibt es zurück.

Statische Eigenschaften

MediaSource.canConstructInDedicatedWorker Schreibgeschützt

Ein boolescher Wert, der true zurückgibt, wenn die Unterstützung für MediaSource in Workern implementiert ist. Damit lässt sich diese Funktion mit geringer Latenz erkennen.

Instanzeigenschaften

MediaSource.activeSourceBuffers Schreibgeschützt

Gibt ein SourceBufferList-Objekt zurück, das eine Teilmenge der in MediaSource.sourceBuffers enthaltenen SourceBuffer-Objekte umfasst: die Objekte für den ausgewählten Videotrack, die aktivierten Audiotracks und die angezeigten oder ausgeblendeten Texttracks.

MediaSource.duration

Liest und setzt die Dauer des aktuell wiedergegebenen Mediums.

MediaSource.handle Schreibgeschützt

Gibt innerhalb eines Dedicated Workers ein MediaSourceHandle-Objekt zurück. Dieses dient als Proxy für die MediaSource, kann vom Worker zurück an den Hauptthread übertragen und dort über die Eigenschaft HTMLMediaElement.srcObject mit einem Medienelement verbunden werden.

MediaSource.readyState Schreibgeschützt

Gibt einen Enum-Wert zurück, der den Zustand der aktuellen MediaSource beschreibt: ob sie derzeit nicht mit einem Medienelement verbunden ist (closed), verbunden und bereit ist, SourceBuffer-Objekte zu empfangen (open), oder verbunden ist, der Stream aber durch MediaSource.endOfStream() beendet wurde (ended).

MediaSource.sourceBuffers Schreibgeschützt

Gibt ein SourceBufferList-Objekt zurück, das die Liste der dieser MediaSource zugeordneten SourceBuffer-Objekte enthält.

Statische Methoden

MediaSource.isTypeSupported()

Gibt einen booleschen Wert zurück, der angibt, ob der aktuelle User Agent den angegebenen MIME-Typ unterstützt, also ob er für diesen MIME-Typ erfolgreich SourceBuffer-Objekte erstellen kann.

Instanzmethoden

Erbt Methoden von der übergeordneten Schnittstelle EventTarget.

MediaSource.addSourceBuffer()

Erstellt einen neuen SourceBuffer für den angegebenen MIME-Typ und fügt ihn der Liste MediaSource.sourceBuffers hinzu.

MediaSource.clearLiveSeekableRange()

Löscht einen Suchbereich, der zuvor durch einen Aufruf von setLiveSeekableRange() festgelegt wurde.

MediaSource.endOfStream()

Signalisiert das Ende des Streams.

MediaSource.removeSourceBuffer()

Entfernt den angegebenen SourceBuffer aus der Liste MediaSource.sourceBuffers.

MediaSource.setLiveSeekableRange()

Legt den Bereich fest, zu dem Benutzer im Medienelement springen können.

Ereignisse

sourceclose

Wird ausgelöst, wenn die MediaSource-Instanz nicht mehr mit einem Medienelement verbunden ist.

sourceended

Wird ausgelöst, wenn die MediaSource-Instanz noch mit einem Medienelement verbunden ist, aber endOfStream() aufgerufen wurde.

sourceopen

Wird ausgelöst, wenn ein Medienelement die MediaSource-Instanz geöffnet hat und Daten an die SourceBuffer-Objekte in sourceBuffers angehängt werden können.

Beispiele

Vollständiges einfaches Beispiel

Das folgende einfache Beispiel lädt ein Video mit XMLHttpRequest und spielt es ab, sobald dies möglich ist. Sie können das Beispiel hier live ansehen und für eine genauere Untersuchung auch den Quellcode herunterladen.

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

const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
let mediaSource;

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  mediaSource = new MediaSource();
  console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error("Unsupported MIME type or codec: ", mimeCodec);
}

function sourceOpen() {
  console.log(this.readyState); // open
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, (buf) => {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      video.play();
      console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

function fetchAB(url, cb) {
  console.log(url);
  const xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer";
  xhr.onload = () => {
    cb(xhr.response);
  };
  xhr.send();
}

Eine MediaSource in einem Dedicated Worker erstellen und an den Hauptthread übergeben

Auf die Eigenschaft handle kann innerhalb eines Dedicated Workers zugegriffen werden. Das zurückgegebene MediaSourceHandle-Objekt wird dann über einen Aufruf von postMessage() an den Thread übertragen, der den Worker erstellt hat (in diesem Fall den Hauptthread):

// Inside dedicated worker
let mediaSource = new MediaSource();
let handle = mediaSource.handle;
// Transfer the handle to the context that created the worker
postMessage({ arg: handle }, [handle]);

mediaSource.addEventListener("sourceopen", () => {
  // Await sourceopen on MediaSource before creating SourceBuffers
  // and populating them with fetched media — MediaSource won't
  // accept creation of SourceBuffers until it is attached to the
  // HTMLMediaElement and its readyState is "open"
});

Im Hauptthread empfangen wir das Handle über einen Handler für das Ereignis message, verbinden es über die Eigenschaft HTMLMediaElement.srcObject mit einem <video>-Element und geben das Video mit play wieder:

worker.addEventListener("message", (msg) => {
  let mediaSourceHandle = msg.data.arg;
  video.srcObject = mediaSourceHandle;
  video.play();
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• SourceBuffer
• SourceBufferList