Estensioni delle sorgenti multimediali HTML5: portare i video di produzione sul Web

Nell'ultimo decennio, plug-in come Flash e Silverlight hanno consentito un ampio consumo di video nei browser, alimentando servizi popolari come YouTube e Netflix. Tuttavia, questo approccio si è spostato verso HTML5 negli ultimi anni.

Quasi due anni fa, il W3C ha pubblicato la raccomandazione finale delle specifiche HTML5, che includeva un nuovo set di elementi HTML e API, specialmente per i video. Alcuni di loro mirano a una maggiore semantica nelle pagine Web ma non introducono nuove funzionalità. Altri estendono le possibilità del Web e migliorano le possibilità per gli sviluppatori senza la necessità di plug- in come Adobe Flash, Microsoft Silverlight o Java.

Ulteriori letture su SmashingMag:

• Fornire un'esperienza nativa con le tecnologie Web
• Realizzazione di un Polyfill completo per l'elemento Dettagli HTML5
• Una guida per principianti alle app Web progressive
• Il logo HTML5: cosa ne pensi?

Ciò è particolarmente importante perché, ad esempio, Google ha annunciato la rimozione di NPAPI (un'API utilizzata da questi plug-in), così come Firefox, e Microsoft sostiene la navigazione senza plug-in. Sebbene questi fornitori forniscano ancora un lettore Flash, è probabilmente solo questione di tempo prima che non lo facciano. Inoltre, i browser sui dispositivi mobili sono un passo avanti perché la maggior parte di essi non supporta i plug-in e non dispone di Flash Player.

Diamo un'occhiata ad alcuni dei nuovi elementi HTML5 e cosa migliorano per i video:

• <canvas> fornisce script per il rendering di grafici, grafica di giochi e altro. Questo è talvolta indicato come l'API JavaScript Canvas. L'elemento canvas può essere utilizzato anche con WebGL per eseguire il rendering di grafica 2D e 3D, utilizzando la GPU della scheda grafica.
• <video> consente la riproduzione immediata di video, il che è davvero fantastico. Questo rende finalmente i contenuti multimediali senza plug-in sul Web una realtà. In effetti, i fornitori di browser sembrano concordare su un unico formato: MPEG-4/H.264, che è universalmente supportato nei browser moderni, con una notevole eccezione di Opera Mini.
• <audio> consente la riproduzione immediata di contenuti audio su una pagina web. Come per il video, la decisione di quali formati contenitore e codec supportare è lasciata ai fornitori di browser.
• <track> può essere utilizzato per tracce di testo a tempo, come sottotitoli e didascalie in un video. I file WebVTT sono supportati immediatamente.

La maggior parte dei nuovi elementi è nota e utilizzata da tempo nel codice del lettore video HTML5 perché sono implementati in tutti i browser moderni. La specifica è stabile. Tuttavia, il W3C ha ancora molto lavoro da fare.

Per me, lo standard più importante su cui sta lavorando il W3C è lo standard "Media Source Extensions" (MSEs), che attualmente ha lo stato di "Raccomandazione candidato". Questa API JavaScript ci consente di generare flussi multimediali per <video> , <audio> e altri elementi, consentendo standard di streaming adattivi come MPEG-DASH in puro HTML5 e JavaScript.

Un altro interessante è lo standard "Encrypted Media Extensions", che consente la riproduzione di contenuti protetti in HTML5 e JavaScript. Tuttavia, questa è attualmente una "bozza di lavoro" e richiederà del tempo per essere finalizzata.

Accogliamo con favore il nuovo standard e attendiamo con impazienza il momento in cui non avremo bisogno di un lettore o plug-in Flash, in cui i contenuti multimediali possono essere visualizzati praticamente su qualsiasi dispositivo con un'unica implementazione.

Perché MPEG-DASH?

Diamo un'occhiata al formato di streaming MPEG-DASH e perché viene utilizzato in HTML5. MPEG-DASH (il DASH è l'abbreviazione di streaming adattivo dinamico su HTTP) è uno standard internazionale, indipendente dal fornitore, ratificato da MPEG e ISO (ISO/IEC 23009-1). Le precedenti tecnologie di streaming adattivo, come Apple HLS, Microsoft Smooth Streaming e Adobe HDS, sono state rilasciate da fornitori con supporto limitato per server di streaming indipendenti dal fornitore o per client di riproduzione. Una situazione dipendente dal fornitore non era chiaramente auspicabile e quindi gli organismi di standardizzazione hanno avviato un processo di armonizzazione, che ha portato alla ratifica di MPEG-DASH nel 2012.

Questi sono gli obiettivi e i vantaggi di MPEG-DASH in breve:

• Riduci i ritardi di avvio, il buffering e gli stalli durante la riproduzione video.
• Continuare l'adattamento alla situazione della larghezza di banda del cliente.
• Usa la logica di streaming basata su client per abilitare la massima scalabilità e flessibilità.
• Utilizza CDN, proxy e cache esistenti e convenienti basati su HTTP.
• Bypassa in modo efficiente NAT e firewall attraverso l'uso di HTTP.
• Abilita la crittografia comune attraverso la segnalazione, la consegna e l'uso di più schemi DRM simultanei dallo stesso file.
• Abilita la semplice giunzione e l'inserimento di annunci (mirati).
• Supporta la "modalità trucco" in modo efficiente.
• E altro ancora!

Negli ultimi anni, MPEG-DASH è stato integrato in nuovi sforzi di standardizzazione, come gli MSE HTML5, che consentono la riproduzione di DASH tramite i tag video e audio di HTML5, nonché le estensioni multimediali crittografate HTML5, che consentono la riproduzione protetta da DRM nei browser Web . Inoltre, la protezione DRM con MPEG-DASH è armonizzata su diversi sistemi con MPEG-CENC (per crittografia comune); e la riproduzione MPEG-DASH su diverse piattaforme smart TV è abilitata tramite l'integrazione con Hybrid Broadcast Broadband TV (HbbTV 1.5 e HbbTV 2.0).

Inoltre, l'utilizzo dello standard MPEG-DASH è stato semplificato dagli sforzi del settore attorno al DASH Industry Forum e dalle sue raccomandazioni DASH-AVC/264, nonché da iniziative lungimiranti come la raccomandazione DASH-HEVC/265 sull'utilizzo di H.265/HEVC all'interno di MPEG-DASH.

Oggi, MPEG-DASH viene distribuito sempre di più, accelerato da servizi come Netflix e Google, che sono passati di recente a questo nuovo standard. Con queste due principali fonti di traffico, MPEG-DASH rappresenta già il 50% del traffico Internet totale.

Come funzionano gli MSE?

Ora esaminiamo i dettagli degli MSE e come possono essere utilizzati dagli sviluppatori. Le MSE sono una specifica che estendono HTMLMediaElement per consentire a JavaScript di costruire dinamicamente flussi multimediali per tag audio e video . Questo non era possibile prima perché questi tag erano in grado di accedere solo a file completi (es. file MP4). Questo approccio è anche chiamato streaming progressivo, o download progressivo, perché i file multimediali vengono scaricati e riprodotti contemporaneamente, consentendo lo pseudo-streaming.

Tuttavia, ciò comporta una scarsa capacità di ricerca e nessuna possibilità di adattare la qualità video e audio alla situazione della larghezza di banda dell'utente. Costruendo flussi multimediali in JavaScript come input per i tag audio e video , gli sviluppatori possono ora adattare dinamicamente un flusso multimediale al contesto dell'utente, migliorando così l'esperienza di streaming.

Come accennato, MPEG-DASH è il formato di streaming preferito dagli MSE. Quindi, diamo un'occhiata ai passaggi necessari per creare un lettore video basato su HTML5 MSE:

1. Scarica e analizza il file manifest, chiamato MPD in MPEG-DASH, che descrive i dettagli del flusso video, come il numero dei livelli di qualità e delle risoluzioni del flusso video, le lingue audio e i sottotitoli, nonché il nome dei segmenti multimediali e file sul server di origine basato su HTTP o CDN.
2. Stima la larghezza di banda disponibile sul dispositivo client, scegli la qualità video appropriata per ottenere uno streaming senza buffer e scarica i segmenti multimediali in JavaScript.
3. Consegna i segmenti multimediali scaricati al buffer MSE in JavaScript.
4. Decodifica e renderizza il video tramite il tag video , in genere nell'hardware.

Ecco come funzionano i lettori di streaming adattivi basati su HTML5, utilizzati da Netflix e YouTube. Esistono già soluzioni abbastanza mature, che consentono agli sviluppatori e ai fornitori di contenuti di passare facilmente allo streaming adattivo del bitrate in HTML5, come il progetto open source DASH-IF dash.js e il lettore Bitdash HTML5.

Anche la generazione di contenuti MPEG-DASH è semplice e supportata da strumenti open source come x264 e MP4Box, nonché da servizi di codifica commerciale come Bitcodin

Tuttavia, l'uso degli MSE non è limitato a MPEG-DASH. Sempre più progetti (incluso hls.js) e lettori (incluso Bitdash) supportano il formato HLS di Apple in HTML5 utilizzando gli MSE. Lo fanno trans-multiplexing dei segmenti multimediali HLS, che sono contenitori MPEG2-TS, nel formato file multimediale di base ISO richiesto da HTML5 e MPEG-DASH.

Estensioni multimediali crittografate per DRM

Sono attualmente in corso importanti cambiamenti nel mercato DRM, causati dall'imminente calo dei plug-in NPAPI, come Silverlight, che ha portato all'abbandono del principale sistema DRM, PlayReady, da Chrome e Firefox. Questo mette quasi tutti i fornitori di contenuti premium in una situazione difficile perché dovranno cambiare tecnologia e trovare una soluzione a prova di futuro.

Gli editori di contenuti multimediali in streaming premium non potranno fare affidamento sul DRM PlayReady di Microsoft per proteggere i propri contenuti in Chrome e Firefox su PC e dispositivi Android. Dovranno rivalutare la loro protezione dei contenuti e la strategia della piattaforma di streaming e dovranno trovare una soluzione a prova di futuro e quindi cambiare tecnologia a breve.

Per molti fornitori di contenuti, MPEG-DASH è emersa come la tecnologia preferita. I progetti DASH sono stati lanciati a un ritmo accelerato e MSE e Encrypted Media Extensions (EME) con Widevine DRM sembrano essere l'alternativa più praticabile. Inoltre, MPEG-CENC consente di supportare sistemi DRM separati con una sola versione di contenuto protetto e gli EME si basano sugli MSE per i contenuti basati su MPEG-DASH.

Quindi, questa combinazione di diversi sistemi DRM, ad esempio Widevine Modular per Chrome e Android, Microsoft PlayReady per Internet Explorer ed Edge e Adobe Primetime per Firefox, per una versione di un contenuto offre ai fornitori di contenuti un ulteriore incentivo a passare all'MPEG -DASH come standard internazionale, data la sua flessibilità con streaming, DRM e CDN.

Supporto browser per MSE ed EME

Dopo un paio d'anni di lenta adozione da parte dei fornitori di browser di HTML5 e MSE in particolare, ora vediamo che la maggior parte di loro lo supporta. Questo vale anche per le EME, anche se in questo caso ogni fornitore sceglie un sistema DRM diverso e l'ecosistema è un po' più differenziato.

Tuttavia, per raggiungere il 99% degli utenti, dobbiamo avere una configurazione di streaming video che supporti anche i browser che non supportano gli MSE, in particolare le vecchie versioni dei browser e Safari su iOS. I vecchi browser possono essere serviti facilmente utilizzando un lettore basato su Flash, che può riprodurre lo stesso contenuto MPEG-DASH utilizzato dagli MSE, come mostrato dal lettore Bitdash. Per supportare i dispositivi iOS, dobbiamo utilizzare il formato di streaming di Apple, chiamato HLS, che Apple sta imponendo per HTML5. Gli standard aperti come gli MSE non sono supportati da Apple, sebbene siano supportati su Safari su OS X.

La seguente matrice offre una panoramica dello stato del supporto MSE ed EME su browser e piattaforme oggi (per gentile concessione di Bitmovin):

Il futuro del video HTML5

Nuovi codec multimediali stanno entrando nel mercato, rendendo la compressione video ancora più efficiente, il che è particolarmente importante per formati di qualità superiore come 4K e UHD e per lo streaming su dispositivi mobili. Il codec più comune è HEVC/h.265 , che potrebbe essere il codec predefinito tra un paio d'anni (se la situazione dei brevetti non lo rovina). Inoltre, utilizzerà gli MSE integrati nel browser per la riproduzione e utilizzerà MPEG-DASH come formato di streaming, il che dimostra la flessibilità di questo standard aperto.

Gli sviluppatori di lettori video devono solo eseguire alcuni semplici adattamenti, come modificare l'attributo del codec durante la creazione di SourceBuffer; e, se il browser sottostante supporta la decodifica HEVC (molto probabilmente eseguita da un decoder hardware), sarai in grado di guardare i tuoi flussi MPEG-DASH HEVC in HTML5! Abbiamo testato con successo con browser, come Microsoft Edge, che viene fornito con il supporto HEVC. Inoltre, Google ha recentemente annunciato il supporto nel suo browser Chromium.

Tuttavia, HEVC non è ancora disponibile per la stragrande maggioranza delle risorse video Internet e solo pochi dispositivi sono in grado di decodificarlo. E, naturalmente, non è l'unico codec in città. Il formato di codifica video aperto e privo di royalty VP9 (il successore di VP8) mira ad avere un'efficienza di codifica ancora migliore ed è già supportato dai browser più diffusi come Google Chrome e Microsoft Edge, e questo codec è compatibile anche con MSE. Tuttavia, non possiamo prevedere quali codec troveranno la loro strada nella nostra routine di streaming quotidiana. Ma che si tratti di VP8/9, AVC o HEVC, gli MSE e MPEG-DASH sono pronti!

Una tendenza imminente è il video a 360 gradi, che è piuttosto semplice da usare in HTML5. Gli sviluppatori possono utilizzare il supporto per lo streaming adattivo degli MSE e aggiungere semplicemente un livello di rendering JavaScript o WebGL per un'esperienza a 360 gradi. Di recente, ho tenuto un discorso su questo argomento e su come costruire un servizio simile a Netflix per la realtà virtuale utilizzando HTML5, JavaScript, DASH e WebGL.

Conclusione

Spero che questo articolo ti abbia fornito una buona panoramica dello stato e del futuro dei video sul web. Gli MSE e gli EME sono grandi passi avanti verso un ecosistema di standard aperti per i video sul web, che sostituiscono plug-in come Flash e Silverlight. Inoltre, HTML5 sta diventando le piattaforme preferite nel mondo multipiattaforma di oggi, inclusi gli ambienti desktop, mobili e smart TV.

Insieme agli standard di streaming come MPEG-DASH, i fornitori di contenuti possono disporre di una soluzione video unificata su piattaforme e dispositivi . Possono migliorare l'esperienza dell'utente attraverso formati di streaming adattivi, che impediscono il buffering, riducono i tempi di caricamento e forniscono la migliore qualità possibile per la larghezza di banda di ciascun utente e la situazione del dispositivo.