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 zugehörige open-Ereignis ausgelöst wurde, können ihm SourceBuffers hinzugefügt werden. Sie 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 können Sie die Wiedergabereihenfolge für Mediensegmente angeben. Sie hat einen von zwei Werten:

  • 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 in der Medienzeitachse zwischengespeicherten Segmente richtet sich nach der Reihenfolge, in der die Segmente an 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 nicht für andere: Inband-Zeitstempel sind für Streamtypen, die sie enthalten, typisch.

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';

Durch Festlegen des mode-Werts auf Sequence wird eine kontinuierliche Medienwiedergabe sichergestellt, unabhängig davon, ob die Zeitstempel der Mediensegmente unterbrochen waren – beispielsweise bei Problemen beim Muxing des Videos oder wenn aus irgendeinem Grund nicht zusammenhängende Segmente angehängt werden. Eine App kann mit timestampOffset Polyfills verwenden, um eine kontinuierliche Wiedergabe zu ermöglichen, wenn korrekte Stream-Metadaten 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