Howtoweb.it

Lezioni di HTML 5
Lezione 4 – L’elemento video

Una delle funzionalità più interessanti dell’HTML 5 è senza dubbio rappresentata dalla possibilità di inserire filmati video all’interno della pagina web.

Questo elemento cambia notevolmente il modo in cui gli utenti possono usufruire dei video su internet permettendo la visione del contenuto senza un player flash.

L’attuale supporto per questo elemento è riservato alle ultime versioni di firefox, safari e chrome ma la stessa microsoft ha annunciato il supporto per Internet explorer 9 mentre per Opera dalla versione 10 (10.5).

Per iniziare

Prima di iniziare con il codice è indispensabile ricordare che non tutti i browser supportano gli stessi contenitori e gli stessi codecs audio/video. Un file video è di fatti composto da un contenitore (mpeg4,flash video, ogg ecc), un codec audio (mpeg1,vorbis, ecc) e un codec video (mpeg4 asp, h.264, theora).
Per portare un po’ di ordine in questa situazione è utile tener presente ciò che è supportato dai browser e preparare due files. Uno con theora,vorbis e ogg e il secondo con h.624,aac e mp4.

Il primo files sarà supportato da firefox, opera e chrome il secondo da chrome, safari, iphone e android.

Per la conversione dei files di questo esempio sono stati utilizzati ffmpeg2theora ed handbrake .

L’elemento video

Per integrare nella pagina web il nostro video utilizziamo l’elemento video con chiusura esplicita.

<video></video>

Al suo interno è possibile specificare un contenuto alternativo nel caso il browser non supporti questo elemento.

<video>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Considerato che l’elemento video si comporta come l’elemento immagine necessita sempre di avere un altezza e una larghezza specifica.

<video width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per inserire il video sorgente aggiungiamo l’attributo src con la path relativa alla risorsa.

<video src="miovideo.ogv" width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per rendere visibili i controlli del video è sufficiente aggiungere l’attributo controls.

<video src="miovideo.ogv" width="640" height="480" controls>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Se desideriamo che il video venga scaricato non appena la pagina è caricata possiamo aggiungere l’attributo preload.

<video src="miovideo.ogv" width="640" height="480" preload>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

O in caso contrario specificare “none” come valore.

<video src="miovideo.ogv" width="640" height="480" preload="none">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima opzione viene offerta dall’attributo autoplay che fa partire automaticamente il filmato.

<video src="miovideo.ogv" width="640" height="480" autoplay>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima nota va dedicata al fatto che abbiamo due file da inserire e non uno, l’attributo src non è quindi sufficiente e dobbiamo utilizzare l’elemento source con l’attributo src per definire la risorsa.
In aggiunta è necessario specificare il mime del file e i codecs per far sì che il browser sappia a priori cosa andrà a caricare e se è supporta lo specifico file.

<video  width="640" height="480" autoplay>
<source src="miovideo.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="miovideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

In conclusione

Una volta applicato questo codice con i relativi percorsi ai rispettivi files si ottiene un risultato come in questo esempio.

Il video utilizzato nell’esempio è  visibile su youtube ed è stato gentilmente fornito da Guido Viale Marchino che ringrazio per l’aiuto.

Una funzionalità aggiuntiva per i browser che non supportano il tag video potrebbe essere quella di aggiungere un flash player come contenuto alternativo ma richiede una verifica del supporto dell’elemento video per il client utilizzato dall’utente.

Nel prossimo articolo vedremo come verificare il supporto delle varie funzionalità dell’HTML 5 nel browser dell’utente. Torna a trovarmi su howtoweb.it per le prossime lezioni di html 5 o iscriviti agli rss per rimanere sempre aggiornato sui nuovi articoli.

Nota:

Ho notato che inizialmente il video non veniva caricato correttamente su firefox e opera, il problema era il fatto che il mime video/ogg non veniva associato da apache al file in formato .ogv

Per risolvere ho aggiunto un file .htaccess nella cartella specificando a quali formati applicare il mime presente nela pagina html.

Nel caso incontriate la stessa problematica è possibile risolvere con questa linea di codice all’interno del file .htaccess

AddType video/ogg .ogg .ogv

Tag: browser, html, html 5, web design