Inserire un video con HTML5

Indice

Esempio pratico:


Visualizza il codice dell' esempio (codice finale 1)

Introduzione

L'obiettivo di questo documento è individuare un metodo standard per inserire un filmato in una pagina web attraverso il tag <video> di HTML5. Per completezza di informazioni verranno analizzati diversi player gratuiti.

Attraverso HTML5 il W3C ha finalmente introdotto le specifiche necessarie per includere i file multimediali; i browser che già supportano questo linguaggio hanno un player incorporato con tutti i comandi necessari: play, stop, volume etc etc. Tra poco tempo, quindi, con il solo tag <video> si potrà dire addio a plugin, lettori in Flash e tecnologie proprietarie.

Immagine dei controlli nativi sui più diffusi browser in circolazione:

Immagine dei controlli nativi sui più diffusi browser in circolazione

In aggiunta a questo importante risultato c'è da considerare l'esistenza di API in Javascript utili ad estendere enormemente le caratteristiche del player basilare. Si pensi, ad esempio, alla personalizzazione grafica o all'aggiunta di funzionalità come playlist etc etc.

Questo scenario è destinato a realizzarsi completamente tra qualche anno, quando tutti i maggiori browser in circolazione supporteranno appieno HTML5. In questo momento, invece, siamo in una fase transitoria in cui software come Explorer 6,7 e 8 o Firefox 3.0 sono ancora in grado di generare grandi numeri. Ricordiamo, inoltre, che il Gruppo di Lavoro del W3C non ha ancora ufficializzato come standard il nuovo HTML5 (che è ancora in versione "draft" e quindi passibile di cambiamenti).

In alcuni scenari - pensiamo a siti della Pubblica Amministrazione - non è ancora possibile effettuare una migrazione definitiva al nuovo linguaggio, pena l'esclusione di molti utenti da servizi di utilità collettiva. In questo caso l'accessibilità dei contenuti, utilizzando tecnologie obsolete o proprietarie ma de facto divenute uno standard (Flash), prevale senza dubbio sulla sperimentazione.

Un sito come YouTube.com, che già da tempo ha iniziato una conversione dei propri archivi in HTML5, rappresenta un caso isolato che richiede un grosso dispendio di tempo e risorse economiche. Inoltre, in questa fase di transizione, ogni video convertito continua ad avere il suo corrispettivo in versione Flash.

Le caratteristiche di un player HTML5, secondo chi scrive, dovrebbero essere le seguenti:

Attualmente esistono diversi player HTML5 che, utilizzando singole funzioni Javascript o avvalendosi di framework come JQuery e MooTools, permettono l'implementazione di lettori con diverse caratteristiche: fallback in Flash, skin personalizzabili, gestione dei sottotitoli etc etc.

Browser che supportano HTML5

Una tabella riassuntiva aiuterà a focalizzare meglio la situazione attuale:

Browser che supportano HTML5:
Fx 3.0 Fx 3.5 IE6 IE7 IE8 IE9 Safari 3 Safari 4 Chrome 3+ Opera 10.5
NO OK NO NO NO OK OK OK OK OK

Il tag video

Prima di passare all'analisi di 9 player HTML5 - diversi tra loro per caratteristiche e funzionalità - è bene fare conoscenza, a grandi linee, con il tag <video>.

Esempio basilare di tag video:

<video src="test.ogg" controls="controls">
	il tuo browser non supporta HTML5
</video>

Queste 3 righe di codice permettono la visualizzazione di un video in formato OGG su browser come Firefox 3.5 o sup., Chrome 3.x o sup., Opera 10.5 o sup. su piattaforme sia Windows che Linux. Ma il navigatore di casa Microsoft come si comporta? Dipende... dalla versione ovviamente.

Explorer 6, 7 e 8 visualizza il messaggio che avverte l'utente di aggiornare il proprio software. Explorer 9 mostra il video se, e solo se, è installato il plugin QuickTime sul client. Il perchè di questa dipendenza ci viene data dall'estensione del file proposto: OGG (Theora nella versione video e Vorbis nella versione audio). OGG, infatti, è un formato opensource supportato nativamente da alcuni browser ma che IE visualizza solo con l'ausilio di QuickTime.

Per avere la piena compatibilità con Microsoft ed Apple dovremmo convertire il video nel formato MP4 e riscrivere il codice in questa maniera:

<video src="test.mp4" controls="controls">
	il tuo browser non supporta HTML5
</video>

