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

Sam Dutton

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

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

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

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

Screenshot eines 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 und das open-Ereignis ausgelöst wurde, können SourceBuffers 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.
}

Mediensegmente werden an ein Audio- oder Videoelement „gestreamt“, indem jedes Segment mit appendBuffer() einer SourceBuffer 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 weiter unterstützt. Du kannst damit festlegen, dass Mediasegmente kontinuierlich in der Reihenfolge wiedergegeben werden, in der sie angehängt wurden, unabhängig davon, ob die Mediasegmente ursprünglich diskontinuierliche Zeitstempel hatten.

Mit dem Attribut mode kannst du die Wiedergabereihenfolge für Mediensegmente angeben. Es kann einen der folgenden Werte haben:

  • segments: Der Zeitstempel jedes Segments (der möglicherweise durch timestampOffset geändert wurde) bestimmt die Wiedergabereihenfolge, unabhängig davon, in welcher Reihenfolge die Segmente angehängt werden.
  • sequence: Die Reihenfolge der Segmente, die in der Medienzeitachse zwischengespeichert werden, wird durch die Reihenfolge bestimmt, in der Segmente an den SourceBuffer angehängt werden.

Wenn die Zeitstempel der Mediensegmente aus Bytestream-Daten geparst werden, wenn sie an die SourceBuffer angehängt werden, wird die mode-Eigenschaft der SourceBuffer auf segments festgelegt. Andernfalls wird mode auf sequence gesetzt. Zeitstempel sind nicht optional: Sie müssen für die meisten Streamtypen vorhanden sein und können für andere nicht vorhanden sein. In-Band-Zeitstempel sind für Streamtypen, die sie enthalten, unverzichtbar.

Das Festlegen des Attributs mode ist optional. Bei Streams ohne Zeitstempel (audio/mpeg und audio/aac) kann mode nur von segments zu sequence geändert werden. Wenn du versuchst, mode von sequence zu segments zu ändern, wird ein Fehler ausgegeben. Bei Streams mit Zeitstempeln ist es möglich, zwischen Segmenten und Sequenzen zu wechseln. In der Praxis würde dies jedoch wahrscheinlich zu unerwünschtem, schwer verständlichem oder schwer vorhersehbarem Verhalten führen.

Bei allen Streamtypen kannst du den Wert von segments in sequence ändern. Das bedeutet, dass Segmente in der Reihenfolge wiedergegeben werden, in der sie angehängt wurden, und entsprechend neue Zeitstempel generiert werden:

sourceBuffer.mode = 'sequence';

Wenn du den Wert „mode“ auf „sequence“ festlegen kannst, wird eine kontinuierliche Medienwiedergabe gewährleistet, unabhängig davon, ob die Zeitstempel der Mediensegmente diskontinuierlich sind. Das kann z. B. der Fall sein, wenn es Probleme mit dem Muxing des Videos gibt oder wenn (aus welchem Grund auch immer) diskontinuierliche Segmente angehängt werden. Eine App kann mit timestampOffset polyfillen, um eine kontinuierliche Wiedergabe zu ermöglichen, wenn korrekte Streammetadaten verfügbar sind. Der Modus sequence ist jedoch einfacher und weniger fehleranfällig.

MSE-Apps und ‑Demos

Hier sehen Sie MSE in Aktion, allerdings ohne SourceBuffer.mode-Manipulation:

Unterstützte Browser

  • Standardmäßig in Chrome 50 und höher
  • Weitere Informationen zu Firefox finden Sie im MDN.

Spezifikation

API-Informationen