Andare oltre le immagini con video semplici per il Web

Impara le nozioni di base sui video. Aumentare il coinvolgimento.

Stai pensando di aggiungere 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. La ricerca suggerisce che i siti web con video generano un maggiore coinvolgimento e vendite. Pertanto, anche se non hai ancora aggiunto video ai tuoi siti, è probabile che sia solo questione di tempo.

Molto probabilmente, i file video che aggiungi al tuo sito saranno i file più grandi scaricati. Per questo motivo, è estremamente importante assicurarsi che i file siano progettati per una riproduzione rapida 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 si concentra sull'utilizzo del tag <video> HTML5 per la pubblicazione di video e pertanto non tratta 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 molti 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 del file, solitamente chiamato contenitore, 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é non sono stati scaricati e memorizzati localmente alcuni video. Con 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. In caso contrario, tutti i dati di un download completo del video andranno persi.

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 probabilmente non verranno 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&#39;inizio.
Nessuna immagine poster

Un video senza poster mostra uno schermo nero prima dell'inizio.

Un video con un poster è molto più coinvolgente.
Con un'immagine poster

Un video con un poster è molto più coinvolgente.

Aggiungendo una foto anziché una casella nera nella pagina, rendi il tuo sito web più coinvolgente e interattivo. Tuttavia, l'utilizzo dell'attributo poster aggiunge un download di immagini 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 aggiunge i controlli di riproduzione. Senza queste 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 la tua attività, 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ò aiutarti notevolmente a offrire video impeccabili a tutti i visitatori del tuo sito web.