Il tag Video di HTML5

26 novembre 2011

Come ricorderete, nell’embed video in HTML5, è necessario ricorrere all’uso di un singolo tag: <video>. Ma come per ogni tag HTML, ci sono tante opzioni da utilizzare come parametri. Qui ci sono gli elementi essenziali all’interno del tag stesso:

src è la posizione e il nome della sorgente video, funziona allo stesso modo del parametro src del tag <img>. Si noti, tuttavia, che invece di individuare la fonte video qui è possibile, e probabilmente auspicato, farlo al di fuori del tag (vedi sotto).

<video id="sampleMovie" src="HTML5Sample.mov"></video>

width ed height (opzionali) sono le dimensioni del video. Più precisamente, queste sono la larghezza e l’altezza del fotogramma video, piuttosto che il video stesso. Come per <img>, non metterle fà sì che il browser utilizzi le dimensioni di default del video di originale.

Tuttavia, a differenza di <img>, mettere una dimensione diversa da quella d’origine causa un ridimensionamento proporzionato del video, piuttosto che una sua distorsione. In altre parole, il video incorporato manterrà lo stesso rapporto tra le dimensioni. Se si specifica una dimensione inferiore rispetto all’originale, l’intero video si ridimensiona. Tuttavia, se si specifica una dimensione più grande, il video verrà visualizzato nella sua dimensione originale.

<video id="sampleMovie" src="HTML5Sample.mov" width="640" height="360"></video>

controls: aggiunge video control overlay di default. Questo è utile se non si vuole creare un proprio controllo personalizzato. Comunque, se si vogliono personalizzare i controlli del lettore, è possibile utilizzare JavaScript e CSS. La specifica permette la manipolazione metodi e proprietà come play(), pause(),(), currentTime, volume, muted e altro ancora.

<video id="sampleMovie" src="HTML5Sample.mov" controls></video>

preload: inizia il download del video non appena l’utente va sulla pagina. Per far sì che il video carichi in anticipo, è sufficiente includere l’attributo. Per evitarlo basta impostare l’attributo uguale a ” none “.

<video id="sampleMovie" src="HTML5Sample.mov" preload></video>
<video id="sampleMovie" src="HTML5Sample.mov" preload="none"></video>

autoplay: il male puro. Questo indica al browser di avviare la riproduzione del video non appena la pagina viene caricata. Da non usare.

<video id="sampleMovie" src="HTML5Sample.mov" autoplay></video>

Ora arriva la magia. Le specifiche HTML5 includono una funzione che permette di compensare le disfunzioni del browser ancora presenti sui formati video. Anziché specificare la sorgente video utilizzando l’attributo src, è possibile annidare più tag all’interno del tag <video>, ognuno con una sorgente video diversa. Il browser legge automaticamente l’elenco e sceglie il primo che è in grado di riprodurre. Per esempio:

<video id="sampleMovie" width="640" height="360" preload controls>
	<source src="HTML5Sample_H264.mov" />
	<source src="HTML5Sample_Ogg.ogv" />
	<source src="HTML5Sample_WebM.webm" />
</video>

Se si testa questo codice su Chrome, si dovrebbe ottenere il video WebM, o anche in H264. Eseguendolo in Firefox, ince, si vedrà invece il video Ogg.

Idealmente, anche se non strettamente necessario su tutti i browser, si dovrebbe includere un tipo MIME nel tipo parametro, per assicurare la compatibilità con tutti i browser. Questo parametro dovrebbe specificare il tipo di video, così come il codec video e audio. La specifica del parametro dipenderà esclusivamente da come si codifica il video, esistono molti modi.

<video id="sampleMovie" width="640" height="360" preload controls>
	<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
	<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

Un esempio di tre tipi di video in azione su mio sito.

In questa pagina, è presente il codice sorgente per tre diversi video: H.264, Ogg e WebPM. I video stessi sono etichettati con i loro codec, in modo da poter vedere cosa mostra il proprio browser.

Una piccola precisazione sui tipi MIME: il server deve essere configurato per riconoscere i vari tipi. Per Windows Server, questo significa aggiungere le voci per i vari tipi MIME all’IIS. Per i server Apache, è necessario aggiungere la direttiva AddType al vostro file httpd.conf o htaccess.:

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

Graceful Degradation

Anche se un tag <video> multi-source funziona sui browser “HTML5 ready”, ancora non fa lo stesso sui browser ante-HTML5. Fortunatamente, la specifica include un meccanismo per la compatibilità verso il basso.

Possiamo prendere i tag <object> che utilizziamo o che abbiamo utilizzato prima di HTML5, e aggiungerli in fondo alla lista dei parametri <source>. Tipicamente, gli object specificano il player che si sta utilizzando (presumibilmente un plug-in di terze parti), e i loro parametri, come la fonte video da utilizzare per quel player.

L’esempio seguente utilizza Flowplayer, un popolare player di terze parti con una versione disponibile gratuitamente.

<video id="sampleMovie" width="640" height="360" preload controls>
	<source src="HTML5Sample_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
	<source src="HTML5Sample_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
	<source src="HTML5Sample_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />
	<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
		<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
		<param name="allowFullScreen" value="true" />
		<param name="wmode" value="transparent" />
		<param name="flashvars" value='config={"clip":{"url":"HTML5Sample_flv.flv","autoPlay":false,"autoBuffering":true}}' />
	</object>
</video>

Un eccellente articolo che entra più nel dettaglio è “Video for Everybody Video for Everybody” di Kroc Camen. Potete anche trovare un generatore di codice che include tutti e tre i formati video e un oggetto flash in “Video for Everybody Generator” di Jonathan Neal.

Link utili

Per saperne di più sui video in HTML5 e sui specifici codec:

Questa è la traduzione dell’articolo How to Embed Video Using HTML5 di Justin Whitney, pubblicato originariamente su htmlgoodies.com. La traduzione viene qui presentata con il consenso dell’editore e dell’autore.

Se vuoi aggiornamenti su Il tag Video di HTML5 inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Il tag Video di HTML5

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy