Media Source API: Automatische Gewährleistung einer nahtlosen Wiedergabe von Mediasegmenten im Anhang

Mit den HTML-Audio- und -Videoelementen können Sie Medien laden, decodieren und abspielen, indem Sie einfach eine src-URL bereitstellen:

    <video src='foo.webm'></video>

Das funktioniert in einfachen Anwendungsfällen gut. Für Techniken wie adaptives Streaming bietet die Media Source Extensions API (MSE) jedoch mehr Kontrolle. Mit MSE können Streams in JavaScript aus Audio- oder Videosegmenten erstellt werden.

Sie können MSE unter simpl.info/mse ausprobieren:

Screenshot des Videos, das mit der MSE API wiedergegeben wird.

Der folgende Code stammt aus diesem Beispiel.

Ein MediaSource steht für eine Medienquelle für ein Audio- oder Videoelement. Sobald ein MediaSource-Objekt instanziiert wurde und sein open-Ereignis ausgelöst wurde, können ihm SourceBuffer-Objekte hinzugefügt werden. Diese dienen als Puffer für Mediensegmente:

var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
    var sourceBuffer =
        mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    // Get video segments and append them to sourceBuffer.
}

Mediasegmente werden an ein Audio- oder Videoelement gestreamt, indem jedes Segment einem SourceBuffer mit appendBuffer() hinzugefügt wird. In diesem Beispiel wird das Video vom Server abgerufen und dann mithilfe der File APIs gespeichert:

reader.onload = function (e) {
    sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
    if (i === NUM_CHUNKS - 1) {
    mediaSource.endOfStream();
    } else {
    if (video.paused) {
        // start playing after first chunk is appended
        video.play();
    }
    readChunk(++i);
    }
};

Wiedergabereihenfolge festlegen

In Chrome 50 wird das Attribut SourceBuffer mode zusätzlich unterstützt. So kannst du festlegen, dass Mediasegmente kontinuierlich und in der Reihenfolge wiedergegeben werden, in der sie angehängt wurden, unabhängig davon, ob die Mediensegmente anfänglich nicht zusammenhängende Zeitstempel hatten.

Verwenden Sie das Attribut mode, um die Wiedergabereihenfolge für Mediasegmente anzugeben. Sie hat einen von zwei Werten:

  • segments: Der Zeitstempel der einzelnen Segmente, der möglicherweise durch timestampOffset geändert wurde, bestimmt die Reihenfolge der Wiedergaben, unabhängig davon, in welcher Reihenfolge die Segmente angehängt wurden.
  • Sequence: Die Reihenfolge der in der Medienzeitachse gepufferten Segmente wird durch die Reihenfolge bestimmt, in der die Segmente an die SourceBuffer angehängt werden.

Wenn die Zeitstempel der Mediensegmente aus Bytestream-Daten geparst wurden, wenn sie an die SourceBuffer angehängt werden, wird das Attribut mode der SourceBuffer auf Segmente festgelegt. Andernfalls wird für mode der Wert Sequence verwendet. Hinweis: Zeitstempel sind nicht optional: Sie müssen für die meisten Streamtypen vorhanden sein und nicht für andere: Inband-Zeitstempel sind den Streamtypen zugeordnet, die sie enthalten.

Das Festlegen des Attributs mode ist optional. Für Streams, die keine Zeitstempel (Audio/MPEG und Audio/AAC) enthalten, kann mode nur von Segment in Sequence geändert werden. Wenn du versuchst, mode von Sequenz in Segmente zu ändern, wird ein Fehler ausgegeben. Bei Streams mit Zeitstempeln ist es möglich, zwischen Segmenten und Sequenz zu wechseln. In der Praxis würde dies jedoch möglicherweise zu unerwünschtem, schwer verständlichem oder schwer vorhersehbarem Verhalten führen.

Sie können den Wert für alle Streamtypen von segments in sequenz ändern. Das bedeutet, dass Segmente in der Reihenfolge wiedergegeben werden, in der sie angehängt wurden, und dementsprechend neue Zeitstempel generiert:

sourceBuffer.mode = 'sequence';

Wenn du den mode-Wert auf Sequence setzt, wird eine kontinuierliche Medienwiedergabe gewährleistet, unabhängig davon, ob die Zeitstempel der Mediensegmente unterbrochen waren, beispielsweise wenn es Probleme mit dem Muxing von Videos gab oder wenn aus irgendeinem Grund nicht zusammenhängende Segmente angehängt werden. Eine App kann für eine unterbrechungsfreie Wiedergabe ein Polyfill mit timestampOffset einrichten, wenn korrekte Stream-Metadaten verfügbar sind. Mit dem Sequenzmodus ist der Vorgang aber einfacher und weniger fehleranfällig.

MSE-Apps und -Demos

Diese zeigen MSE in Aktion, allerdings ohne SourceBuffer.mode-Manipulation:

Unterstützte Browser

  • Standardmäßig Chrome 50 und höher
  • Für Firefox: Weitere Informationen finden Sie unter MDN.

Spezifikation

API-Informationen