Extensii de sursă media HTML5: Aducerea video de producție pe web

În ultimul deceniu, plugin-uri precum Flash și Silverlight au permis un consum bogat de videoclipuri în browsere, alimentând servicii populare precum YouTube și Netflix. Cu toate acestea, această abordare s-a mutat către HTML5 în ultimii ani.

În urmă cu aproape doi ani, W3C a publicat recomandarea finală a specificației HTML5, care a venit cu un nou set de elemente HTML și API-uri, în special pentru video. Unele dintre ele vizează mai multă semantică în paginile web, dar nu introduc funcții noi. Alții extind posibilitățile web și sporesc posibilitățile pentru dezvoltatori fără a fi nevoie de plugin -uri precum Adobe Flash, Microsoft Silverlight sau Java.

Citiți suplimentare despre SmashingMag:

• Oferirea unei experiențe native cu tehnologii web
• Realizarea unei policompletare complete pentru elementul de detalii HTML5
• Un ghid pentru începători pentru aplicații web progresive
• Logo-ul HTML5: ce crezi?

Acest lucru este deosebit de important pentru că, de exemplu, Google a anunțat eliminarea NPAPI (un API folosit de aceste pluginuri), la fel ca și Firefox, iar Microsoft pledează pentru navigarea fără pluginuri. Deși acești furnizori încă oferă un player Flash, probabil că este doar o chestiune de timp până când nu o fac. În plus, browserele de pe dispozitivele mobile sunt cu un pas dincolo, deoarece majoritatea nu acceptă pluginuri și nu au Flash player.

Să ne uităm la câteva dintre noile elemente HTML5 și la ce îmbunătățesc acestea pentru videoclipuri:

• <canvas> oferă scripturi pentru a reda grafice, grafice de joc și multe altele. Aceasta este uneori denumită API-ul JavaScript Canvas. Elementul canvas poate fi folosit și cu WebGL pentru a reda grafică 2D și 3D, folosind GPU-ul plăcii grafice.
• <video> permite redarea imediată a videoclipurilor, ceea ce este cu adevărat minunat. Acest lucru face, în sfârșit, conținut multimedia fără plugin pe web o realitate. De fapt, furnizorii de browsere par să fie de acord asupra unui singur format – MPEG-4/H.264, care este acceptat universal în browserele moderne, cu o excepție notabilă a Opera Mini.
• <audio> permite redarea imediată a conținutului audio pe o pagină web. La fel ca și în cazul videoclipurilor, decizia privind formatele de containere și codecurile care trebuie acceptate este lăsată la latitudinea furnizorilor de browsere.
• <track> poate fi folosit pentru melodii de text temporizate, cum ar fi subtitrări și subtitrări dintr-un videoclip. Fișierele WebVTT sunt acceptate imediat.

Cele mai multe dintre elementele noi sunt cunoscute și folosite de ceva vreme în codul de player video HTML5, deoarece sunt implementate în toate browserele moderne. Specificația este stabilă. Totuși, W3C mai are mult de lucru.

Pentru mine, cel mai important standard la care lucrează W3C este standardul „Media Source Extensions” (MSE), care are în prezent statutul de „Recomandare candidată”. Acest API JavaScript ne permite să generăm fluxuri media pentru <video> , <audio> și alte elemente, permițând standarde de streaming adaptive, cum ar fi MPEG-DASH în pur HTML5 și JavaScript.

Un altul interesant este standardul „Extensii media criptate”, care permite redarea conținutului protejat în HTML5 și JavaScript. Cu toate acestea, aceasta este în prezent o „schiță de lucru” și va dura ceva timp pentru a finaliza.

Salutăm noul standard și așteptăm cu nerăbdare momentul în care nu avem nevoie de un player Flash sau plugin, când multimedia poate fi vizualizată pe aproape orice dispozitiv cu o singură implementare.

De ce MPEG-DASH?

