html5 video tag esempio

Html5 tag video – esempio

Html5 ha introdotto diversi nuovi tag che rendono la programmazione di pagine web più fluida ed, offrono la possibilità di scrivere meno javascript ma allo stesso tempo, di creare pagine più interattive, oggi vediamo il tag video.

Html5 tag video

Vediamo subito come scrivere il codice base per mostrare un video presente su un server streaming nella nostra pagina web:

1
2
<video src="bunny.mp4" width="480" height="270">
</video>

semplice no? Ora vediamo gli attributi disponibili per questo tag:

autoplay() : inserito nel tag carica il video automaticamente quando la pagina viene aperta;

controls() : inserito come attributo visualizza i controlli per alzare/abbassare il volume, vedere il filmato a schermo intero ecc un po' stile youtube;

loop()

: questo permette al video di essere riprodotto all'infinito; height(numero) : serve a specificae l'altezza del video; width(numero) : serve a specificare la larghezza del video;

poster(stringa) : questo è interessante perchè, permette di visualizzare un'immagine come anteprima del video, un immagine che deve essere caricata e quindi non uno shoot del filmato, il valore che accetta è l'url dell'immagine; src(stringa) : l'url del video, ricorda che deve essere necessariamente su un server che supporta lo streaming, altrimenti il video non verrà visualizzato; preload('auto' , 'metadata' , 'none') : questo attributo è importante al fine di ottenere un caricamento della pagina fluido, infatti serve a specificare cosa viene carica nel player quando viene visualizzato, i valori che si possono settare sono appunto 'auto' per caricare l'intero video, 'metadata' carica solo qualche frame, 'none' non carica nulla fino al play, il valore di default per la magior parte dei browser è 'metadata'; type(mime) : dichiara il mime type del video, nel caso di un file mp4, ad esempio, sarà video/mp4.

Un esempio più complesso che prevede l’utilizzo di alcuni attributi:

1
2
3
4
5
6
7
8
<video
  controls 
  height="270" 
  preload="none"
  poster="bunny.jpg"
  src="bunny.mp4" 
  width="480">
</video>

Per ovviare alla guerra dei browser, si possono settare diverse sorgenti del video con il tag , i tag source posti come figli del tag video, verrano letti dall’alto verso il basso e sarà caricato il primo video compatibile che verrà trovato, un esempio:

1
2
3
4
5
<video height="270" width="480" controls>
  <source src="bunny.mp4" type="video/mp4">
  <source src="bunny.webm" type="video/webm">
  Il tuo browser non supporta il tag video !
</video>

in questo caso cercherà di visualizzare il filmato bunny.mp4 e, nel caso non fosse possibile passerà al secondo e così via.
Per finire in bellezza vediamo la tabella che specifica la compatibilità dei tipi di video con i browser più conosciuti che, come ben sappiamo, fanno di tutto per complicare la vita a noi poveri coders :P :

Browser 	         MP4       WebM     Ogg
Internet Explorer 9+ 	 SI 	   NO 	    NO
Chrome 6+ 	         SI 	   SI 	    SI
Firefox 3.6+ 	         NO 	   SI 	    SI
Safari 5+ 	         SI 	   NO 	    NO
Opera 10.6+ 	         NO 	   SI       SI

Questo è tutto ragazzi, stay tuned on KaltNetwork