Video HTML5
Una delle novità più interessanti del nuovo HTML5 è il tag <video> che consente di inserire filmati facilmente, senza la necessità di nessun plug-in di terze parti. Questo tag tuttavia è ancora in fase di discussione: nodo della discordai è il codec video da supportare che al momento sono due, MP4 e OGG, il primo supportato da Apple con Safari, da Google con Chrome e da Microsoft con Internet Explorer 9 e il secondo supportano invece da Firefox e da Opera. Ci sono poi naturalmente browser che non supportano ancora HTML5, come tutte le versioni precedenti a Internet Explorer 8 che naturalmente non possono essere ignorati.
Alcuni sito come YouTobe danno già la possibilità agli utenti di scegliere se vedere i video in HTML5 o in formato Flash come era sempre stato fino ad ora.
Gli sviluppatori più prudenti ovviamente sono ancora in attesa di vedere cosa succede, ma un modo per supportare tutti i browser in attesa di una decisione definitiva esiste, allora perché non iniziare a usare questa funzione? Osservate il listato qui sotto, si tratta del tag <video> che carica un video in MP4 con la funzione autoplay che fa partire il video in automatico, la funzione controls, che attiva il pulsante Play e Pausa per controllare il filmato, infine src che contiene il percorso al video.
<video autoplay="autoplay" controls="controls" src="video.mp4"></video>
Un video formattato in questo modo, come visibile in figura 1, sarebbe compatibile solo con Safari, Chrome e Internet Explorer 9.
Figura 1: un video in HTML5 con codec MP4, in esecuzione dentro a Google Chrome per Windows
In realtà è possibile supportare anche Firefox e Opera che supportano solamente il codec OGG. Osservate il listato qui sotto: rispetto a quello precedente abbiamo aggiunto lo stesso video convertito con il codec OGG, separando il percorso del filmato dal tag <video> principale e inserendoli entrambi con il tag <source>.
<video autoplay="autoplay" controls="controls">
<source src="video.mp4">
<source src="video.ogg">
</video>
Facendo in questo modo ogni browser caricherà il file che è in grado di supportare, ignorando l'altro ed evitando inutili messaggi di errore. Nella figura 2, potete osservare il video OGG in esecuzione su Firefox per Mac. Da notare che nel codice sono presenti entrambi i formati.
Figura 2: un video in HTML5 con codec OGG, in esecuzione dentro a Firefox per Mac
E gli altri browser?
Essendo ancora in fase transitoria, l'HTML5 non è ancora supportato da tutti i browser, come ad esempio InternetExplorer 8 e tutte le versioni precedenti. Per questi browser una soluzione esiste, ed è quella che si è sempre usata fino a poco fa, ossia i video in Flash.
Ovviamente bisogna fare in modo che il video convertito in formato FLV (Flash video), non vada a disturbare il video HTML5 quando la pagina viene aperta da un browser come Safari che l'HTML5 lo supporta. La cosa è assai semplice basta rinchiudere il codice del video Flash all'interno del tag <video>, in questo modo i vecchi browser ignoreranno il tag e vedranno solo il file Flash, mentre quelli che supportano i video HTML5, caricheranno il formato supportato.
Nella figura 3, potete vedere il video in versione Flash che gira all'interno di Internet Explorer 8, sulla stessa pagina dove sono presenti le due versioni HTML5 in MP4 e in OGG che naturalmente non sono visibili.
Figura 3: i browser che non supportano l'HTML5, caricano il video in formato Flash
Conclusioni
In questo articolo abbiamo visto come inserire video MP4 e OGG contemporaneamente per supportare tutti i browser in grado di leggere il nuovo HTML5. Infine abbiamo visto come mantenere la compatibilità con i vecchi browser inserendo all'interno dei tag HTML5, quello necessario all'esecuzione di un file Flash.
|
