Esistono diversi modi per aggiungere contenuti multimediali a una pagina web. In precedenza hai imparato a
utilizzare il tag <video> standard. In questo articolo scoprirai alcuni dei media framework (o librerie) disponibili che puoi utilizzare per estendere o sostituire il comportamento del video player HTML5 predefinito.
I framework multimediali sono disponibili sia in versione proprietaria che open source e al loro interno contengono un insieme di API che supportano la riproduzione audio e/o video per vari formati di contenitori 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. Potresti chiederti: "Se il video player HTML5 fornisce già la maggior parte delle funzionalità, perché dovrei utilizzare un framework o una libreria?" È un'ottima domanda, approfondiamo.
Vantaggi dell'utilizzo di un framework
Nella maggior parte dei casi che vanno oltre le esigenze di una pagina web di base, ti consigliamo di utilizzare un framework multimediale per pubblicare i tuoi contenuti. A meno che tu non sia pronto a sviluppare e gestire un ampio insieme di funzionalità come la riproduzione offline, lo streaming, le analisi, la modalità Picture in Picture, le miniature di anteprima, l'embedding e la monetizzazione come l'ottimizzazione del tasso di riempimento, la pianificazione degli annunci o le offerte basate sugli header, per citarne alcuni allora ti consigliamo di scaricare questa complessità su una soluzione esistente.
Ed è qui che entrano in gioco i framework multimediali. Ti forniscono un insieme di funzionalità e le condizioni in cui puoi utilizzarle. Devi poi decidere quale framework è adatto al tuo progetto. Nel prossimo articolo parleremo di come abbiamo creato una PWA con streaming offline che implementa diverse funzionalità complesse. Spoiler alert: è stato un lavoro enorme e siamo ancora lontani da una soluzione pronta per la produzione. Risparmiatevi i problemi e utilizzate un framework.
Esistono molte opzioni tra cui scegliere, ma per il momento questo articolo si concentrerà su tre: Shaka Player, JW Player e Video.js.
Shaka Player
Secondo la documentazione, Shaka Player di Google è una libreria JavaScript open source per i contenuti multimediali adattabili. Riproduce i formati multimediali adattivi (ad es. 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 lo stoccaggio e la riproduzione offline dei contenuti multimediali utilizzando IndexedDB. I contenuti possono essere archiviati su qualsiasi browser. Lo spazio di archiviazione delle licenze dipende dal supporto del browser.
Sul sito di documentazione di Shaka Player sono disponibili indicazioni per l'utilizzo di base. Tuttavia, in breve, per utilizzare Shaka Player devi prima creare una pagina HTML con un elemento video o audio. Poi, nel codice JavaScript dell'applicazione, installa i polyfill e controlla il supporto del browser. Una volta che il browser ha confermato il supporto di Shaka Player, uno script creerà un oggetto Player per avvolgere l'elemento multimediale, rilevare gli errori e caricare un file manifest. Shaka Player assumerà il controllo.
Con Shaka dovrai ospitare e codificare autonomamente i tuoi file multimediali. La creazione di un media server non è eccessivamente complessa, ma la codifica/transcodifica dei contenuti multimediali può essere lunga e complicata. Ti consigliamo di esternalizzare questa parte a un servizio come Zencoder, Amazon Elastic Encoder o l'API Google Transcoder per automatizzare le attività ripetitive e velocizzare il processo.
La cosa fantastica di Shaka Player è che è disponibile anche uno strumento davvero eccezionale e un SDK per il packaging dei contenuti multimediali per il packaging e la crittografia DASH e HLS chiamato Shaka Packager. Può preparare e pacchettizzare contenuti multimediali per lo streaming online, come spiegato in precedenza in Conversione di contenuti multimediali e Crittografia di contenuti multimediali.
JW Player
Se stai cercando un'opzione che fornisca servizi di hosting e codifica/transcodifica, potresti valutare JW Player, ma tieni presente che si tratta di un software proprietario. Ciò significa che non hai molto controllo sulla piattaforma o sulla roadmap. Esistono una versione di base senza costi, in cui i video vengono visualizzati con una filigrana, e una versione commerciale.
JW Player supporta lo streaming con MPEG-DASH (solo versione a pagamento), Digital Rights Management (DRM) (con Vualto), pubblicità interattiva, personalizzazione dell'interfaccia e incorporamenti. Sono disponibili un'API e un SDK ben documentati. Tuttavia, se stai cercando un modo rapido e senza costi per ospitare i tuoi contenuti multimediali, l'embedding dei video di YouTube è in genere la soluzione migliore.
Video.js
Secondo il suo sito web, Video.js è stato creato da zero per un mondo HTML5. Supporta i video HTML5 e i 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 ottimale su tutti i dispositivi grazie alle 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 Guida introduttiva. Video.js è un video player molto potente e, come Shaka Player, dovrai anche ospitare e codificare il video. Tuttavia, una differenza è il sistema di plug-in, che ti consente di svolgere operazioni come riprodurre i video di YouTube nel player Video.js, che può anche essere personalizzato.
Altri framework
Esistono molti framework e librerie diversi, questo articolo fa solo un breve accenno a ciò che è disponibile. 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 contenuti multimediali saranno disponibili offline? Quanto è grande o piccolo il tuo budget? O qualsiasi altro numero di considerazioni. Fai delle ricerche e chiedi suggerimenti alle persone della tua rete. Esistono dozzine di altre ottime opzioni e, prima di fare qualsiasi scelta, prenditi del tempo per sceglierne una adatta al tuo team ed evita di creare debiti tecnici o complessità non necessari da gestire durante il ciclo di vita del progetto.
Successivamente, scoprirai la PWA con streaming offline che abbiamo creato per dimostrare come affrontare e risolvere le principali sfide che si presentano quando crei la tua soluzione utilizzando solo l'oggetto video HTML5 senza un framework per gestire le operazioni più complesse.