MediaSource

MediaSource()

Konstruiert und gibt ein neues MediaSource-Objekt ohne zugehörige Quellpuffer zurück.

MediaSource.activeSourceBuffers Nur lesbar

Gibt ein SourceBufferList-Objekt zurück, das eine Teilmenge der SourceBuffer-Objekte enthält, die innerhalb von MediaSource.sourceBuffers enthalten sind — die Liste von Objekten, die die ausgewählte Videospur, aktivierte Audiospuren und angezeigte/verdeckte Textspuren bereitstellen.

MediaSource.duration

Ruft die Dauer des aktuellen Mediainhalts ab oder setzt sie, der präsentiert wird.

MediaSource.handle Nur lesbar

Innerhalb eines dedizierten Workers gibt es ein MediaSourceHandle-Objekt zurück, einen Proxy für das MediaSource, das aus dem Worker zurück in den Hauptthread übertragen und über seine HTMLMediaElement.srcObject-Eigenschaft an ein Medienelement angehängt werden kann.

MediaSource.readyState Nur lesbar

Gibt ein Enum zurück, das den Zustand des aktuellen MediaSource angibt, ob es nicht derzeit an ein Medienelement angehängt ist (closed), angehängt und bereit ist, SourceBuffer-Objekte zu empfangen (open), oder angehängt, aber der Stream über MediaSource.endOfStream() beendet wurde (ended.

MediaSource.sourceBuffers Nur lesbar

Gibt ein SourceBufferList-Objekt zurück, das die Liste von SourceBuffer-Objekten enthält, die mit dieser MediaSource verbunden sind.

MediaSource.canConstructInDedicatedWorker Nur lesbar

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

Erbt Methoden von seinem übergeordneten Interface, EventTarget.

MediaSource.addSourceBuffer()

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

MediaSource.clearLiveSeekableRange()

Löscht einen zuvor mit einem Aufruf an setLiveSeekableRange() gesetzten suchbaren Bereich.

MediaSource.endOfStream()

Signalisiert das Ende des Streams.

MediaSource.removeSourceBuffer()

Entfernt den angegebenen SourceBuffer aus der MediaSource.sourceBuffers-Liste.

MediaSource.setLiveSeekableRange()

Legt den Bereich fest, in dem der Benutzer im Medienelement suchen kann.

MediaSource.isTypeSupported()

Gibt einen booleschen Wert zurück, der angibt, ob der gegebene MIME-Typ vom aktuellen User-Agent unterstützt wird — das heißt, ob es möglich ist, erfolgreich SourceBuffer-Objekte für diesen MIME-Typ zu erstellen.

sourceclose

Wird ausgelöst, wenn die MediaSource-Instanz nicht mehr an ein Medienelement angehängt ist.

sourceended

Wird ausgelöst, wenn die MediaSource-Instanz noch an ein Medienelement angehängt ist, aber endOfStream() aufgerufen wurde.

sourceopen

Wird ausgelöst, wenn die MediaSource-Instanz von einem Medienelement geöffnet wurde und bereit ist, Daten zu den SourceBuffer-Objekten in sourceBuffers hinzugefügt zu bekommen.

Das folgende einfache Beispiel lädt ein Video mit XMLHttpRequest und spielt es ab, sobald es kann. Dieses Beispiel wurde von Nick Desaulniers geschrieben und kann hier live angesehen werden (Sie können auch den Quellcode herunterladen zur weiteren Untersuchung). Die Funktion getMediaSource(), die hier nicht definiert ist, gibt ein 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 übertragen, der den Worker erstellt hat (in diesem Fall der 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 message-Event-Handler, hängen es an ein <video> via seiner HTMLMediaElement.srcObject-Eigenschaft und play das Video:

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

Note: MediaSourceHandles können nicht erfolgreich in einen gemeinsamen Worker oder einen Service Worker übertragen werden.

• SourceBuffer
• SourceBufferList