Rozszerzenia źródła multimediów HTML5: wprowadzanie wideo produkcyjnego do sieci

W ciągu ostatniej dekady wtyczki, takie jak Flash i Silverlight, umożliwiły bogatą konsumpcję wideo w przeglądarkach, napędzając popularne usługi, takie jak YouTube i Netflix. Jednak to podejście przesunęło się w kierunku HTML5 w ciągu ostatnich kilku lat.

Prawie dwa lata temu W3C opublikowało ostateczną rekomendację specyfikacji HTML5, która zawierała nowy zestaw elementów HTML i interfejsów API, zwłaszcza dla wideo. Niektóre z nich dążą do większej semantyki na stronach internetowych, ale nie wprowadzają nowych funkcji. Inne rozszerzają możliwości sieci i zwiększają możliwości programistów bez potrzeby stosowania wtyczek takich jak Adobe Flash, Microsoft Silverlight czy Java.

Dalsze czytanie na SmashingMag:

• Zapewnianie natywnego doświadczenia dzięki technologiom internetowym
• Tworzenie kompletnego wypełnienia dla elementu szczegółów HTML5
• Przewodnik dla początkujących po progresywnych aplikacjach internetowych
• Logo HTML5: co myślisz?

Jest to szczególnie ważne, ponieważ na przykład Google ogłosił usunięcie NPAPI (interfejsu API używanego przez te wtyczki), podobnie jak Firefox, a Microsoft opowiada się za przeglądaniem bez wtyczek. Chociaż ci dostawcy nadal oferują odtwarzacz Flash, prawdopodobnie to tylko kwestia czasu, zanim tego nie zrobią. Co więcej, przeglądarki na urządzeniach mobilnych są o krok dalej, ponieważ większość z nich nie obsługuje wtyczek i nie ma odtwarzacza Flash.

Przyjrzyjmy się niektórym z nowych elementów HTML5 i ich usprawnieniom w przypadku wideo:

• <canvas> udostępnia skrypty do renderowania wykresów, grafiki gier i nie tylko. Jest to czasami nazywane interfejsem API JavaScript Canvas. Element canvas może być również używany z WebGL do renderowania grafiki 2D i 3D przy użyciu GPU karty graficznej.
• <video> umożliwia natychmiastowe odtwarzanie wideo, co jest naprawdę niesamowite. To wreszcie sprawia, że ​​multimedia w sieci bez wtyczek stają się rzeczywistością. W rzeczywistości producenci przeglądarek wydają się zgadzać na jeden format — MPEG-4/H.264, który jest powszechnie obsługiwany we współczesnych przeglądarkach, z godnym uwagi wyjątkiem Opery Mini.
• <audio> umożliwia gotowe odtwarzanie treści audio na stronie internetowej. Podobnie jak w przypadku wideo, decyzję o obsługiwanych formatach kontenerów i kodekach pozostawia się dostawcom przeglądarek.
• <track> może być używany w przypadku ścieżek tekstowych o określonej godzinie, takich jak napisy i podpisy w filmie. Pliki WebVTT są obsługiwane po wyjęciu z pudełka.

Większość nowych elementów jest znana i używana od jakiegoś czasu w kodzie odtwarzacza wideo HTML5, ponieważ są one zaimplementowane we wszystkich nowoczesnych przeglądarkach. Specyfikacja jest stabilna. Mimo to W3C ma jeszcze wiele do zrobienia.

Dla mnie najważniejszym standardem, nad którym pracuje W3C, jest standard „Media Source Extensions” (MSE), który obecnie ma status „Rekomendacji kandydata”. Ten JavaScript API pozwala nam generować strumienie multimediów dla <video> , <audio> i innych elementów, umożliwiając adaptacyjne standardy przesyłania strumieniowego, takie jak MPEG-DASH w czystym HTML5 i JavaScript.

Innym ciekawym jest standard „Encrypted Media Extensions”, który umożliwia odtwarzanie chronionych treści w HTML5 i JavaScript. Jednak jest to obecnie „Wersja robocza” i jej sfinalizowanie zajmie trochę czasu.

Cieszymy się z nowego standardu i czekamy na czasy, kiedy nie będziemy potrzebować ani odtwarzacza Flash, ani wtyczki, kiedy multimedia będzie można oglądać na praktycznie każdym urządzeniu za pomocą jednej implementacji.

Dlaczego MPEG-DASH?