Să ne uităm la formatul de streaming MPEG-DASH și de ce este folosit în HTML5. MPEG-DASH (DASH fiind prescurtarea pentru streaming adaptiv dinamic prin HTTP) este un standard internațional, independent de furnizor, ratificat de MPEG și ISO (ISO/IEC 23009-1). Tehnologiile de streaming adaptive anterioare – cum ar fi Apple HLS, Microsoft Smooth Streaming și Adobe HDS – au fost lansate de furnizori cu suport limitat pentru servere de streaming independente de furnizor sau pentru clienții de redare. O situație dependentă de furnizor nu era în mod clar de dorit, astfel încât organismele de standardizare au început un proces de armonizare, care a dus la ratificarea MPEG-DASH în 2012.

Acestea sunt obiectivele și beneficiile MPEG-DASH pe scurt:

• Reduceți întârzierile de pornire, precum și stocarea tampon și blocările în timpul redării videoclipurilor.
• Continuați adaptarea la situația lățimii de bandă a clientului.
• Utilizați logica de streaming bazată pe client pentru a permite cea mai mare scalabilitate și flexibilitate.
• Utilizați CDN-uri, proxy și cache-uri bazate pe HTTP existente și rentabile.
• Ocoliți eficient NAT-urile și firewall-urile prin utilizarea HTTP.
• Activați criptarea comună prin semnalizarea, livrarea și utilizarea mai multor scheme DRM concurente din același fișier.
• Activați îmbinarea simplă și inserarea (direcționată) a anunțurilor.
• Sprijină eficient „modul truc”.
• Și mult mai mult!

În ultimii ani, MPEG-DASH a fost integrat în noi eforturi de standardizare - cum ar fi HTML5 MSE, care permit redarea DASH prin etichetele video și audio ale HTML5, precum și HTML5 Encrypted Media Extensions, care permit redarea protejată prin DRM în browserele web. . În plus, protecția DRM cu MPEG-DASH este armonizată în diferite sisteme cu MPEG-CENC (pentru criptare comună); iar redarea MPEG-DASH pe diferite platforme smart TV este activată prin integrarea cu Hybrid Broadcast Broadband TV (HbbTV 1.5 și HbbTV 2.0).

De asemenea, utilizarea standardului MPEG-DASH a fost simplificată prin eforturile industriei în jurul Forumului industriei DASH și recomandărilor sale DASH-AVC/264, precum și prin inițiative de perspectivă, cum ar fi recomandarea DASH-HEVC/265 privind utilizarea H.265/HEVC în MPEG-DASH.

Astăzi, MPEG-DASH este implementat din ce în ce mai mult, accelerat de servicii precum Netflix și Google, care au trecut recent la acest nou standard. Cu aceste două surse majore de trafic, MPEG-DASH reprezintă deja 50% din traficul total de Internet.

Cum funcționează MME-urile?

Acum să analizăm detaliile MSE-urilor și cum pot fi utilizate de dezvoltatori. MSE-urile sunt o specificație care extinde HTMLMediaElement pentru a permite JavaScript să construiască în mod dinamic fluxuri media pentru etichete audio și video . Acest lucru nu a fost posibil înainte, deoarece aceste etichete au putut accesa doar fișiere complete (adică fișiere MP4). Această abordare mai este numită și streaming progresiv sau descărcare progresivă, deoarece fișierele media sunt descărcate și redate în același timp, permițând pseudo-streaming-ul.

Cu toate acestea, acest lucru aduce cu sine o capacitate slabă de căutare și nicio posibilitate de a adapta calitatea video și audio la situația lățimii de bandă a utilizatorului. Prin construirea fluxurilor media în JavaScript ca intrări pentru etichetele audio și video , dezvoltatorii pot acum adapta dinamic un flux media la contextul utilizatorului, îmbunătățind astfel experiența de streaming.

După cum am menționat, MPEG-DASH este formatul de streaming preferat pentru MSE. Deci, să ne uităm la pașii necesari pentru a construi un player video bazat pe HTML5 MSE:

