Ente accreditato Regione Veneto n.4271

Video full-size in background con HTML5

Come implementare i video nei vostri siti custom in pochi semplici passaggi

Pubblicato da Simone Baldassin // 8 Marzo 2016 // 1.734 visualizzazioni

video-background-html5

Una delle funzionalità più interessanti introdotte dagli sviluppatori in HTML5 è sicuramente la possibilità di avere finalmente a disposizione dei player per video e audio grazie all’ausilio dei marcatori, appunto, video e audio.

Non è cosa rara trovare nei plugin professionali, oltre al normale slider, anche la gestione di video in background normalmente settati in loop. Di norma, si tratta di video che non superano i 5-6 secondi e che si presentano full-size, a pieno schermo, all’apertura della pagina.

Questa funzionalità può essere molto utile nei vostri progetti, andiamo quindi a vedere come inserirli senza ausilio di jQuery, ma semplicemente sfruttando il marcatore video.

La prima cosa da fare, come da figura, è procurarsi i video nei formati richiesti dai browser. Sappiamo, infatti, che non esiste uno standard per la lettura e questo ci costringe a caricare più file.

La cosa migliore da fare è quindi disporre dei file già nei formati richiesti, o chiederli direttamente al professionista che li ha realizzati. A differenza di semplici software per la conversione, un professionista è in grado di dare la giusta compressione e ottimizzare al meglio il risultato finale.

File video

In figura notiamo che oltre ai formati richiesti (vedremo poi a cosa corrispondono), abbiamo inserito anche un’immagine. Ci servirà da poster nel caso, per qualsivoglia motivo, il video non dovesse essere letto subito da un device per problemi di caricamento o in caso decidessimo di inserire nel player le opzioni play e stop. In questo caso verrebbe comunque caricata l’immagine e eviteremmo di avere uno sfondo vuoto.

Le dimensioni consigliate per l’immagine, in caso di video di background, è bene siano intorno ai 1900 x 1080 pixel. Il video sarà infatti responsive e quindi è buona cosa avere un’immagine adeguata per coprire tutte le risoluzioni senza che questa sgrani.

Elaborazione del codice HTML

Passiamo quindi al file HTML seguendo le direttive in figura.

PastedGraphic-2 2

Gli attributi assegnati al marcatore video mi indicano nell’ordine:

  • autoplay: il video parte in automatico appena raggiunte le condizioni minime di buffering
  • loop: il video è in loop quindi una volta terminato andrà a ripetizione infinita
  • muted: elimino l’audio dal video
  • poster: carico dal percorso l’immagine selezionata come locandina

Possiamo vedere nella figura a cosa corrispondono i formati inseriti.

  • mp4: per Safari e i dispositivi IOS come iPad e iPhone
  • webm: per Opera e Google Chrome
  • ogg: per Mozilla Firefox

Oltre a questo è necessario inserire tra l’apertura e la chiusura del marcatore video il marcatore source che, tramite il classico attributo src, vi permette di caricare dal percorso predefinito, in questo caso la cartella video, i diversi formati richiesti.

Questa procedura è necessaria anche nel caso vogliate utilizzare il marcatore audio.

Elaborazione del codice CSS

Ultimo e non ultimo, passiamo alla compilazione del CSS.

video CSS3

Anche in questo caso gli attributi usati sono di facile comprensione per qualsiasi designer. In primis definisco una larghezza pari al 100% e un altezza “auto”. Questo step vi evita di ritoccare valori nelle media queries.

Un ulteriore accorgimento è quello di caricare l’immagine di copertina come background definendola no-repeat e utilizzando l’attributo utilissimo di CSS3 background-size: cover.
Questo vi consente di avere comunque un’immagine di sfondo a disposizione anche se, per qualche motivo, un device o un browser di vecchia generazione non dovessero leggere il marcatore video. Ovviamente, in caso il video funzioni, l’immagine non si vedrà.

Per una migliore compatibilità coi vecchi browser, vi consiglio di dichiarare questa regola con l’ausilio dei motori di rendering come webkit & co.

Conclusioni

Le regole z-index: 0 e display: block sono da tenere in considerazione per il progetto da cui sono tratti gli esempi, ma potrebbero non servire nel vostro sito, quindi prestate attenzione.

Semplice vero?

Ora tocca a voi gestire i vostri personalissimi video in background. Lasciateci un commento se volete raccontarci la vostra esperienza.

Topic:

2 commenti all'articolo

    1. Buongiorno Giosue, per poter capire la problematica dovrei vedere il codice, pur essendo l’articolo di oltre 3 anni fa ho ancora un paio di strutture online che implementano questa soluzione e sono funzionanti. Il video non parte in desktop o in mobile?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Send this to a friend