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 gut bei einfachen Anwendungsfällen. 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 eines Videos, das mit der MSE API wiedergegeben wird.

Der folgende Code stammt aus diesem Beispiel.

Ein MediaSource-Element stellt eine Medienquelle für ein Audio- oder Videoelement dar. Sobald ein MediaSource-Objekt instanziiert und sein open-Ereignis ausgelöst wurde, können SourceBuffers hinzugefügt werden. Sie dienen als Puffer für Media-Segmente:

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.
}

Media-Segmente werden in ein Audio- oder Videoelement „gestreamt“, indem jedes Segment einem SourceBuffer mit appendBuffer() hinzugefügt wird. In diesem Beispiel wird ein Video vom Server abgerufen und dann mit den 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 wurde die Unterstützung für das Attribut SourceBuffer mode erweitert. Sie können jetzt angeben, dass Mediasegmente fortlaufend in der Reihenfolge wiedergegeben werden, in der sie angehängt wurden, unabhängig davon, ob die Mediasegmente anfangs diskontinuierliche Zeitstempel hatten.

Mit dem Attribut mode können Sie die Wiedergabereihenfolge für Media-Segmente angeben. Das Attribut kann einen von zwei Werten annehmen:

  • 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 Media-Zeitachse gepufferten Segmente wird durch die Reihenfolge bestimmt, in der Segmente an SourceBuffer angehängt werden.

Wenn die Media-Segmente Zeitstempel haben, die aus Byte-Stream-Daten geparst werden, wenn sie an die SourceBuffer angehängt werden, wird die mode-Eigenschaft der SourceBuffer auf segments gesetzt. Andernfalls wird mode auf sequence gesetzt. Zeitstempel sind nicht optional. Sie müssen für die meisten Streamtypen vorhanden sein und dürfen für andere nicht vorhanden sein. Inband-Zeitstempel sind für Streamtypen, die sie enthalten, inhärent.

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 Sie versuchen, mode von sequence zu segments 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 wahrscheinlich zu unerwünschtem, schwer nachvollziehbarem oder schwer vorhersehbarem Verhalten führen.

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

sourceBuffer.mode = 'sequence';

Wenn Sie den mode-Wert auf sequence setzen, wird die kontinuierliche Medienwiedergabe sichergestellt, unabhängig davon, ob die Zeitstempel der Mediensegmente diskontinuierlich sind. Das kann z. B. der Fall sein, wenn es Probleme beim Muxen von Videos gab oder wenn (aus welchen Gründen auch immer) diskontinuierliche Segmente angehängt werden. Eine App kann timestampOffset als Polyfill verwenden, um eine kontinuierliche Wiedergabe zu gewährleisten, sofern die richtigen Stream-Metadaten verfügbar sind. Der Modus sequence macht den Prozess jedoch einfacher und weniger fehleranfällig.

MSE-Apps und ‑Demos

Hier sehen Sie Beispiele für MSE in Aktion, allerdings ohne SourceBuffer.mode-Manipulation:

Unterstützte Browser

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

Spezifikation

API-Informationen