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:
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
:
- Media Source API
- Shaka Player: demonstracja odtwarzacza wideo, który używa MSE do implementacji DASH za pomocą biblioteki JavaScript Shaka.
Obsługa przeglądarek
- Chrome 50 lub nowszy domyślnie
- Więcej informacji o Firefoksie znajdziesz na stronie MDN.