Guida HTML5: i tag audio e video – parte 2

Nello scorso articolo abbiamo parlato degli enormi progressi che ha compiuto l’HTML5 per consentire un maggiore supporto agli elementi multimediali e abbiamo introdotto il tag <audio>, dando spazio anche ad alcune considerazioni sui formati e sulla compatibilità che ti invito a rileggere, data l’attinenza con questo capitolo dedicato all’elemento <video>.

Una volta ripassata la scorsa lezione, siamo pronti ad iniziare!

Video

Il tag dedito a gestire i video è molto simile a quello che abbiamo utilizzato per i file audio. Iniziamo subito con un esempio pratico, inserendo un filmato nella nostra pagina:

<p>Un video di wi.u’ upset&reg;</p>
<video src=”video/wiiu_upset.mp4”></video>

Il quale apparirà, in Google Chrome, così:

Schermata 2014-05-21 alle 16.46.23

Anche gli attributi legati al tag <video> sono, in parte, gli stessi usati con i tag <audio>:

  • controls – indica al browser di visualizzare o meno il player con i relativi comandi predefiniti
    <video src=”video/wiiu_upset.mp4” controls></video>
    
  • loop – riproduce in modo continuativo il video
    <video src=”video/wiiu_upset.mp4” loop></video>
    
  • autoplay – riproduce il file automaticamente senza bisogno d’interazione da parte dell’utente
    <video src=”video/wiiu_upset.mp4” autoplay></video>
    
  • preload – configurabile con i tre valori auto, metadata e none. Il primo inizia il prima possibile il preload, il secondo carica immediatamente solo i dati estraibili dal file, come la durata totale, e il terzo inibisce il preload fino al click dell’utente.
    <video src=”video/wiiu_upset.mp4” preload=”auto”></video>
    <video src=”video/wiiu_upset.mp4” preload=”metadata”></video>
    <video src=”video/wiiu_upset.mp4” preload=”none”></video>
    

A questi si aggiungono height e width che, come possiamo intuire, specificano rispettivamente l’altezza e la larghezza, espresse in pixel, della finestra video.

<video src=”video/wiiu_upset.mp4” height=”300” width=”400”></video>

Generalmente questi valori dovrebbero corrispondere proporzionalmente all’altezza e alla larghezza naturale del video, ma in alcuni casi potrebbe essere conveniente specificarli per evitare fastidiosi errori di posizionamento nel layout.

Per finire, poster, ci permette di specificare l’immagine d’anteprima che verrà mostrata prima dell’avvio del filmato. Questo attributo verrà utilizzato soprattutto dai browser nelle seguenti situazioni: quando abbiamo disabilitato il preload (quindi settato su none), quando il primo frame ancora non è stato caricato oppure quando la sorgente video non è stata trovata.

Il codice, in pratica, risulterà:

<video src=”video/wiiu_upset.mp4” poster=”video/poster.jpg”></video>

Proprio come con l’elemento <audio>, anche in questo caso, per motivi di compatibilità tra dispositivi e browser, necessitiamo di usare almeno due formati differenti per coprire la maggior parte dei possibili fruitori del sito (vedi sezione ‘formati e compatibilità’ del capitolo precedente).

L’elemento <source> ci permette, anche stavolta, di specificare diverse sorgenti:

<video height="480" width="640">
     <source src="video/wiiu_upset.mp4" type="video/mp4">
     <source src="video/wiiu_upset.ogv" type="video/ogv">
</video>

Nasce, a questo punto, spontanea la riflessione: quante sorgenti dobbiamo specificare per ottenere un livello accettabile di compatibilità?

Diciamo che per ritenerci parzialmente soddisfatti dovremmo utilizzare, come nell’esempio, un mp4 affiancato da un ogv (in alternativa puoi usare anche il webm in sostituzione dell’ogv tenendo conto, però, che non risulterà compatibile con alcune vecchie versioni di Firefox e Opera) e da un cosiddetto flash fallback.

Fallback

