Una delle novità più interessati per noi webdesigner è l’introduzione di un unico standard per l’implementazione dei video all’interno dei nostri siti web. Finora infatti è stato necessario utilizzare dei plugin flash e questo ha spesso complicato l’inclusione, portando a volte a problemi di validazione del codice. Dimentichiamoci tutto ciò ed iniziamo a guardare avanti. Con HTML5 infatti il tag video entra prepotentemente nelle nostre vite! Analizziamo quindi, con degli esempi pratici come sempre, tutte le possibilità che ci offre questo nuovo comando. La compatibilità dei browser moderni è molto elevata, la garanzia di totale funzionamento è però offerta solo da: Firefox 3.6+, Opera 10.63+, Safari 5+, Chrome 7+, IE9. Ad ogni modo, per rimanere sempre aggiornarti sul tema vi rimando a questo interessante articolo.

Come funziona il tag video html5

In realtà per visualizzare correttamente un video in html5 è sufficiente usare la seguente dichiarazione:

<video src="filmato.ogg" controls="controls">
</video>

In questo caso, oltre ad aver dichiarato la sorgente del file abbiamo detto di mostrarci i comandi (play, pause ed il volume).

Tuttavia spesso le nostre esigenze sono più ampie, e soprattutto ci sono alcuni attributi che è bene utilizzare sempre (in coda all’articolo trovate la tabella riassuntiva), quali ad esempio le dichiarazioni di larghezza ed altezza. Possiamo quindi ampliare il nostro codice così:

<video src="filmato.mp4" width="320" height="240" controls="controls">
Il tuo browser non supporta il tag video. Aggiornalo!
</video>

Come potete notare, abbiamo inserito una scritta all’interno del tag. Essa verrà mostrato solo per quei browser che non garantiscono ancora il supporto al nuovo tag. Potrete rendervi immediatamente conto di quanto appena detto vedendo l’esempio sottostante (nel caso vediate il lettore ma il video non venisse caricato, probabilmente significa che c’è un’incompatibilità tra i formati con cui il video è stato caricato ed il vostro browser).

Vi sarete però accorti che nei due esempi precedenti, oltre ai nuovi attributi, era presente un’estensione diversa (.ogg e .mp4). Sono infatti supportate entrambe le codifiche. Ma non solo queste (in fondo alla pagina l’elenco dettagliato di tutti i formati utilizzabili). Per cercare di ridurre i problemi di compatibilità è quindi sempre bene caricare i video in tutti i formati disponibili per permettere al browser di scegliere. Come? Includendo entrambi i formati nella dichiarazione del tag video:

<video width="320" height="240" controls="controls">
<source src="filmato.ogg" type="video/ogg" />
<source src="filmato.mp4" type="video/mp4" />
Il tuo browser non supporta il tag video. Aggiornalo!
</video>

Internet Explorer 8 purtroppo non supporta l’elemento video in nessun formato. In IE 9 invece sono supportati i video con codifica MPEG4.
Vediamo ora una tabella riassuntiva di tutti gli attributi che possiamo utilizzare e le relative spiegazioni.

AttributoValoreDescrizione
autoplayautoplaySpecifica se il video deve partire non appena è pronto
controlscontrolsPermette di mostrare i comandi di riproduzione
heightpixelsSpecifica l’altezza in pixel del lettore
looploopPermette di far eseguire il video a ciclo continuo
preloadpreloadPermette di decidere di far iniziare il video solo quando è stato caricato interamente. Questo attributo è ignorato se la funzione autoplay è attiva
srcurl Indica il percorso in cui si trova il video
widthpixelsSpecifica la larghezza del lettore

I formati supportati dai vari browser

Come anticipato prima, purtroppo la guerra degli standard in questo campo è ancora molto accesa, di conseguenza sarà bene preoccuparsi di avere un video a disposizione in tutti i formati possibili affinchè venga correttamente visualizzato da tutti i browser. Vediamo un esempio completo di quello che dovremo quindi scrivere affinchè ciò sia possibile:


Come convertire i video HTML5 nei vari formati?

Come possiamo quindi fare in modo di avere sempre a disposizione un video cross-browser? Se siamo dei maniaci del Mac possiamo avvalerci dell’ottimo Miro Video Converter, grauito ed open source. Per i fan dei PC invece vi rimando a questa lista di utilità, gratuite e non: http://www.webmproject.org/tools/. Ora abbiamo proprio tutto per essere sicuri che tutti vedano il nostro filmato correttamente!