Elementy HTML do obsługi dźwięku i wideo umożliwiają wczytywanie, dekodowanie i odtwarzanie multimediów po prostu przez podanie adresu URL źródła:
<video src='foo.webm'></video>
Jest to przydatne 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 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. Gdy obiekt MediaSource zostanie uruchomiony i wywołane zostanie zdarzenie 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 zapisywany 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 ciągłej kolejności, w której zostały dodane, 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 działanie.
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 nowe sygnatury czasowe będą generowane odpowiednio:
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.