Impara i video di base. Aumentare il coinvolgimento.
Stai pensando di aggiungere un video al tuo sito web? Man mano che i dispositivi e le connessioni di rete sono diventati più veloci e potenti, puoi andare oltre le immagini e aggiungere video alle tue tecniche avanzate per creare il web. Alcuni studi dimostrano che i siti web con video generano un maggiore coinvolgimento e vendite. Anche se non hai ancora aggiunto video ai tuoi siti, probabilmente è solo questione di tempo.
Molto probabilmente, i file video che aggiungi al tuo sito saranno i file più grandi che vengono scaricati. Per questo motivo, è estremamente importante assicurarsi che i file siano progettati per una riproduzione veloce e costante per tutti i clienti.
Anche se un video può aumentare il coinvolgimento e la soddisfazione del cliente, un video che non viene riprodotto o si blocca durante la riproduzione può generare frustrazione nei clienti.
Questo post è incentrato sull'utilizzo del tag HTML5 <video> per la pubblicazione di video, quindi non tratta i video in streaming.
E ora iniziamo.
Il tag <video>
Sembra ovvio, vero? Per aggiungere il video, devi aggiungere il tag <video>, puntare a una
fonte e iniziare a gareggiare.
<video src="myVideo.mp4">
E hai ragione. Al livello più generale, questo è tutto ciò che serve per aggiungere un video sul web. Tuttavia, puoi aggiungere al tag video molti attributi al fine di migliorare il layout e la pubblicazione del video.
Il tag <source>
Forse il modo migliore per migliorare la pubblicazione dei video sul web è ottimizzare i file inviati al browser. Per farlo, utilizza il tag <source>:
<video>
<source src="myWebmVideo.webm" type="video/webm">
<source src="myh265Video.mp4" type="video/mp4">
<source src="myh264Video.mp4" type="video/mp4">
</video>
che fa riferimento a tre file di origine separati. Il browser si avvia dall'alto e sceglie il primo formato e il primo codec utilizzabile. Nel mondo dei video, il formato file, solitamente chiamato container, può essere salvato con codec diversi, ciascuno con attributi diversi. (Scopri di più qui.) Nell'esempio precedente, la prima scelta è il formato WebM (che può essere codificato con codec VP8 o VP9), ed è supportato (al momento della scrittura) dal 78% degli utenti globali. La seconda opzione è il codec H.265 del formato mp4, supportato su iOS e sui Mac più recenti. Questi codec sono più recenti e hanno migliorato la compressione dei dati, offrendo al contempo la stessa qualità video dei formati video meno recenti.
L'ultima scelta nel nostro elenco è il formato H.264 mp4, che supporta il 92% di tutti gli utenti a livello globale, ma è un formato meno recente e, in quanto tale, è generalmente molto più grande dei video WebM o H.265. In un esempio, puoi vedere la differenza per un filmato di due minuti:
| Codec | Dimensioni file |
|---|---|
| VP8 | 5,5 MB |
| VP9 | 4,2 MB |
| H.265 | 5,4 MB |
| H.264 | 16,1 MB |
La pubblicazione di file più piccoli è la migliore ottimizzazione del rendimento che puoi fare per pubblicare meglio i tuoi video. Se si scarica un video di dimensioni ridotte, la riproduzione del video avviene prima e il buffer del video si riempie più velocemente. Questo comporta un minor numero di stalli durante la riproduzione dei video. Inoltre, il carico del server viene ridotto, a causa dell'aumento dei requisiti di archiviazione di più file video.
L'attributo di precaricamento
La riproduzione dei video non può iniziare finché non viene scaricato e archiviato localmente alcuni video. Grazie all'attributo di precaricamento, puoi controllare la quantità di video da scaricare al caricamento pagina. Esistono tre valori per l'attributo di precaricamento:
auto, metadata e none.
preload='auto'
Se viene utilizzato 'auto', verrà scaricato l'intero video, a prescindere dal fatto che
l'utente prema il pulsante di riproduzione o meno. Ciò consente una riproduzione rapida del video, in quanto il video viene scaricato in locale prima che l'utente prema il pulsante di riproduzione. Dal punto di vista dell'utilizzo dei dati (e del carico del server), dovrebbe essere utilizzato solo quando è molto probabile che il video venga guardato. In caso contrario, tutti i dati del download
di un video completo verranno sprecati.
preload='metadata'
Questa è l'impostazione predefinita per il precaricamento su Chrome e Safari. Quando viene utilizzato 'metadata', viene scaricato il primo 3% del video. Anche se in questo modo vengono condivise alcune avvertenze con 'auto', il download di solo il 3% del video comporta un costo di utilizzo dei dati/server molto inferiore rispetto all'intero video, garantendo al contempo che una parte del video venga archiviata localmente per un avvio video rapido.
preload='nessuno'
In questo modo si salva la maggior parte dei dati, ma l'avvio del video più lento quando viene premuto il pulsante di riproduzione, perché come lo stato dell'impostazione, zero kilobyte di video vengono precaricati localmente sul dispositivo. Questa è l'impostazione appropriata per i video presenti, ma che difficilmente riproducibili. Potrebbe essere utilizzato anche se l'utente ha attivato la modalità Lite nel browser.
poster
Ti consigliamo di utilizzare un'immagine poster che venga visualizzata sopra la finestra del video prima dell'avvio della riproduzione:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Un video senza poster mostra una schermata nera prima di iniziare.
Un video con un poster è molto più coinvolgente.
Aggiungendo una foto invece di una casella nera nella pagina, rendi il tuo sito web più coinvolgente e interattivo. Tuttavia, l'utilizzo dell'attributo poster consente di aggiungere un'immagine
scaricata prima dell'inizio del download del video. Per questo motivo, potresti evitare di aggiungere un poster per i video a riproduzione automatica (poiché il download aggiuntivo ritarda il download del video).
Controlli di riproduzione
L'aggiunta di un attributo controls consente di aggiungere i controlli di riproduzione. Senza queste funzionalità, i tuoi clienti
non possono avviare o interrompere il video. Ti consigliamo di aggiungerlo per i video in modo
che gli utenti possano interrompere e mettere in pausa i contenuti, regolare il volume e così via. Per i video in background o in loop, è possibile omettere questo attributo.
audio disattivato
L'attributo muted determina l'avvio della riproduzione con l'audio disattivato. Se non vengono forniti controlli, l'audio rimarrà disattivato per l'intera riproduzione. Se lo è, potrebbe avere senso rimuovere la traccia audio dal video. In questo modo si riducono ulteriormente le dimensioni del file video da consegnare al cliente.
Come per i container e i codec, anche la rimozione del file audio, chiamata anche demuxing, non rientra nell'ambito di questo articolo. Puoi trovare le istruzioni nella scheda di riferimento sulla gestione dei contenuti multimediali.
loop
Per pubblicare un video che riproduca i contenuti in loop (come una GIF animata), aggiungi l'attributo loop. Poiché i file video sono in genere molto più piccole delle GIF animate, questo meccanismo ti consente di sostituire le GIF con file video.
Riproduzione automatica del video
Se vuoi che il video venga riprodotto immediatamente (ad esempio come video di sfondo o come video che si riproducono in loop come una GIF animata), puoi aggiungere l'attributo autoplay:
<video src="myVideo.mp4" autoplay>
Detto questo, per fare in modo che un video venga riprodotto automaticamente sui browser mobile, è necessario aggiungere anche l'attributo muted:
<video src="myVideo.mp4" autoplay muted>
Conclusione
La semplice aggiunta di un video al sito web aggiunge un nuovo ambito di coinvolgimento per i clienti, ma è importante pubblicare correttamente i contenuti, in modo che la riproduzione del video sia fluida e senza stalli. Gli attributi integrati del tag <video> possono aiutarti a pubblicare video impeccabili per tutti i visitatori del tuo sito web.