Przyjrzyjmy się formatowi przesyłania strumieniowego MPEG-DASH i dlaczego jest on używany w HTML5. MPEG-DASH (DASH jest skrótem od dynamicznego adaptacyjnego przesyłania strumieniowego przez HTTP) to międzynarodowy, niezależny od dostawcy standard ratyfikowany przez MPEG i ISO (ISO/IEC 23009-1). Poprzednie technologie adaptacyjnego przesyłania strumieniowego — takie jak Apple HLS, Microsoft Smooth Streaming i Adobe HDS — zostały wydane przez dostawców z ograniczoną obsługą serwerów strumieniowych niezależnych od dostawców lub klientów odtwarzania. Sytuacja zależna od dostawcy była wyraźnie niepożądana, dlatego organy normalizacyjne rozpoczęły proces harmonizacji, w wyniku którego w 2012 r. ratyfikowano MPEG-DASH.

Oto cele i zalety MPEG-DASH w skrócie:

• Zmniejsz opóźnienia uruchamiania, a także buforowanie i przestoje podczas odtwarzania wideo.
• Kontynuuj dostosowywanie się do sytuacji w zakresie przepustowości klienta.
• Użyj logiki przesyłania strumieniowego opartej na kliencie, aby zapewnić najwyższą skalowalność i elastyczność.
• Korzystaj z istniejących i ekonomicznych sieci CDN, serwerów proxy i pamięci podręcznych opartych na protokole HTTP.
• Skutecznie omijaj translacje NAT i zapory sieciowe za pomocą protokołu HTTP.
• Włącz wspólne szyfrowanie poprzez sygnalizację, dostarczanie i używanie wielu równoczesnych schematów DRM z tego samego pliku.
• Włącz proste łączenie i (kierowane) wstawianie reklam.
• Skutecznie wspieraj „tryb sztuczek”.
• I wiele więcej!

W ostatnich latach MPEG-DASH został zintegrowany z nowymi wysiłkami normalizacyjnymi — takimi jak HTML5 MSE, które umożliwiają odtwarzanie DASH za pomocą tagów video i audio HTML5, a także rozszerzenia HTML5 Encrypted Media Extensions, które umożliwiają odtwarzanie zabezpieczone DRM w przeglądarkach internetowych . Co więcej, ochrona DRM za pomocą MPEG-DASH jest zharmonizowana w różnych systemach z MPEG-CENC (dla wspólnego szyfrowania); a odtwarzanie MPEG-DASH na różnych platformach smart TV jest możliwe dzięki integracji z Hybrid Broadcast Broadband TV (HbbTV 1.5 i HbbTV 2.0).

Ponadto korzystanie ze standardu MPEG-DASH zostało uproszczone dzięki wysiłkom branżowym związanym z DASH Industry Forum i jego zaleceniami DASH-AVC/264, a także dzięki wybiegającym w przyszłość inicjatywom, takim jak zalecenie DASH-HEVC/265 dotyczące korzystania z H.265/HEVC w ramach MPEG-DASH.

Obecnie MPEG-DASH jest wdrażany coraz częściej, przyspieszony przez takie usługi jak Netflix i Google, które niedawno przeszły na ten nowy standard. Dzięki tym dwóm głównym źródłom ruchu MPEG-DASH stanowi już 50% całkowitego ruchu internetowego.

Jak działają MSE?

Przyjrzyjmy się teraz szczegółom MSE i sposobom ich wykorzystania przez programistów. MSE to specyfikacja, która rozszerza HTMLMediaElement , aby umożliwić JavaScriptowi dynamiczne tworzenie strumieni multimediów dla tagów audio i video . Nie było to możliwe wcześniej, ponieważ te tagi miały dostęp tylko do pełnych plików (tj. plików MP4). Takie podejście jest również nazywane progresywnym przesyłaniem strumieniowym lub progresywnym pobieraniem, ponieważ pliki multimedialne są pobierane i odtwarzane w tym samym czasie, co umożliwia pseudostrumieniowanie.

Jednak niesie to ze sobą słabą zdolność wyszukiwania i brak możliwości dostosowania jakości obrazu i dźwięku do sytuacji w zakresie przepustowości użytkownika. Konstruując strumienie multimediów w JavaScript jako dane wejściowe dla znaczników audio i video , programiści mogą teraz dynamicznie dostosowywać strumień multimediów do kontekstu użytkownika, poprawiając w ten sposób wrażenia strumieniowe.

