Impara i video di base. Aumenta il coinvolgimento.
Stai pensando di aggiungere un video al tuo sito web? Man mano che i dispositivi e le connessioni di rete diventano più veloci e potenti, puoi andare oltre le immagini e aggiungere i video al tuo arsenale di tecniche per creare il web. Le ricerche dimostrano che i siti web con video aumentano il coinvolgimento e le vendite. Pertanto, anche se non hai ancora aggiunto video ai tuoi siti, è probabile che sia solo questione di tempo.
Con ogni probabilità, i file video che aggiungi al tuo sito saranno i file di dimensioni
più grandi che vengono scaricati. Per questo motivo, è estremamente importante assicurarsi che
i file siano creati per una riproduzione veloce e stabile per tutti i clienti.
Anche se i video possono aumentare il coinvolgimento e la soddisfazione dei clienti, un video che non si riproduce o si blocca durante la riproduzione può causare frustrazione nei clienti.
Questo post è incentrato sull'utilizzo del tag <video> HTML5 per la pubblicazione di video, quindi non tratterà i video in streaming.
Iniziamo.
Il tag <video>
Sembra ovvio, giusto? Per aggiungere un video, devi aggiungere il tag <video>, indicare una fonte e il gioco è fatto.
<video src="myVideo.mp4">
E hai ragione. A livello generale, è tutto ciò che ti serve per aggiungere un video al web. Tuttavia, esistono numerosi attributi che puoi aggiungere al tag video per migliorare il layout e la pubblicazione del video.
Il tag <source>
Forse il modo migliore per migliorare la pubblicazione di video sul web è ottimizzare
i file caricati nel 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>
Questo fa riferimento a tre file di origine distinti. Il browser inizia dall'alto e sceglie il primo formato e codec che può utilizzare. Nel mondo dei video, il formato file, generalmente chiamato container, può essere salvato con codec diversi, ciascuno con attributi diversi. (Scopri di più su questo argomento.) Nell'esempio precedente, la prima scelta è il formato WebM (che può essere codificato con codec VP8 o VP9) ed è supportato (al momento della stesura di questo articolo) dal 78% degli utenti mondiali. La seconda scelta è il codec H.265 per MP4, supportato su iOS e Mac più recenti. Questi codec sono più recenti e hanno migliorato la compressione dei dati, pur offrendo la stessa qualità video dei formati video precedenti.
L'ultima scelta del nostro elenco è H.264 mp4, che è supportato dal 92% di tutti gli �� In un esempio, puoi vedere la differenza per un film di due minuti:
| Codec | Dimensioni file |
|---|---|
| VP8 | 5,5 MB |
| VP9 | 4,2 MB |
| H.265 | 5,4 MB |
| H.264 | 16,1 MB |
Caricare file più piccoli è la migliore ottimizzazione del rendimento che puoi fare per migliorare la pubblicazione dei tuoi video. Quando viene scaricato un video più piccolo, la riproduzione avviene prima e il buffer del video si riempie più velocemente. Ciò comporta meno interruzioni durante la riproduzione dei video. Inoltre, il carico del server viene ridotto, il che compensa l'aumento dei requisiti di archiviazione di più file video.
Attributo preload
La riproduzione dei video non può iniziare finché una parte non è stata scaricata e archiviata in locale. Utilizzando l'attributo preload, puoi controllare la quantità di video scaricata al caricamento della pagina. Esistono tre valori per l'attributo preload:
auto, metadata e none.
preload='auto'
Se viene utilizzato 'auto', l'intero video verrà scaricato, indipendentemente dal fatto che l'utente prema o meno il pulsante di riproduzione. In questo modo, il video viene scaricato localmente prima che l'utente prema il pulsante di riproduzione, il che consente una riproduzione più rapida. Dal punto di vista dell'utilizzo dei dati (e del carico del server), questa opzione deve essere utilizzata solo quando è molto probabile che il video venga guardato. Altrimenti, tutti i dati relativi al download
di un video completo andranno sprecati.
preload='metadata'
Questa è l'impostazione predefinita per il precaricamento su Chrome e Safari. Se viene utilizzato 'metadata'
, viene scaricato il primo 3% del video. Sebbene condivida le limitazioni di 'auto', il download di solo il 3% del video comporta un costo di utilizzo del server/dei dati molto inferiore rispetto all'intero video, garantendo al contempo che una parte del video venga memorizzata localmente per un avvio rapido.
preload='none'
In questo modo risparmi la maggior parte dei dati, ma la riproduzione del video sarà più lenta quando viene premuto il pulsante corrispondente, perché, come indicato dall'impostazione, non viene precaricato alcun kilobyte del video sul dispositivo. Questa è l'impostazione appropriata per i video presenti, ma che è improbabile che vengano riprodotti. Questo potrebbe essere utilizzato anche se l'utente ha attivato la modalità Lite nel browser.
poster
Ti consigliamo di avere un'immagine poster da visualizzare sopra la finestra del video prima che inizi la riproduzione:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Un video senza poster mostra uno schermo nero prima dell'inizio.
Un video con un poster è molto più coinvolgente.
Aggiungendo una foto anziché una casella nera sulla pagina, rendi il tuo sito web più coinvolgente e interattivo. Tuttavia, l'utilizzo dell'attributo poster consente di aggiungere il download di un'immagine prima dell'inizio del download del video. Per questo motivo, ti consigliamo di evitare di aggiungere un poster ai video con riproduzione automatica, in quanto il download aggiuntivo ritarderà il download del video.
Controlli di riproduzione
L'aggiunta di un attributo controls consente di aggiungere i controlli di riproduzione. Senza questi elementi, i clienti
non possono avviare o interrompere il video. Devi aggiungerlo ai video in modo che gli utenti possano interrompere e mettere in pausa, regolare il volume e così via. Per i video in loop o in background, ti consigliamo di omettere questo attributo.
audio disattivato
L'attributo muted fa sì che la riproduzione inizi con l'audio disattivato. Se non vengono forniti controlli, l'audio rimarrà disattivato per l'intera riproduzione. Se è così, potrebbe essere opportuno rimuovere la traccia audio dal video. In questo modo, le dimensioni del file video inviato al cliente vengono ulteriormente ridotte.
Come per i contenitori e i codec, anche la rimozione del file audio, chiamata anche demuxing, rientra nell'ambito di questo articolo. Puoi trovare le istruzioni nel cheat sheet sulla manipolazione dei contenuti mediali.
loop
Per pubblicare un video che riproduce i contenuti in loop (ad esempio una GIF animata), aggiungi l'attributo loop. Poiché i file video sono in genere molto più piccoli delle GIF animate, questo meccanismo ti consente di sostituire le GIF con file video.
Riproduzione automatica dei video
Se vuoi che il video venga riprodotto immediatamente (ad esempio come video di sfondo o come video in loop come una GIF animata), puoi aggiungere l'attributo autoplay:
<video src="myVideo.mp4" playsinline autoplay>
Detto questo, affinché un video venga riprodotto automaticamente sui browser mobile, è necessario aggiungere anche l'attributo muted:
<video src="myVideo.mp4" playsinline autoplay muted>
Conclusione
L'aggiunta di un video al tuo sito web offre ai clienti un nuovo modo per interagire con te, ma è importante che i contenuti vengano pubblicati correttamente, assicurandoti che la riproduzione del video sia fluida e senza interruzioni. L'utilizzo degli attributi integrati del tag <video> può essere di grande aiuto per offrire un video impeccabile a tutti gli utenti che visitano il tuo sito web.