Gli utenti amano i contenuti multimediali, in particolare i video, che possono essere divertenti e informativi. Sui dispositivi mobili, i video possono essere un modo più semplice per fruire di informazioni rispetto al testo. Per un'esperienza utente ottimale, i video non devono richiedere più della larghezza di banda disponibile. Gli utenti dovrebbero essere in grado di utilizzarli su qualsiasi dispositivo. Gli utenti non dovrebbero mai dover attendere il download dei contenuti multimediali. A nessuno piace premere play e non succede nulla.
Sicuramente hai guardato video sul tuo dispositivo, il che significa che nulla di quanto detto nell'ultimo paragrafo ti sorprende. Ora devi imparare a inserire un video o un altro file multimediale sul tuo sito web. I requisiti tecnici per l'aggiunta di contenuti multimediali devono essere al servizio dell'esperienza utente.
I requisiti tecnici
- Le versioni di un file multimediale sono in formati web-friendly comuni che contengono sia stream audio che video.
- La risoluzione sia appropriata per i dispositivi degli utenti.
- La velocità in bit non sovraccarica la larghezza di banda della rete degli utenti.
- Il risultato è visibile su tutti i principali browser che utilizzano tecnologie appropriate.
- Il file è criptato (facoltativo).
La sezione media di questo sito web ti aiuterà a soddisfare questi requisiti tecnici. Non preoccuparti se questi concetti sono ancora un po' astratti. Li illustreremo progressivamente in tutti gli articoli. Nella prima sezione imparerai i concetti di base dei contenuti multimediali, nella seconda scoprirai come aggiungerli al web e nella sezione finale troverai le applicazioni pratiche, con alcune tecniche avanzate, per l'utilizzo dei contenuti multimediali sul web.
Visualizzazione di video sul web
Esistono quattro approcci che puoi adottare per mostrare video su un sito.
- Carica i video su un provider di hosting multimediale come YouTube o Vimeo. Queste opzioni richiedono l'inserimento dei relativi player nel tuo sito.
- Incorporamento autonomo di base utilizzando gli elementi HTML
<video>e<audio>. - Incorporamento più completo utilizzando una raccolta video come Shaka Player, JW Player o Video.js.
- Creare il tuo media server e la tua applicazione di streaming.
Questo sito illustra principalmente le nozioni di base sull'embedding dei contenuti multimediali. Tuttavia, copriamo alcuni argomenti più avanzati per aiutarti a iniziare il percorso per creare la tua applicazione di streaming multimediale. L'impegno richiesto non è banale, pertanto abbiamo sviluppato una PWA per i media con supporto offline da utilizzare come riferimento, che dovrebbe mostrarti sia i modi in cui è possibile realizzarla sia il livello di impegno richiesto. L'applicazione non è affatto un'offerta pronta per la produzione o un concorrente di servizi come YouTube o Vimeo, ma ti fornirà un punto di partenza per imparare qualcosa di nuovo e stimolante.
Francamente, creare un concorrente per i servizi multimediali ospitati richiederebbe un team di ingegneri esperti e migliaia di ore di lavoro. A meno che il tuo obiettivo non sia entrare in questo mercato come concorrente, ti consigliamo di utilizzare uno degli altri metodi. È bene comprendere la tecnologia e, anche se potresti non implementare la tua applicazione o il tuo player video, è utile esplorare e sperimentare le ultime novità relative al supporto dei browser o, almeno, utilizzare una delle librerie video esistenti.
Che cosa impareremo
La raccolta media è composta da tre parti. In questa prima sezione, forniremo concetti e informazioni sui prerequisiti per aggiungere contenuti multimediali al tuo sito. Sono incluse spiegazioni su come vengono assemblati i file multimediali, nozioni di base sulle applicazioni necessarie per preparare i file per il web e concetti di streaming. La seconda sezione spiega come preparare i file e convertirli in vari formati e, facoltativamente, aggiungere la crittografia. Nell'ultima sezione, ti mostreremo come incorporare un file multimediale in una pagina web, discuteremo delle best practice per la riproduzione automatica, dell'utilizzo dei framework multimediali, della disattivazione della visualizzazione offline dei video e della loro accessibilità.
L'argomento è molto vasto, quindi iniziamo con le nozioni di base sui file media.