Interfejs API Media Source – zapewnia automatyczne płynne odtwarzanie segmentów multimediów w kolejności dołączania

Elementy audio i wideo HTML umożliwiają wczytywanie, dekodowanie i odtwarzanie multimediów – wystarczy podać adres URL źródła:

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

Jest to dobre rozwiązanie w prostych przypadkach użycia, ale w przypadku technik takich jak streaming adaptacyjny interfejs Media Source Extensions API (MSE) zapewnia większą kontrolę. MSE umożliwia tworzenie strumieni w języku JavaScript z segmentów audio lub wideo.

Możesz wypróbować MSE na stronie simpl.info/mse:

Zrzut ekranu pokazujący odtwarzanie filmu za pomocą interfejsu MSE API.

Poniżej znajduje się kod z tego przykładu.

MediaSource reprezentuje źródło multimediów dla elementu audio lub wideo. Po uruchomieniu obiektu MediaSource i wywołaniu zdarzenia open można do niego dodać SourceBuffer. Te elementy pełnią funkcję buforów dla segmentów multimediów:

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

Segmenty multimediów są „przesyłane strumieniowo” do elementu audio lub wideo przez dodanie każdego segmentu do SourceBuffer za pomocą appendBuffer(). W tym przykładzie film jest pobierany z serwera, a następnie zapisany za pomocą interfejsów File API:

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

Ustawianie kolejności odtwarzania

Chrome 50 rozszerza obsługę atrybutu SourceBuffer mode, umożliwiając określenie, że segmenty multimediów są odtwarzane w sposób ciągły, w kolejności ich dołączenia, niezależnie od tego, czy segmenty multimediów miały początkowo nieciągłe sygnatury czasowe.

Użyj atrybutu mode, aby określić kolejność odtwarzania segmentów multimediów. Może ona mieć jedną z tych wartości:

  • segments: kolejność odtwarzania określa sygnatura czasu każdego segmentu (która może zostać zmodyfikowana przez timestampOffset), niezależnie od kolejności dołączania segmentów.
  • sequence: kolejność segmentów buforowanych w osi czasu multimediów jest określana przez kolejność, w jakiej segmenty są dołączane do SourceBuffer.

Jeśli segmenty mediów mają sygnatury czasowe zanalizowane z danych strumienia bajtów, gdy są one dołączane do SourceBuffer, właściwość mode obiektu SourceBuffer zostanie ustawiona na segments. W przeciwnym razie mode zostanie ustawiony na sequence. Pamiętaj, że znaczniki czasu nie są opcjonalne: muszą występować w przypadku większości typów strumieni, a nie mogą występować w przypadku innych typów strumieni: znaczniki czasu w paśmie są nieodłączną częścią typów strumieni, które je zawierają.

Ustawienie atrybutu mode jest opcjonalne. W przypadku strumieni, które nie zawierają sygnałów czasowych (audio/mpeg i audio/aac) mode można zmienić tylko z segments na sequence: jeśli spróbujesz zmienić mode z sequence na segments, pojawi się błąd. W przypadku strumieni z metkami czasowymi można przełączać się między segmentami a sekwencją, ale w praktyce prawdopodobnie spowoduje to niepożądane, trudne do zrozumienia lub przewidzenia zachowanie.

W przypadku wszystkich typów strumieni możesz zmienić wartość z segments (segmenty) na sequence (sekwencja). Oznacza to, że segmenty będą odtwarzane w kolejności, w jakiej zostały dodane, a także zostaną wygenerowane nowe sygnatury czasowe:

sourceBuffer.mode = 'sequence';

Możliwość ustawienia wartości mode na sequence zapewnia ciągłe odtwarzanie multimediów niezależnie od tego, czy sygnatury czasowe segmentów multimediów były nieciągłe – na przykład w przypadku problemów z muxowaniem wideo lub dołączania (z dowolnego powodu) nieciągłych segmentów. Aplikacja może stosować technikę polyfillingu za pomocą timestampOffset, aby zapewnić ciągłość odtwarzania, jeśli dostępne są prawidłowe metadane strumienia, ale tryb sequence upraszcza ten proces i zmniejsza prawdopodobieństwo wystąpienia błędów.

Aplikacje i wersje demonstracyjne MSE

Poniżej znajdziesz przykłady działania MSE bez manipulacji SourceBuffer.mode:

Obsługa przeglądarek

  • Chrome 50 lub nowszy domyślnie
  • Więcej informacji o Firefoksie znajdziesz na stronie MDN.

Specyfikacja

Informacje o interfejsie API