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

[imię]

Elementy audio i wideo HTML umożliwiają wczytywanie, dekodowanie i odtwarzanie multimediów przez udostępnienie odpowiedniego adresu URL:

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

Sprawdza się to w prostych przypadkach, ale w przypadku takich technik jak adaptacyjne strumieniowanie interfejs Media Source Extensions API (MSE) zapewnia większą kontrolę. MSE umożliwia tworzenie strumieni w kodzie JavaScript z segmentów audio lub wideo.

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

Zrzut ekranu z filmem odtwarzanym przy użyciu interfejsu MSE API.

Poniższy kod pochodzi z tego przykładu.

MediaSource reprezentuje źródło multimediów dla elementu audio lub wideo. Po utworzeniu wystąpienia obiektu MediaSource i wywołaniu jego zdarzenia open można do niego dodać obiekty SourceBuffer. Pełnią one rolę buforó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 z nich do elementu SourceBuffer z parametrem appendBuffer(). W tym przykładzie film jest pobierany z serwera, a następnie zapisywany za pomocą interfejsów API plików:

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 wprowadza dodatkową obsługę atrybutu SourceBuffer mode, dzięki czemu możesz określić, że segmenty multimediów mają być odtwarzane w sposób ciągły (w kolejności, w jakiej zostały do nich dołączone), niezależnie od tego, czy początkowo zawierały nieciągłe sygnatury czasowe.

Aby określić kolejność odtwarzania segmentów multimediów, użyj atrybutu mode. Może mieć jedną z dwóch wartości:

  • segmenty: sygnatura czasowa poszczególnych segmentów (która mogła zostać zmodyfikowana przez timestampOffset) określa kolejność odtwarzania, bez względu na kolejność ich dołączania.
  • sekwencja: kolejność segmentów buforowanych na osi czasu multimediów zależy od kolejności, w jakiej segmenty są dołączane do elementu SourceBuffer.

Jeśli segmenty multimediów mają sygnatury czasowe pozyskane z danych strumienia bajtów po dołączeniu do elementu SourceBuffer, właściwość mode obiektu SourceBuffer będzie ustawiona na segmenty. W przeciwnym razie parametr mode będzie ustawiony na sekwencję. Pamiętaj, że sygnatury czasowe nie są opcjonalne: muszą występować w przypadku większości typów transmisji i nie mogą występować w przypadku innych. Sygnatury czasowe w obrębie kanału są wrodzone dla typów transmisji, które je zawierają.

Ustawienie atrybutu mode jest opcjonalne. W przypadku strumieni, które nie zawierają sygnatur czasowych (audio/mpeg i audio/AAC) można zmienić ustawienie mode tylko z segmentów na sekwencję. Jeśli spróbujesz zmienić parametr mode z sekwencji na segmenty, pojawi się błąd. W przypadku strumieni z sygnaturami czasowymi przełączanie się między segmentami a sekwencjami może być jednak niemożliwe, chociaż w praktyce generowałoby to niepożądane, trudne do zrozumienia lub trudne do przewidzenia zachowanie.

W przypadku wszystkich typów strumieni możesz zmienić wartość z segmentów na sekwencja. Oznacza to, że segmenty zostaną odtworzone w kolejności, w jakiej zostały dołączone, a odpowiednio wygenerowane zostaną nowe sygnatury czasowe:

sourceBuffer.mode = 'sequence';

Możliwość ustawienia wartości mode na sekwencja 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 miksowaniem wideo czy też (z jakiegokolwiek powodu) dodawane są nieciągłe segmenty. Jeśli dostępne są prawidłowe metadane strumienia, aplikacja może zastosować kod timestampOffset polyfill, aby zapewnić ciągłość odtwarzania. Tryb sekwencji upraszcza cały proces i zmniejsza ryzyko błędów.

Aplikacje i wersje demonstracyjne MSE

Pokazują one MSE w praktyce, ale bez manipulacji SourceBuffer.mode:

Obsługiwane przeglądarki

  • domyślnie Chrome 50 i nowsze wersje,
  • W przypadku Firefoksa sprawdź MDN, by uzyskać szczegółowe informacje

Specyfikacja

Informacje o interfejsie API