Il video nel web con HTML5

Scopriamo come utilizzare i video con html5

L’argomento è di grande interesse, perchè con l’utilizzo di html5 e css3 si può fare a meno di flash per riprodurre video nelle pagine web.

E per i vecchi browser che non danno supporto,  si può sempre utilizzare il flash player… !

La libreria Videojs

Come? Semplice, http://videojs.com/ è la soluzione.

In pratica, siccome non esiste una singola combinazione di container video e codecs che siano compatibili con tutti i browser che diano o meno supporto ad html5, per ottenere la massima compatibilità, si vanno a creare

3 varianti di video:

• Un file WebM (codificato VP8 + Vorbis)
• Un file MP4, codifica H.264 e AAC per l’audio
• Un file OGG con codifica Thoera e Vorbis per l’audio

Il file mp4 può essere usato da flashplayer per i browser non compatibili, altrimenti, si può sempre creare un 4° file in formato flv da passare al flash player

Per maggiori info su formati video, codecs, supporto dei browser, rimando a questa interessantissima guida ( http://diveintohtml5.org/video.html ) , che approfondisce sull’argomento conversione nei vari formati video. Nell’articolo fra l’altro, si citano anche alcuni tool free per eseguire le conversioni, come

Miro video converter ( http://mirovideoconverter.com )
o l’estensione FIREFOGG per firefox ( http://firefogg.org/ )

Formati video e supporto dei browser

Quando si parla di Container video, facendo riferimento al file video vero e proprio, si deve pensare ad esso come potrebbe essere un file zip, ovvero un contenitore di una o più tracce video, e di relative tracce audio. Le tracce audio sono relazionate a quelle video attraverso dei marcatori, che consentono la sincronia tra l’audio e il video appunto. La riproduzione del video è un flusso o stream della combinazione di tracce audio e video contenute nel file.

Facendo alcuni esempi:

un file .mp4 ha codifica video H.264 e audio AAC
un file .ogv ha codifica video Theora e audio Vorbis
etc…

I browser possono dare nativamente supporto a uno o più formati video, oppure, al flash player che fungerà da player video, garantendo una coperura praticamente globale.

A livello di codice, HTML5 da sostanzialmente due possibilità:

1.se abbiamo un solo video da inserire possiamo falo direttamente nel tag < video > ,esempio:

<video src= " pippo.mp4 " > </video>

2. se ci sono più video, possiamo inserire, nidifcati dentro a una coppia di tag < video > , dei tag < source >

esempio:

< video width="320" height="240" >
 < source src="pippo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
 < source src="pippo.webm" type='video/webm; codecs="vp8, vorbis"' >
 < source src="pippo.ogv" type='video/ogg; codecs="theora, vorbis"' >
 < /video >

Gli attributi del tag video

il tag video può avere degli attributi:

– width
– height
– controls //per abilitare i controlli
– preload //per caricare nel buffer la quantità necessaria a far partire il video
– autoplay
– poster // url di una immagine segnaposto

Da notare che se uno dei vari video linkati nei tag source avessero misure inferiori, essi non verrebbero forzati alle misure height e width come avviene ad esempio con i tag img, bensì centrati rispetto a quelle misure.

Come si nota dal codice dei tag source dell’esempio di cui sopra, anch’essi hanno degli attributi oltre all’src, ovvero:

– type // informazioni sul container o formato del video es ‘video/webm’
– codecs //sono il video e l’audio codecs, esempio “theora, vorbis”

E’ importante specificare bene le combinazioni audio video e formato per ogni source, altrimenti il rischio che il video non funzioni c’è.

Di fronte a una serie di tag source, il browser si comporta scartando quelli che non riconosce come riproducibili, e riproducendo il primo uitile. Ecco a maggior ragione l’importanza di specificare il type e il codec, altrimenti verrà eseguito il tentativo di riprodurli tutti a uno a uno fino a quello “giusto”.

I MIME TYPE

Per finire, ma non meno importante, dobbiamo essere certi di aver inserito sul server dove si trovano i file video, i MIME TYPE. Specificarlo infatto solo nei tag source non è sufficiente. Questa operazione serve per inserire il MIME appropriato nel content-type dell’header del DOM.

Nei server APACHE lo si può fare nell‘httpd.conf o via .htaccess. In questo ultimo caso, il file va inserito nella directory dove si trovano i file video, e si deve usare la direttiva addType:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

See you soon!