Nel web 2.0 il design e la user experience sono fondamentali. Se stai costruendo una tua bran identity il “look and feel” gioca un ruolo estremamamente importante.

Flash e plugin di terze parti, come Quick TIme, possono rendere difficile la customizzazione da parte di sviiluppatori ma fortuniatamente con HTML5 vengono introdotti dei controlli  nativi per i Video che andremmo ad analizzare nel dettaglio oggi.

Compatibilità

 

La compatibilità dei video in HTML5 è molto elevata e supporta infatti tutti i più recenti browser. Tralasciando la valutazione su che video sono compatibili con i vari browser vi basti sapere che necessitiamo di 3 formati particolari:

  • MP4 – con video H.264 a audio AAC
  • Ogg – con video Theora e audio Vorbis
  • WebM – pensato principalmente per l’uso col tag video di HTML5 nato con video VP8 e audio Vorbis e più recentemente con video VP9 e audio Opus

 

Usare il tag Video nella pagine HTML5 è molto semplice come si può vedere qua di seguito:


<video>
  <source src="media/demo.mp4" type="video/mp4">
  <source src="media/demo.ogv" type="video/ogg">
  <source src="media/demo.webm" type="video/webm">
</video>

Configurare la nostra pagina

Immaginiamo di voler creare una pagina con un video in background del tipo landig page in cui ci sarà ad esempio  un titolo, un testo e una call to action. Ci servirà quindi un container con video e del testo a cui attribuiremo del css.

 

<div class="content">
  <h1 class="content_titolo">Benvenuti nella mia Landing</h1>
  <p class="content_testo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit qui voluptatum enim est deserunt assumenda, aspernatur quam aperiam, fugiat minus aliquam quisquam hic repudiandae nobis architecto ipsa numquam facilis nisi!</p>
  <a href="#" class="content_cta">Visita il Sito</a>
</div><!-- /content -->

<video id="il-mio-video" class="video">
  <source src="media/demo.mp4" type="video/mp4">
  <source src="media/demo.ogv" type="video/ogg">
  <source src="media/demo.webm" type="video/webm">
</video><!-- /video -->

Un po’ di CSS

 

Aggiungiamo un po’ di codice semplice visto che la pagina è fatta da pochi elementi.

html,
body,
div,
h1,
p,
a,
video {
  margin: 0;
  padding: 0;
}

 

Aggiungiamo poi un google font e la dichiarazione viewport per il browser responsive. La nostra pagina dovrebbe oramai assomigliare a questa:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,300,700">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content">
  <h1 class="content_titolo">Benvanuti nella mia Landing</h1>
  <p class="content_testo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit qui voluptatum enim est deserunt assumenda, aspernatur quam aperiam, fugiat minus aliquam quisquam hic repudiandae nobis architecto ipsa numquam facilis nisi!</p>
  <a href="#" class="content_cta">Visita il Sito</a>
</div><!-- /content -->
<video id="il-mio-video" class="video">
  <source src="media/demo.mp4" type="video/mp4">
  <source src="media/demo.ogv" type="video/ogg">
  <source src="media/demo.webm" type="video/webm">
</video><!-- /video -->
</body> 
</html>

 

Dato che vogliamo un video full screen il nostro Html e Body devono essere modificati nel css:

/* ========  RESETS  ========= */

html,
body,
div,
h1,
p,
a,
video {
  margin: 0;
  padding: 0;
}

/* ========  HTML, BODY  ======== */

html,
body {
  height: 100%;
}

body {
  font-family: "Lato", sans-serif;
}

 

Gestire il contenuto

 

Il contenuto vogliamo posizionarlo sopra il video e per far questo ci affidiamo al nostro vecchio “z-index” mantenendo invece il video fisso:

/* =======  CONTENT  ======== */

.content {
  position: relative;
  z-index: 2;
}

/* ========  VIDEO  ========== */

.video {
  position: fixed;
  z-index: 1;
}

 

Ancora un po’ di stile per poi concentrarci sul video:

.content {
  position: relative;
  top: 30%;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

.content_titolo {
  margin-bottom: 24px;
  color: rgb(39,39,39);
  font-size: 44px;
}

.content_testo{
  margin-bottom: 24px;
  color: rgb(89,89,89);
  font-size: 22px;
}

.content_cta {
  display: inline-block;
  margin: 0;
  padding: 12px 48px;
  color: rgb(255,60,100);
  font-size: 22px;
  text-decoration: none;
  border: solid 4px rgb(255,60,100);
}

 

Ora centriamo perfettamente il video:

.video {
  position: fixed;
  top: 50%; 
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

 

Infine gestiamo la grandezza full screen video. Il css del video diventa :

.video {
  position: fixed;
  top: 50%; 
  left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

 

Controllare il video

 

Ci sono molti controlli per il video com potete osservare qui ma noi sposteremo la nostra attenzione solamente su tre di questi che dovranno per una question e prettamente estetica rimanere nascosti all’utente:

  • autoplay –  specifica quando il video partirà
  • muted – specifica la configurazione di default dell’audio
  • loop – specifica se il nostro video terminerà o ricomincerà dall’inizio

Autoplay ci permetterà quindi di nascondere i comnandi, muted toglierà ogni traccia audio nel notro video e loop farà sì che una volta terminata la riproduzione ricomincierà ininterrottamente. Il nostro html diverrà:

<video id="il-mio-video" class="video" autoplay muted loop>
  <source src="media/demo.mp4" type="video/mp4">
  <source src="media/demo.ogv" type="video/ogg">
  <source src="media/demo.webm" type="video/webm">
</video><!-- /video -->

 

Bene ed ora è giunto il momento di verificare la DEMO!

 

Leave a comment