MediaSource

Das MediaSource-Interface der Media Source Extensions API repräsentiert eine Quelle für Mediendaten für ein HTMLMediaElement-Objekt. Ein MediaSource-Objekt kann an ein HTMLMediaElement angehängt werden, um im Benutzeragenten abgespielt zu werden.

Konstruktor

MediaSource()

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

Instanz-Eigenschaften

MediaSource.activeSourceBuffers Schreibgeschützt

Gibt ein SourceBufferList-Objekt zurück, welches eine Teilmenge der SourceBuffer-Objekte enthält, die in MediaSource.sourceBuffers enthalten sind — die Liste der Objekte, die den ausgewählten Videotrack, aktivierte Audiotracks und angezeigte/verborgene Texttracks bereitstellen.

MediaSource.duration

Ruft die Dauer der aktuell präsentierten Medien ab oder setzt sie.

MediaSource.handle Schreibgeschützt

Gibt innerhalb eines dedizierten Workers ein MediaSourceHandle-Objekt zurück, ein Stellvertreter für die MediaSource, der vom Worker zurück an den Hauptthread übertragen und über die HTMLMediaElement.srcObject-Eigenschaft an ein Medienelement angehängt werden kann.

MediaSource.readyState Schreibgeschützt

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

MediaSource.sourceBuffers Schreibgeschützt

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

Statische Eigenschaften

MediaSource.canConstructInDedicatedWorker Schreibgeschützt

Ein Boolescher Wert; gibt true zurück, wenn die MediaSource-Worker-Unterstützung implementiert ist, wodurch ein Mechanismus zur Erkennung dieser Funktion mit geringer Latenz bereitgestellt wird.

Instanz-Methoden

Erbt Methoden von seinem übergeordneten 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, mit einem Aufruf von setLiveSeekableRange() zuvor gesetzten, 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, in dem der Benutzer im Medienelement suchen kann.

Statische Methoden

MediaSource.isTypeSupported()

Gibt einen booleschen Wert zurück, der angibt, ob der aktuelle Benutzeragent den angegebenen MIME-Typ unterstützt — das heißt, ob er erfolgreich SourceBuffer-Objekte für diesen MIME-Typ erstellen kann.

Ereignisse

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 ein Medienelement die MediaSource-Instanz geöffnet hat und sie bereit ist, dass Daten an die SourceBuffer-Objekte in sourceBuffers angehängt werden.

Beispiele

Vollständiges einfaches Beispiel

Das folgende einfache Beispiel lädt ein Video mit XMLHttpRequest und spielt es ab, sobald es möglich ist. Dieses Beispiel kann hier live angesehen werden (Sie können auch den Quellcode herunterladen für weitere Untersuchungen).

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

Erstellen einer MediaSource in einem dedizierten Worker und Übergeben an den Hauptthread

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 erhalten wir das Handle über einen message-Ereignishandler, hängen es mit seiner HTMLMediaElement.srcObject-Eigenschaft an ein <video> und play das Video an:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• SourceBuffer
• SourceBufferList