Letteralmente il termine inglese fallback vuol dire ripiego, scorta ed è con questo vocabolo che si indica la porzione di codice a cui i browser che non supportano l’HTML5, fanno riferimento. Nel nostro caso, continuando a parlare del tag <video>, potrebbe essere utile inserire un messaggio che avvisi l’utente di aggiornare il proprio browser.

<video height="480" width="640" controls>
     <source src="video/wiiu_upset.mp4" type="video/mp4">
     <source src="video/wiiu_upset.ogv" type="video/ogv">
     <p>Il tuo browser non supporta i video HTML5, per favore aggiornalo.</p>
</video>

Analizzando questo codice, capiamo che i browser che supportano il tag <video> adopereranno i file mp4 e ogv contrariamente a chi, non riuscendo a interpretare il tag, visualizzerà il messaggio racchiuso tra il tag <p>.

Esistono anche altri tipi di fallback, decisamente più complessi ed efficaci, come quello in Flash. Proprio come poco fa, anche in questo caso solo i browser che non riescono a caricare il player HTML5 faranno affidamento su un player alternativo in Flash.

Ad esempio utilizzando questo codice:

<video width="640" height="480" controls>
     <source src="video/wiiu_upset.mp4" type="video/mp4" />
     <source src="video/wiiu_upset.ogv" type="video/ogg" />
     <object width="640" height="480" type="application/x-shockwave-flash"      data="video/wiiu_upset.swf">
          <param name="movie" value="video/wiiu_upset.swf" />
          <param name="flashvars" value="controlbar=over&amp;file=video/wiiu_upset.mp4" />
    </object>
</video>

Non abbiamo fatto altro che inserire, sempre all’interno del tag <video>, il tag <object> che andrà a caricare la versione swf del nostro video qualora i tag <source>.

Infine, potremmo voler considerare anche la fascia di utenti che non possono usufruire né del video in HTML5 né di Flash, aggiungendo al fallback un immagine poster, un messaggio e dei link che rimandano al download del filmato.

All’interno del tag <object>, quindi, andremo a scrivere:

<img src="video/poster.jpg" alt="wi.iu upset">
<p>Il tuo browser non supporta i video HTML5 o Flash, per favore aggiornalo.</p>
<p>Nel frattempo puoi scaricare il video in <a href="video/wiiu_upset.mp4">MP4 H.264</a> o in <a href="video/wiiu_upset.ogv">Ogg Theora</a></p>

Conclusione

Ti ricordo che puoi scaricare l’archivio zip di questa lezione contenente il codice completo.

Nel corso del prossimo articolo vedremo come arricchire, modificare e controllare, grazie ad alcune righe di JavaScript, il nostro player in HTML5.

E tu? Cosa ne pensi di questa nuova modalità per riprodurre elementi multimediali? Quali pensi siano le migliorie più incisive rispetto a Flash?

GUIDA HTML5: GLI ARTICOLI
1) Guida HTML5:Introduzione
2) Guida HTML5: la prima pagina
3) Guida HTML5: la struttura
4) Guida HTML5: Immagini e outlines
5) Guida HTML5: nuovi elementi semantici 
6)Guida HTML5: i form – Parte 1 
7)Guida HTML5: i form – Parte 2
8)Guida HTML5: i form – Parte 3
9)Guida HTML5: i form – Parte 4
10)Guida HTML5:i tag audio e video – parte 1
11)Guida HTML5:i tag audio e video – parte 2
12) HTML5: Il canvas – Parte 1

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

5 commenti

Trackback e pingback

  1. Guida HTML5: i tag audio e video (parte1) | Your Inspiration Web
    […] Parte 3 9)Guida HTML5: i form – Parte 4 10)Guida HTML5:i tag audio e video – parte 1 11)Guida HTML5:i tag …
  2. Guida HTML5: il canvas – parte 2 | Your Inspiration Web
    […] – Parte 3 9)Guida HTML5: i form – Parte 4 10)Guida HTML5:i tag audio e video – parte 1 11)Guida HTML5:i …
  3. Guida HTML5: il Canvas – Parte 3 | Your Inspiration Web
    […] Parte 3 9) Guida HTML5: i form – Parte 4 10) Guida HTML5:i tag audio e video – parte 1 11) …

Lascia un Commento

Current day month ye@r *