Il video nel web 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 browser che non danno supporto, esempio ie6,7,8 si può sempre utilizzare il flash player... !






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), leggibile da chrome 6+ e opera 10.6+
un file mp4, codifica H.264 e AAC per l'audio, per safari 3+ e chrome 5
Un file ogg con codifica Thoera e Vorbis per l'audio, per firefox 3.5+

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

Sono previste inoltre altre funzionalità, come il fullscreen e lo skinning del player.

Per maggiori info su formati video, codecs, supporto dei browser, rimando a questa interessantissima guida ( http://diveintohtml5.org/video.html ) , che mi ha chiarito alcuni dubbi quando dall'esempio fornito da videojs sono andato a convertire un mio 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/ )


Alcuni chiarimenti sui formati video e il supporto dei browser

- Come detto sopra la tecnica è quella di creare 3 tipologie di video + un eventuale flv se non si vuol passare al flash player un file mp4 con codifica H.264 e AAC per l'audio.

- 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 > , es: < video src= " pippo.mp4 " > < /video >

2 - se ci sono più video, possimao 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 >

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 cvomke avvien ad esempio con i tag img, bensì centrati rispetto a quelle misure

come si nota dal codice dei tag source, 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 fornte a una serie di tag source, il browser si comporta scartando quelli che non riconosce come riproducibili, e riproduicendo d'altro canto 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".

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 inserireil 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