Esistono diversi modi per aggiungere elementi multimediali a una pagina web. In precedenza hai imparato a
utilizzare il tag <video> standard. Questo articolo fornisce informazioni su alcuni dei framework multimediali (o librerie) disponibili per estendere o sostituire il comportamento del video player HTML5 predefinito.
Sono disponibili sia nella varietà proprietaria che open source e, al loro interno, sono un insieme di API che supportano la riproduzione audio e/o video per vari formati di container e protocolli di trasmissione. Un buon framework ha un'architettura modulare e fornisce una documentazione chiara e dettagliata. Idealmente, dovrebbe anche essere relativamente facile da configurare e utilizzare. Forse ti chiederai: "Se il video player HTML5 offre già la maggior parte delle funzionalità, perché dovrei utilizzare un framework o una libreria?". Ottima domanda. Approfondiamo.
Vantaggi dell'utilizzo di un framework
Nella maggior parte delle situazioni che non servono a una pagina web di base, è consigliabile utilizzare un framework multimediale per pubblicare i contenuti. A meno che tu non sia in grado di sviluppare e gestire un ricco set di funzionalità come riproduzione offline, streaming, analisi, Picture in picture, miniature di anteprima, incorporamento e monetizzazione, come l'ottimizzazione del tasso di riempimento, la pianificazione degli annunci o l'header bidding, probabilmente dovresti trasferire questa complessità a una soluzione esistente.
È qui che entrano in gioco i framework media. Ti forniscono un insieme di funzionalità e condizioni in cui puoi utilizzarle, dopodiché devi decidere il framework più adatto al tuo progetto. Nel prossimo articolo parleremo di come abbiamo creato una PWA con flussi offline che implementa diverse funzionalità complesse. Spoiler: è stato impegnativo e non è ancora una soluzione pronta per la produzione. Risparmiati il mal di testa e usa una struttura.
Esistono molte opzioni tra cui scegliere, per il momento questo articolo concentra su tre, ovvero Shaka Player, JW Player e Video.js.
Suonatore di Shaka
Secondo la documentazione, Shaka Player di Google è una libreria JavaScript open source per contenuti multimediali adattivi. Riproduce formati multimediali adattivi (come DASH e HLS) in un browser senza utilizzare plug-in. Shaka Player utilizza invece gli standard web aperti MediaSource Extensions e Encrypted Media Extensions.
Shaka Player supporta anche l'archiviazione e la riproduzione offline di contenuti multimediali utilizzando IndexedDB. I contenuti possono essere memorizzati su qualsiasi browser. L'archiviazione delle licenze dipende dal supporto del browser.
Puoi trovare indicazioni sull'utilizzo di base sul sito della documentazione relativa a Shaka Player. In poche parole, per utilizzare Shaka Player, devi prima creare una pagina HTML con un elemento video o audio. Quindi, nel codice JavaScript dell'applicazione, installa i polyfill e verifica il supporto del browser. Una volta che il browser ha confermato il supporto per Shaka Player, uno script creerà un oggetto Player che aggrega l'elemento multimediale, rimane in ascolto degli errori, quindi carica un file manifest. Shaka Player ne farà il posto.
Con Shaka dovrai ospitare e codificare personalmente i file multimediali. La creazione di un server multimediale non è eccessivamente complessa, tuttavia la codifica/transcodifica dei contenuti multimediali può richiedere molto tempo e risultare complessa. È probabile che tu voglia trasferire questa parte a un servizio come Zencoder, Amazon Elastic Encoder o API Google Transcoder per automatizzare le attività ripetitive e velocizzare il processo.
L'aspetto migliore di Shaka Player è che c'è anche uno strumento davvero fantastico e l'SDK di pacchetti multimediali per la pacchettizzazione e la crittografia DASH e HLS, chiamato Shaka Packager. Può preparare e pacchettizzare contenuti multimediali per lo streaming online, di cui hai parlato in precedenza in Conversione di contenuti multimediali e Crittografia dei contenuti multimediali.
JW Player
Se stai cercando un'opzione che fornisca servizi di hosting e codifica/transcodifica, potresti prendere in considerazione JW Player, ma tieni presente che JW Player è un software proprietario. In altre parole, non hai molto controllo sulla piattaforma o sulla mappa stradale. Esiste una versione senza costi di base in cui i video sono visualizzati con una filigrana e una versione commerciale.
JW Player supporta lo streaming con MPEG-DASH (solo versione a pagamento), la gestione dei diritti digitali (DRM) (con Vualto), la pubblicità interattiva, la personalizzazione dell'interfaccia e gli incorporamenti. Esiste un'API e un SDK ben documentati. Tuttavia, se sei alla ricerca di un modo rapido e senza costi per ospitare i tuoi contenuti multimediali, l'incorporamento dei video di YouTube in genere è la soluzione migliore.
Video.js
Secondo il suo sito web, Video.js è realizzato interamente per un ambiente HTML5. Supporta video HTML5 e formati di streaming moderni, come DASH e HLS, nonché YouTube e Vimeo. Supporta la riproduzione di video su computer e dispositivi mobili e ha un aspetto uniforme ovunque con le skin basate su CSS.
Esistono diversi modi per utilizzare Video.js, ma il più semplice è utilizzare la versione CDN senza costi fornita da Fastly. Puoi scoprire di più su come configurare il player nella pagina Per iniziare. Video.js è un video player molto potente. Analogamente a Shaka Player, dovrai anche ospitare e codificare il video. Tuttavia, una differenza è nel sistema di plug-in, in cui si possono, ad esempio, riprodurre video di YouTube nel player Video.js, il che può essere personalizzato.
Altri framework
Ci sono molti framework e librerie diversi, ma questo articolo si limita a evidenziare ciò che c'è in giro. Quando scegli un framework, devi considerare le funzionalità di cui hai bisogno per il progetto e come prevedi di ospitare e codificare o transcodificare i tuoi contenuti multimediali. Hai bisogno di annunci pre-roll o di altre strategie di monetizzazione? I tuoi contenuti multimediali saranno disponibili offline? Quanto è grande o piccolo il tuo budget? o per altre considerazioni. Fai le tue ricerche e chiedi suggerimenti alle persone nella tua rete. Esistono decine di altre ottime opzioni e, prima di fare qualsiasi scelta, prenditi del tempo per sceglierne quella adatta al tuo team ed evitare di creare inutili indebiti tecnici o complessità da mantenere durante il ciclo di vita del progetto.
Ora imparerai a conoscere la PWA con i flussi offline che abbiamo creato per dimostrare come approcciare e affrontare le principali sfide legate all'implementazione della tua soluzione utilizzando solo l'oggetto video HTML5 senza un framework per gestire le attività gravose.