1. Descărcați și analizați fișierul manifest - numit MPD în MPEG-DASH - care descrie detaliile fluxului video, cum ar fi numărul de niveluri de calitate și rezoluții ale fluxului video, limbile audio și subtitrări, precum și numele segmentelor media și fișiere pe serverul de origine bazat pe HTTP sau CDN.
2. Estimați lățimea de bandă disponibilă pe dispozitivul client, alegeți calitatea video adecvată pentru a obține streaming fără buffer și descărcați segmentele media în JavaScript.
3. Predați segmentele media descărcate în memoria tampon MSE în JavaScript.
4. Decodați și redați videoclipul prin eticheta video , de obicei în hardware.

Acesta este modul în care funcționează playerele de streaming adaptive bazate pe HTML5, așa cum sunt utilizate de Netflix și YouTube. Există deja soluții destul de mature, ceea ce face mai ușor pentru dezvoltatori și furnizori de conținut să treacă la fluxul de biți adaptiv în HTML5, cum ar fi proiectul open-source DASH-IF dash.js și playerul Bitdash HTML5.

Generarea de conținut MPEG-DASH este, de asemenea, simplă și susținută de instrumente open-source, cum ar fi x264 și MP4Box, precum și de servicii comerciale de codificare, cum ar fi Bitcodin

Cu toate acestea, utilizarea MSE-urilor nu se limitează la MPEG-DASH. Din ce în ce mai multe proiecte (inclusiv hls.js) și jucători (inclusiv Bitdash) acceptă formatul HLS Apple în HTML5 folosind MSE. Ei fac acest lucru prin trans-multiplexarea segmentelor media HLS - care sunt containere MPEG2-TS - la formatul de fișier media de bază ISO cerut de HTML5 și MPEG-DASH.

Extensii media criptate pentru DRM

Schimbări majore au loc în prezent pe piața DRM, cauzate de scăderea iminentă a pluginurilor NPAPI - cum ar fi Silverlight, care a dus la căderea principalului sistem DRM, PlayReady - din Chrome și Firefox. Acest lucru îi pune aproape pe toți furnizorii de conținut premium într-o situație dificilă, deoarece vor trebui să schimbe tehnologiile și să găsească o soluție pentru viitor.

Editorii media de streaming premium nu se vor putea baza pe PlayReady DRM de la Microsoft pentru a-și asigura conținutul în Chrome și Firefox pe PC și dispozitive Android. Ei vor trebui să-și reevalueze protecția conținutului și strategia platformei de streaming și vor trebui să găsească o soluție pe viitor și apoi să schimbe tehnologiile în scurt timp.

Pentru mulți furnizori de conținut, MPEG-DASH a apărut ca tehnologia preferată. Proiectele DASH s-au derulat într-un ritm accelerat, iar MSE-urile și extensiile media criptate (EME) cu Widevine DRM par a fi cea mai viabilă alternativă. De asemenea, MPEG-CENC face posibilă suportarea sistemelor DRM separate cu o singură versiune de conținut protejat, iar EME-urile se bazează pe MSE-urile pentru conținut bazat pe MPEG-DASH.

Așadar, această combinație de sisteme DRM diferite - de exemplu, Widevine Modular pentru Chrome și Android, Microsoft PlayReady pentru Internet Explorer și Edge și Adobe Primetime pentru Firefox - pentru o singură versiune a unei piese de conținut oferă furnizorilor de conținut un stimulent suplimentar pentru a trece la MPEG -DASH ca standard internațional, având în vedere flexibilitatea sa cu streaming, DRM și CDN-uri.

Suport pentru browser pentru MSE și EME

După câțiva ani de adoptare lentă de către furnizorii de browsere a HTML5 și MSE-urile în special, acum vedem că majoritatea acestora îl susțin. Acest lucru este valabil și pentru EME-uri, deși în acest caz fiecare furnizor optează pentru un sistem DRM diferit, iar ecosistemul este puțin mai diferențiat.

Cu toate acestea, pentru a ajunge la 99% dintre utilizatori, trebuie să avem o configurație de streaming video care acceptă și browsere care nu acceptă MSE-urile, în special versiunile vechi de browser și Safari pe iOS. Browserele vechi pot fi servite cu ușurință folosind un player bazat pe Flash, care poate reda același conținut MPEG-DASH care este utilizat de către MSE, așa cum arată playerul Bitdash. Pentru a suporta dispozitivele iOS, trebuie să folosim formatul de streaming Apple, numit HLS, pe care Apple îl impune pentru HTML5. Standardele deschise, cum ar fi MSE-urile, nu sunt acceptate de Apple, deși sunt acceptate pe Safari pe OS X.

Următoarea matrice oferă o imagine de ansamblu asupra stării asistenței MSE și EME în browsere și platforme de astăzi (familie Bitmovin):

Viitorul video HTML5

Noile codecuri media apar pe piață, făcând compresia video și mai eficientă, ceea ce este deosebit de important pentru formatele de calitate superioară, cum ar fi 4K și UHD și pentru streaming pe dispozitive mobile. Cel mai obișnuit codec este HEVC/h.265 , care ar putea fi codec-ul implicit peste câțiva ani de acum înainte (dacă situația brevetului nu încurcă asta). Și va folosi, de asemenea, MSE-urile încorporate în browser pentru redare și va folosi MPEG-DASH ca format de streaming, ceea ce arată flexibilitatea acestui standard deschis.

Dezvoltatorii de playere video trebuie doar să efectueze câteva adaptări simple, cum ar fi schimbarea atributului codecului atunci când creează SourceBuffer; și, dacă browserul de bază acceptă decodarea HEVC (cel mai probabil realizată de un decodor hardware), atunci veți putea urmări fluxurile dvs. HEVC MPEG-DASH în HTML5! Am testat cu succes cu browsere, cum ar fi Microsoft Edge, care vine cu suport HEVC. De asemenea, Google a anunțat recent suport în browserul său Chromium.

Cu toate acestea, HEVC nu este încă disponibil pentru marea majoritate a activelor video de pe Internet și doar câteva dispozitive sunt capabile să-l decode. Și, desigur, nu este singurul codec din oraș. Formatul de codificare video deschis și fără drepturi de autor VP9 (succesorul VP8) își propune să aibă o eficiență de codificare și mai bună și este deja acceptat de browsere populare precum Google Chrome și Microsoft Edge, iar acest codec este compatibil și cu MSE. Cu toate acestea, nu putem prevedea ce codecuri își vor găsi drumul în rutina noastră zilnică de streaming. Dar fie că este vorba de VP8/9, AVC sau HEVC, MSE-urile și MPEG-DASH sunt gata!

O tendință viitoare este videoclipul la 360 de grade, care este destul de simplu de utilizat în HTML5. Dezvoltatorii ar putea folosi suportul adaptiv de streaming al MSE-urilor și doar să adauge un strat de redare JavaScript sau WebGL pentru o experiență de 360 ​​de grade pe deasupra. Recent, am ținut o discuție despre acest subiect și despre cum să construiți un serviciu asemănător Netflix pentru realitate virtuală folosind HTML5, JavaScript, DASH și WebGL.

Concluzie

Sper că acest articol v-a oferit o imagine de ansamblu bună asupra stării și viitorului video-ului de pe web. MSE-urile și EME-urile sunt pași mari către un ecosistem de standarde deschise pentru video pe web, înlocuind pluginuri precum Flash și Silverlight. În plus, HTML5 ajunge pe platformele preferate în lumea multi-platformă de astăzi, inclusiv medii desktop, mobile și smart TV.

Alături de standardele de streaming precum MPEG-DASH, furnizorii de conținut pot avea o soluție video unificată pe platforme și dispozitive . Acestea pot îmbunătăți experiența utilizatorului prin formate de streaming adaptive, care împiedică stocarea în buffer, reduc timpii de încărcare și oferă cea mai bună calitate posibilă pentru lățimea de bandă și situația dispozitivului fiecărui utilizator.