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 framework multimediali (o librerie) disponibili che puoi utilizzare per estendere o sostituire il comportamento del video player HTML5 predefinito.
I framework multimediali sono di tipo proprietario e open source e si basano su 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 usare. Ti starai chiedendo: "Se il video player HTML5 fornisce già la maggior parte delle funzionalità, perché dovrei usare un framework o una libreria?". È un'ottima domanda, mettiamoci all'opera.
Vantaggi dell'utilizzo di un framework
Nella maggior parte delle situazioni che vanno oltre le esigenze di una pagina web di base, utilizzerai un framework multimediale per pubblicare i tuoi contenuti. A meno che tu non sia pronto a sviluppare e gestire un insieme ricco di funzionalità come riproduzione offline, streaming, analisi, Picture in picture, miniature in anteprima, incorporamento e monetizzazione, come l'ottimizzazione del tasso di riempimento, la pianificazione degli annunci o le offerte su intestazioni, per citarne alcuni, probabilmente dovresti affidare questa complessità a una soluzione già esistente.
È qui che entrano in gioco i framework multimediali. Ti forniscono un insieme di caratteristiche e condizioni in cui puoi utilizzarle, dopodiché devi decidere quale framework è più adatto al tuo progetto. Nel prossimo articolo illustreremo come abbiamo creato una PWA con streaming offline che implementa diverse funzionalità complesse. Spoiler: è stato molto lavoro ed è ancora lontano dall'essere una soluzione pronta per la produzione. Risparmiati i grattacapi e usa una struttura.
Ci sono molte opzioni tra cui scegliere. Per il momento questo articolo si concentrerà su tre, Shaka Player, JW Player e Video.js.
Suonatore di Shaka
In base alla documentazione, Shaka Player di Google è una libreria JavaScript open source per i 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 le istruzioni per l'utilizzo di base sul sito della documentazione di Shaka Player. Tuttavia, per utilizzare Shaka Player, devi prima creare una pagina HTML con un elemento video o audio. Poi, nel codice JavaScript dell'applicazione, installi i polyfill e controlla il supporto del browser. Dopo che il browser ha confermato il supporto di Shaka Player, uno script creerà un oggetto Player per eseguire il wrapping dell'elemento multimediale, ascoltare gli errori, quindi caricare un file manifest. Da lì partirà il componente Shaka Player.
Con Shaka dovrai ospitare e codificare i file multimediali autonomamente. La creazione di un server multimediale non è eccessivamente complessa, tuttavia la codifica/transcodifica di contenuti multimediali può essere un'attività lunga e complicata. Dovrai probabilmente trasferire questa parte a un servizio come Zencoder, Amazon Elastic Encoder o l'API Google Transcoder per automatizzare attività ripetitive e accelerare il processo.
Il grande vantaggio di Shaka Player è che c'è anche uno strumento e un SDK per la pacchettizzazione dei media davvero fantastici per la pacchettizzazione e la crittografia DASH e HLS, chiamato Shaka Packager. Può preparare e pacchettizzare contenuti multimediali per lo streaming online, come abbiamo visto in Conversione dei contenuti multimediali e Crittografia dei contenuti multimediali.
Lettore JW
Se cerchi un'opzione che fornisca servizi di hosting e codifica/transcodifica, potresti considerare JW Player, ma tieni presente che JW Player è un software proprietario. In altre parole, non hai molto controllo sulla piattaforma o sulla roadmap. C'è una versione senza costi di base in cui i video vengono visualizzati con una filigrana, mentre 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. Esistono API e SDK ben documentati. Tuttavia, se stai solo cercando un modo rapido e senza costi per ospitare i tuoi contenuti multimediali, l'incorporamento dei video di YouTube in genere è l'opzione migliore senza costi.
Video.js
Secondo quanto riportato sul sito web, Video.js è stato realizzato da zero per un mondo HTML5. Supporta video HTML5 e formati di streaming moderni come DASH e HLS, nonché YouTube e Vimeo. Supporta la riproduzione dei video su computer e dispositivi mobili e ha un aspetto perfetto ovunque grazie a skin basate su CSS.
Esistono diversi modi per utilizzare Video.js, ma il più semplice è utilizzare la versione CDN senza costi fornita da Fastly. Per scoprire di più su come configurare il player, consulta la pagina Per iniziare. Video.js è un video player molto potente. Proprio come Shaka Player, dovrai anche ospitare e codificare il video. Tuttavia, una differenza è il sistema di plug-in, in cui puoi eseguire operazioni come riprodurre i video di YouTube nel player Video.js, anch'esso personalizzabile.
Altri framework
Sono disponibili molti framework e librerie diversi, questo articolo non fa solo capire che cosa c'è sul mercato. Quando scegli un framework, devi considerare quali funzionalità ti servono per il progetto e come prevedi di ospitare, codificare o transcodificare i tuoi contenuti multimediali. Servono annunci pre-roll o altre strategie di monetizzazione? I contenuti multimediali saranno disponibili offline? Quanto è grande o piccolo il tuo budget? o qualsiasi altro numero di considerazioni. Fai ricerche e chiedi suggerimenti alle persone della tua rete. Ci sono decine di altre ottime opzioni e, prima di fare una scelta, prenditi del tempo per sceglierne una più adatta al tuo team ed evitare di creare inutilmente debito tecnico o complessità da mantenere durante il ciclo di vita del progetto.
Ora scoprirai la PWA con streaming offline che abbiamo creato per dimostrare come affrontare e affrontare le principali sfide relative all'implementazione della tua soluzione utilizzando solo l'oggetto video HTML5 senza un framework per gestire il grosso del lavoro.