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/ )
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à:
- se abbiamo un solo video da inserire possiamo falo direttamente nel tag < video > ,esempio:
- se ci sono più video, possiamo inserire, nidifcati dentro a una coppia di tag < video > , dei tag < source >
esempio:
< 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 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”.
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/mp4 .mp4
AddType video/webm .webm
See you soon!
Leave a Comment