MediaSource

MediaSource()

Erstellt und gibt ein neues MediaSource-Objekt zurück, das keine zugeordneten Quellpuffer hat.

MediaSource.activeSourceBuffers Schreibgeschützt

Gibt ein SourceBufferList-Objekt zurück, das eine Teilmenge der SourceBuffer-Objekte enthält, die innerhalb von MediaSource.sourceBuffers enthalten sind – die Liste der Objekte, die den ausgewählten Videotrack, aktivierten Audiotracks und angezeigten/versteckten Texttracks bereitstellen.

MediaSource.duration

Ruft die Dauer des aktuell präsentierten Mediens ab und setzt sie.

MediaSource.handle Schreibgeschützt

Gibt innerhalb eines dedizierten Workers ein MediaSourceHandle-Objekt zurück, einen Proxy für die MediaSource, der vom Worker zurück in den Hauptthread übertragen und über die HTMLMediaElement.srcObject-Eigenschaft an ein Media-Element angefügt werden kann.

MediaSource.readyState Schreibgeschützt

Gibt ein Enum zurück, das den Zustand der aktuellen MediaSource darstellt, ob sie derzeit nicht an ein Media-Element angeschlossen ist (closed), angeschlossen und bereit ist, SourceBuffer-Objekte zu empfangen (open), oder angeschlossen, aber der Stream wurde über MediaSource.endOfStream() beendet (ended).

MediaSource.sourceBuffers Schreibgeschützt

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

MediaSource.canConstructInDedicatedWorker Schreibgeschützt

Ein Boolean; gibt true zurück, wenn MediaSource-Worker-Unterstützung implementiert ist, was einen Mechanismus zur Erkennung von Features mit niedriger Latenz bietet.

Erbt Methoden von seinem Eltern-Interface, EventTarget.

MediaSource.addSourceBuffer()

Erstellt einen neuen SourceBuffer des angegebenen MIME-Typs und fügt ihn der Liste MediaSource.sourceBuffers hinzu.

MediaSource.clearLiveSeekableRange()

Löscht einen vorher mit einem Aufruf von setLiveSeekableRange() festgelegten suchbaren Bereich.

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 der Benutzer im Media-Element springen kann.

MediaSource.isTypeSupported()

Gibt einen Boolean-Wert zurück, der angibt, ob der angegebene MIME-Typ vom aktuellen Benutzeragenten unterstützt wird – ob es also mögliche ist, SourceBuffer-Objekte für diesen MIME-Typ erfolgreich zu erstellen.

sourceclose

Wird ausgelöst, wenn die MediaSource-Instanz nicht mehr an ein Media-Element angeschlossen ist.

sourceended

Wird ausgelöst, wenn die MediaSource-Instanz immer noch an ein Media-Element angeschlossen ist, aber endOfStream() aufgerufen wurde.

sourceopen

Wird ausgelöst, wenn die MediaSource-Instanz von einem Media-Element geöffnet wurde und bereit ist, Daten zu den SourceBuffer-Objekten in sourceBuffers hinzuzufügen.

Das folgende einfache Beispiel lädt ein Video mit XMLHttpRequest und spielt es so schnell wie möglich ab. Dieses Beispiel wurde von Nick Desaulniers geschrieben und kann hier live angesehen werden (Sie können den Quellcode herunterladen, um ihn weiter zu untersuchen). Die Funktion getMediaSource(), die hier nicht definiert ist, gibt eine MediaSource zurück.

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 = getMediaSource();
  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();
}

Die handle-Eigenschaft kann innerhalb eines dedizierten Workers aufgerufen werden, und das resultierende MediaSourceHandle-Objekt wird dann über einen postMessage()-Aufruf an den Thread, der den Worker erstellt hat (in diesem Fall der Hauptthread), übertragen:

// 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 message-Ereignishandler, fügen es einer <video> über seine HTMLMediaElement.srcObject-Eigenschaft hinzu und play das Video:

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

• SourceBuffer
• SourceBufferList