A questo punto, però, si verificherebbe la situazione opposta: Firefox ed Opera non riuscerebbero a leggere il file (Chrome sì poichè è l'unico browser a supportare entrambi i formati).

La situazione è facilmente risolvibile "moltiplicando" a cascata il parametro "src" del tag video. In questo maniera ad ogni browser verrebbe proposto il formato più adatto:

<video controls="controls">
	<source src="video/test.mp4" type="video/mp4" />
	<source src="video/test.webm" type="video/webm" />
	<source src="video/test.ogg" type="video/ogg" />
	il tuo browser non supporta HTML5
</video>

Questo semplice snippet di codice assicura la compatibilità sulla maggior parte dei dispositivi che supportano HTML5, compresi i device mobili come gli SmartPhone (iPhone su tutti).

La prima incogruenza che salta all'occhio è il numero di formati diversi necessari per mostrare il video su tutte le piattaforme più diffuse.

Da una parte, con l'introduzione del tag <video>, si è fatto molto per creare uno standard che non includesse più tecnologie proprietarie come Flash mentre dall'altra, a causa di guerre più o meno ideologiche, si è ancora lontani dall'adozione di un formato video unico. Eppure qualcosa inizia a muoversi.

I tipi di codec

Un approfondimento sui vari codec ci aiuterà a capire meglio lo stato dell'arte.

Attualmente sono 5 i formati video più diffusi con cui è possibile presentare un video sul web:

A questo punto è facile intuire che, anche dal punto di vista dei formati video, si è lontanti da uno standard unico. La piena compatibilità con tutte le piattaforme si raggiunge proponendo un singolo video in 3 formati diversi: mp4, ogg e webm. Per la verità, allo stato attuale, basterebbero i primi due dato che webM si sta ancora ritagliando un proprio spazio.

L'ordine dei formati all'interno del tag <video> non risulta casuale e serve per assicurare la migliore compatibilità con tutti i dispositivi:

<source src="video/test.mp4" type="video/mp4" />
<source src="video/test.webm" type="video/webm" />
<source src="video/test.ogg" type="video/ogg" />

Il primo formato è necessariamente mp4 per il funzionamento su iPad. Apple infatti richiede che il formato mp4 sia il primo della lista. Leggeranno questo file dispositivi come Explorer 9, Safari, Chrome, iPhone, il già citato iPad e device su cui gira Android.

Subito dopo c'è il nuovo webM che verrà letto dall'ultima versione di Opera (Chrome sarebbe in grado ma si ferma al primo video mp4).

Infine c'è il formato ogg valido per Firefox (anche qui Chrome sarebbe in grado ma si ferma al primo video mp4).

Codec supportati dai vari browser

Una tabella riassuntiva sui codec supportati dai vari browser fornirà una panoramica completa:

Codec supportati dai vari browser:
  Fx 3.0 Fx 3.5 Fx 4.0 Opera 10.5 Opera 10.6 Chrome 6.0 Safari IE 6 IE 7 IE 8 IE 9 iPhone Android
MP4 (H.264+AAC) NO NO NO NO NO OK OK OK OK OK OK OK OK
OGG (Theora+Vorbis) OK OK OK OK OK OK NO* NO NO NO NO NO NO
WebM NO NO OK NO OK OK NO* NO NO NO OK** NO OK***

Panoramica su 9 lettori HTML5

Questo documento prende in esame 9 diversi player HTML5. Alla fine della carrellata sarà semplice scegliere la soluzione più adatta alle proprie esigenze.

Il voto finale, oltre che soggettivo ovviamente, include i seguenti parametri di giudizio:

I 9 video presi in esame:

Note sull'accessibilità

Prima di arrivare ad una scelta è necessaria qualche nota sull'accessibilità.

HTML5 è giovane e, come precedentemente accennato, è ancora in versione draft. Ad oggi non è ancora disponibile un attributo standard che permetta di inserire didascalie al video anche se un obiettivo dichiarato è ufficializzare un parametro "track" che permetta di associare testi in più lingue ad un filmato (traguardo già raggiungibile con un player in Flash).

Allo stato attuale esistono diversi metodi, più o meno consoni, per implementare ugualmente dei sottotitoli. Un esempio è LeanBack Player che, con l'ausilio di Javascript, visualizza una trascrizione completa del filmato.

Il difetto più grande di questa soluzione è l'utilizzo del parametro "itext", di fatto inesistente e quindi non standard (impossibile da utilizzare in ambito Pubblica Amministrazione per esempio).

Un'altra soluzione, questa volta pienamente W3C compliant, viene presentata da SRT Video. Si appoggia a javascript con JQuery come framework ma la compilazione del testo trascritto richiede un gran lavoro.

La soluzione migliore (per chi scrive)

La soluzione migliore, per chi scrive, è quella di affidarsi a VideoJS: semplice, personalizzabile e funzionale. L'unico neo è dato dal fatto che non supporta i comandi da tastiera.

Tralasciando il javascript da richiamare nella pagina, il codice base di VideoJS è il seguente:

<video id="example_video_1" class="video-js" width="640" height="264" title="Titolo di prova" poster="img/screenshot.png" controls="controls" preload="auto">

	<!-- MP4 must be first for iPad! -->
	<source src="video/test.mp4" type="video/mp4" />
	<source src="video/test.webm" type="video/webm" />
	<source src="video/test.ogg" type="video/ogg" />

	<object id="myvideo" class="vjs-flash-fallback" width="620" height="280" type="application/x-shockwave-flash" data="video/player.swf">
		<param name="movie" value="video/player.swf" />
		<param name="flashvars" value="image=./img/screenshot.png&file=test.mp4" />
		<img src="img/screenshot.png" width="640" height="360" alt="No video capabilities" title="No video capabilities" />
	</object>

</video>

<p class="vjs-no-video">
	<strong>Download Video:</strong>
	<a href="video/test.mp4">MP4</a>,
	<a href="video/test.webm">WebM</a>,
	<a href="video/test.ogg">Ogg</a><br>
</p>

L'analisi del codice è tutto sommato semplice:

Un codice di questo tipo è funzionale alla maggior parte dei siti ma se ci trovassimo in ambito Pubblica Amministrazione non basterebbe perchè il tag object unico, come visto nel precedente documento "Video XHTML Strict Validato W3C senza Javascript", non è sufficiente per raggiungere la piena compatibilità con gli Explorer più vecchi.

La soluzione finale richiede sicuramente del markup aggiuntivo ma permette di raggiungere un risultato compatibile con la maggior parte dei devices attualmente in circolazione:

Visualizza l'esempio finale 
<video id="example_video_1" class="video-js" width="640" height="264" title="Titolo di prova" poster="img/screenshot.png" controls="controls" preload="auto">

	<!-- MP4 must be first for iPad! -->
	<source src="video/test.mp4" type="video/mp4" />
	<source src="video/test.webm" type="video/webm" />
	<source src="video/test.ogg" type="video/ogg" />

	<object id="myvideo" class="vjs-flash-fallback" width="620" height="280" type="application/x-shockwave-flash" data="video/player.swf">
		<param name="movie" value="video/player.swf" />
		<param name="flashvars" value="image=./img/screenshot.png&file=test.mp4" />
		<img src="img/screenshot.png" width="640" height="360" alt="No video capabilities" title="No video capabilities" />
		<br />
		<a href="#">Scarica il plugin Flash</a> oppure scarica i video nel formato che preferisci:
		<a href="video/test.mp4">MP4</a>,
		<a href="video/test.webm">WebM</a>,
		<a href="video/test.ogg">Ogg</a>
	</object>

</video>

Come si può notare si è preferito spostare il download dei file all'interno del tag object. In questa maniera si potranno scaricare i video solamente se queste due condizioni sono vere:

Il vantaggio principale di questo codice è che non dipende in nessun caso da javascript. Infatti se l'utente ha un browser con supporto HTML5 ma con javascript disabilitato, potrà comunque usufruire del player con i comandi nativi. Se invece è presente un software di vecchia generazione entrerà in gioco il player Flash che poco ha a che fare con la presenza o meno di Javascript (sempre che non si usino librerie come SWFObject).

Il difetto maggiore è che, con browser datati come IE 6 o 7, in caso di mancanza del plugin Flash non verrà proposto il download automatico del componente.
Questo perchè, per attivare l'ActiveX che si occupa di questa procedura, sarebbe necessario il parametro "classid" all'interno del tag object. Tale parametro, però è deprecato in HTML5 e quindi non più utilizzabile.

Note sui codec

Quando si aggiunge un video con il parametro "src" è obbligatorio specificare il type del video con uno dei seguenti formati:

Oltre a ciò, anche se nella maggior parte dei casi non sarà necessario, è possibile aggiungere il codec specifico da utilizzare:

Link utili