Jak wspomniano, MPEG-DASH jest preferowanym formatem przesyłania strumieniowego dla MSE. Przyjrzyjmy się zatem krokom niezbędnym do zbudowania odtwarzacza wideo opartego na HTML5 MSE:

1. Pobierz i przeanalizuj plik manifestu — zwany MPD w MPEG-DASH — który opisuje szczegóły strumienia wideo, takie jak liczba poziomów jakości i rozdzielczości strumienia wideo, języki audio i napisy, a także nazwy segmentów multimedialnych i pliki na serwerze pochodzenia opartego na protokole HTTP lub CDN.
2. Oszacuj dostępną przepustowość na urządzeniu klienckim, wybierz odpowiednią jakość wideo, aby uzyskać strumieniowe przesyłanie bez bufora i pobierz segmenty multimediów w języku JavaScript.
3. Przekaż pobrane segmenty mediów do bufora MSE w JavaScript.
4. Dekoduj i renderuj wideo za pomocą tagu video , zwykle sprzętowego.

W ten sposób działają adaptacyjne odtwarzacze strumieniowe oparte na HTML5, używane przez Netflix i YouTube. Istnieją już dość dojrzałe rozwiązania, które ułatwiają programistom i dostawcom treści przejście na transmisję strumieniową z adaptacyjną szybkością transmisji bitów w HTML5, na przykład projekt open-source DASH-IF dash.js i odtwarzacz Bitdash HTML5.

Generowanie treści MPEG-DASH jest również proste i obsługiwane przez narzędzia typu open source, takie jak x264 i MP4Box, a także przez komercyjne usługi kodowania, takie jak Bitcodin

Jednak użycie MSE nie ogranicza się do MPEG-DASH. Coraz więcej projektów (w tym hls.js) i odtwarzaczy (w tym Bitdash) obsługuje format Apple HLS w HTML5 przy użyciu MSE. Robią to poprzez trans-multipleksowanie segmentów multimedialnych HLS — które są kontenerami MPEG2-TS — do podstawowego formatu plików multimedialnych ISO wymaganego przez HTML5 i MPEG-DASH.

Zaszyfrowane rozszerzenia multimediów dla DRM

Obecnie na rynku DRM zachodzą poważne zmiany, spowodowane rychłym spadkiem wtyczek NPAPI — takich jak Silverlight, co doprowadziło do rezygnacji z wiodącego systemu DRM, PlayReady — z Chrome i Firefox. To stawia prawie wszystkich dostawców treści premium w trudnej sytuacji, ponieważ będą musieli zmienić technologie i znaleźć przyszłościowe rozwiązanie.

Wydawcy mediów strumieniowych premium nie będą mogli polegać na PlayReady DRM firmy Microsoft, aby zabezpieczyć swoje treści w przeglądarkach Chrome i Firefox na komputerach PC i urządzeniach z systemem Android. Będą musieli ponownie ocenić swoją strategię ochrony treści i platformy przesyłania strumieniowego, a także znaleźć przyszłościowe rozwiązanie, a następnie wkrótce zmienić technologie.

Dla wielu dostawców treści MPEG-DASH stał się preferowaną technologią. Projekty DASH rozwijały się w coraz szybszym tempie, a MSE i Encrypted Media Extensions (EME) z Widevine DRM wydają się być najbardziej opłacalną alternatywą. Ponadto MPEG-CENC umożliwia obsługę oddzielnych systemów DRM z tylko jedną wersją chronionej zawartości, a EME są oparte na MSE dla zawartości opartej na MPEG-DASH.

Tak więc ta kombinacja różnych systemów DRM — na przykład Widevine Modular dla Chrome i Androida, Microsoft PlayReady dla Internet Explorera i Edge’a oraz Adobe Primetime dla Firefoksa — dla jednej wersji treści daje dostawcom treści dodatkową zachętę do przejścia na MPEG -DASH jako międzynarodowy standard, ze względu na jego elastyczność w zakresie przesyłania strumieniowego, DRM i CDN.

Obsługa przeglądarek dla MSE i EME

Po kilku latach powolnego wdrażania HTML5, a w szczególności MSE, przez dostawców przeglądarek, widzimy, że większość z nich go wspiera. Dotyczy to również EME, chociaż w tym przypadku każdy dostawca wybiera inny system DRM, a ekosystem jest nieco bardziej zróżnicowany.

Aby jednak dotrzeć do 99% użytkowników, musimy mieć konfigurację przesyłania strumieniowego wideo, która obsługuje również przeglądarki, które nie obsługują MSE, w szczególności starsze wersje przeglądarek i Safari na iOS. Stare przeglądarki można łatwo obsługiwać za pomocą odtwarzacza Flash, który może odtwarzać tę samą zawartość MPEG-DASH, która jest używana przez MSE, jak pokazano w odtwarzaczu Bitdash. Aby obsługiwać urządzenia z systemem iOS, musimy użyć formatu przesyłania strumieniowego firmy Apple, zwanego HLS, który Apple nakazuje dla HTML5. Otwarte standardy, takie jak MSE, nie są obsługiwane przez Apple, chociaż są obsługiwane w Safari w systemie OS X.

Poniższa tabela zawiera przegląd stanu obsługi MSE i EME w dzisiejszych przeglądarkach i platformach (dzięki uprzejmości Bitmovin):

Przyszłość wideo HTML5

Na rynek wkraczają nowe kodeki multimediów, dzięki którym kompresja wideo jest jeszcze bardziej wydajna, co jest szczególnie ważne w przypadku formatów wyższej jakości, takich jak 4K i UHD oraz przesyłania strumieniowego na urządzenia mobilne. Najpopularniejszym kodekiem jest HEVC/h.265 , który za kilka lat może być domyślnym kodekiem (jeśli sytuacja patentowa tego nie popsuje). Wykorzysta również wbudowane MSE przeglądarki do odtwarzania i użyje MPEG-DASH jako formatu przesyłania strumieniowego, co pokazuje elastyczność tego otwartego standardu.

Deweloperzy odtwarzaczy wideo muszą tylko wykonać kilka prostych adaptacji, takich jak zmiana atrybutu kodeka podczas tworzenia bufora źródłowego; a jeśli podstawowa przeglądarka obsługuje dekodowanie HEVC (najprawdopodobniej wykonywane przez dekoder sprzętowy), będziesz mógł oglądać strumienie HEVC MPEG-DASH w HTML5! Z powodzeniem przetestowaliśmy z przeglądarkami, takimi jak Microsoft Edge, które są wyposażone w obsługę HEVC. Ponadto Google ogłosił niedawno wsparcie w swojej przeglądarce Chromium.

Niemniej jednak HEVC nie jest jeszcze dostępny dla większości internetowych zasobów wideo i tylko kilka urządzeń jest w stanie go odkodować. I oczywiście nie jest to jedyny kodek w mieście. Otwarty i bezpłatny format kodowania wideo VP9 (następca VP8) ma na celu jeszcze lepszą wydajność kodowania i jest już obsługiwany przez popularne przeglądarki, takie jak Google Chrome i Microsoft Edge, a ten kodek jest również zgodny z MSE. Nie możemy jednak przewidzieć, które kodeki znajdą się w naszej codziennej rutynie przesyłania strumieniowego. Ale czy to VP8/9, AVC czy HEVC, MSE i MPEG-DASH są gotowe!

Nadchodzącym trendem jest wideo 360 stopni, które jest całkiem proste w użyciu w HTML5. Deweloperzy mogą skorzystać z adaptacyjnej obsługi strumieniowania MSE i po prostu dodać warstwę renderowania JavaScript lub WebGL, aby uzyskać 360-stopniowe wrażenia. Niedawno wygłosiłem wykład na ten temat i o tym, jak zbudować usługę podobną do Netflix dla wirtualnej rzeczywistości za pomocą HTML5, JavaScript, DASH i WebGL.

Wniosek

Mam nadzieję, że ten artykuł dał ci dobry przegląd stanu i przyszłości wideo w sieci. MSE i EME to duże kroki w kierunku ekosystemu otwartych standardów wideo w Internecie, zastępujące wtyczki takie jak Flash i Silverlight. Co więcej, HTML5 staje się popularny na platformach w dzisiejszym wieloplatformowym świecie, w tym w środowiskach stacjonarnych, mobilnych i smart TV.

Wraz ze standardami przesyłania strumieniowego, takimi jak MPEG-DASH, dostawcy treści mogą mieć ujednolicone rozwiązanie wideo na różnych platformach i urządzeniach . Mogą poprawić wrażenia użytkownika dzięki adaptacyjnym formatom przesyłania strumieniowego, które zapobiegają buforowaniu, skracają czas ładowania i zapewniają najlepszą możliwą jakość dla przepustowości każdego użytkownika i sytuacji urządzenia.