Come si inserisce un video in una pagina Web utilizzando la sintassi HTML5? è semplice:

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

Tutto qui! Questo è ciò che serve per aggiungere un videoplayer al proprio sito senza installare add-on di terze parti o incorporare codici da altri siti, serve solo un semplice tag... se solo fosse così facile!

La complessità di HTML5 nasce non tanto dalla sintassi, quanto dal supporto delle funzionalità da parte dei browser e dal video encoding. Gli sviluppatori web sono abituati a combattere con le compatibilità dei browser, ma a questo si aggiunge lo spinoso problema del disaccordo tra i produttori di browser sugli standard video.

Per scrivere un sito che funzioni in HTML5, bisognerà quindi tener conto sia di come moderni browser quali Chrome, Firefox e Internet Explorer 9 implementano gli standard Web HTML5 per i video, sia di come gestire la visualizzazione nei browser più vecchi.

Limiti e vantaggi

Prima di tutto, per ridimensionare le nostre aspettative, è utile conoscere i limiti di HTML5 per quanto riguarda la riproduzione video.

• Ad esempio la riproduzione Full-screen attualmente non rientra nella specifica HTML5;
• i menu forniti di default dal player sono essenziali e dar loro un aspetto più sofisticato o coordinato con un brand anzidale, può richiedere un certo sforzo;
• a complicare il tutto ci sono i browser, che implemeno HTML5 e i CSS ognuno in modo diverso. Per fare un esempio, se aggiungiamo al video player gli angoli arrotondati su IE e Firefox, potremmo visualizzarlo squadrato su Chrome e Safari.
• non c'è nulla nelle specifiche che permetta uno streaming omogeneo o adattivo, che invece rappresenta una caratteristica essenziale per un sito serio di riproduzione video;
• ma forse è ancor più importante il fatto che la specifica non includa, ed evidentemente non lo farà mai, i Digital Rights Management (DRM). Questo significa che i contenuti protetti da copyright non potranno essere distributi attraverso HTML5 (almeno non dai detentori del copyright);
• e, naturalmente, i codec. Ma ne riparleremo tra breve.

Ma cosa si ottiene in cambio della rinuncia a queste cose? Un bel po', in realtà.

Prima di tutto, gli sviluppatori occasionali di siti che non sono super-specializzati sulla riproduzione video riescono ad inserire video in streaming in modo molto più facile e senza passare per siti di terze parti come YouTube o Vimeo.

In precedenza, gli sviluppatori avevano fondamentalmente tre opzioni per fare direttamente l'embed video:

• L'embed di un file non-streaming, che quindi doveva essere scaricato per intero prima di essere riprodotto;
• l'acquisto di plugin di terze parti (che potevano o meno funzionare su tutti i browser);
• l'uso di un media server dedicato, una soluzione troppo costosa e/o complicata da usare per la maggior parte dei siti.

HTML5 risolve questi problemi e offre una cornice personalizzabile per riprodurre video in streaming senza ricorrere a software di terze parti.

In secondo luogo, le specifiche HTML5 ci permettono di distribuire video su piattaforme proprietarie, come quelle dei prodotti iOS (iPhone, iPad). Ma guardando a questo aspetto da un'altra prospettiva, ciò libera gli sviluppatori dai vincoli imposti dalle piattaforme di distribuzione proprietarie che possono limitare o controllare come vengono distribuiti i file media. Dopo tutto, è questo il motivo per cui esistono gli standard aperti.

Infine, HTML5 non è tecnologia aliena: è l'ultima revisione di HTML. Ciò significa che possiamo lavorare tranquillamente anche con JavaScript e CSS e manipolare il codice lato client o lato server, come siamo abituati a fare.

Codec Video

Come già accennato, la sfida più grande con i video HTML5 consiste nel preparare e incorporare i propri contenuti usando codec multipli. Attualmente, ogni browser privilegia un particolare formato video e questa implementazione frammentata del video HTML5 sembra dover arrivare al limite prima di poter migliorare.

Al momento quindi abbiamo tre possibili opzioni per l'encoding video:

1. H.264 - formato popolare che può sfruttare l'accelerazione hardware, supportato da chip grafici di pc desktop e dispositivi mobili; è anche il formato di registrazione di default per molti dei più recenti dispositivi video e mobile presenti sul mercato. Tuttavia il formato è proprietario e finché rimane royalty free per un uso non commerciale, diventa complicato e potenzialmente costoso quando si tratta di distribuire contenuti per scopi commerciali. In questo documento troviamo maggiori dettagli.
   Attualmente supportato da: IE 9, Safari (dalla 3.1), da Chrome e FF solo tramite plugin.
2. OggTheora - uno standard aperto che non è depositato ed è royalty free.
   Supportato da: Firefox (dalla 3.5), Chrome, Opera 10.5;
3. VP8 (WebM) - un nuovo formato standard acquistato da Google e rilasciato con licenza open source, royalty-free (ma depositato).
   Supportato da: Firefox (dalla 4.0), Chrome, Opera 10.6.

Ecco un grafico che rende più semplice e immediato il confronto:

Chrome merita una menzione speciale, poiché Google ha smesso di supportare uno dei tre formati video di HTML5. Dopo l'acquisizione di On2, sviluppatore e sponsor del formato WebM, Google ha annunciato che versioni successive di Chrome avrebbero più supportato H.264. Invece è stato rilasciato WebM sotto licenza BSD, garantendo agli utenti di tutto il mondo una licenza libera, non esclusiva e senza royalty.

Così cambiato anche Chrome, che era l'unico browser a supportare tutti e tre i formati, il mercato si divide tra due browser istallati di default nei propri sistemi operativi, Internet Explorer e Safari, che supportano H.264 e tutti gli altri browser che supportano tutto tranne H.264.

Una nota importante: per semplificare l'esposizione, in questo articolo non approfondiremo le molteplici varianti ai tre formati di base esistenti. Una volta entrati nei meandri delle peculiarità di profili video e audio e della distinzione tra i contenitori video e audio e i codec, le cose si complicano ulteriormente. Per esempio, anche se l'iPhone 4 registra video in formato H.264, non potremmo semplicemente inserire il video realizzato con lo smartphne su un sito HTML5, sarebbe comunuque necessario convertirne il formato.

Quale codec scegliere?

Sarebbe bello poter dichiarare che lo standard video 'X' è quello universalmente più supportato e che pertanto questo dovrebbe essere il formato da sceglire per i propri video HTML5. Purtroppo, come si vede nella figura precedente, non è così.

Se si includesse un'installazione user-driven delle estensioni dei browser, il formato più supportato sarebbe OggTheora. Tuttavia, non è possibile pretendere che gli utenti, specialmente nei luoghi di lavoro, abbiano il know-how o la capacità necessarie per installare codec aggiuntivi o estensioni del browser solo per vedere video HTML5.

Ma se per qualche motivo è necessario scegliere un unico codec per i propri video, quale si dovrebbe scegliere? Dipende. Andrebbero considerate le seguenti opzioni:

H.264

Dei tre standard, H.264 è quello meglio percepito in termini di qualità e affidabilità dai professionisti dei media. In più può contare sull'appoggio di aziende tra le più grandi sul mercato, come Microsoft e Apple, tramite MPEG_LA. E proprio questo genera la critica più importante: H.264 non è free.

Per i gli utenti è gratis, ma la maggior parte degli sviluppatori non vogliono avere problemi di licenza (per ora). Anche se questo potrebbe non essere il caso dei siti di distribuzione video. I pro e i contro delle licenza di H.264 vanno ben oltre la portata di questo articolo (e potrebbero generare confusione), basti dire che in molti vi si oppongono.

Per la maggior parte degli sviluppatori, la questione dei brevetti si riduce in gran parte ad un argomento filosofico tra standard aperti e la qualità delle immagini. H.264 offre una qualità di immagine superiore ed uno streaming migliore di Ogg e VP8 (WebM). In più gode anche di ottime prestazioni, potendo sfruttare l'accelerazione hardware su più piattaforme tra cui PC e dispositivi mobili.

Infine, si consideri la semplicità di produzione, non un problema insignificante. Tutti i principali editor video, tra cui Final Cut, Adobe Premiere e Avid, esportano in formato H.264. Lo stesso non si può dire per OggTheora o VP8. Chi produce da sé i propri video, come molti fanno, utilizza esclusivamente il formato H.264 e non ricorrervi significa tagliare fuori una grossa fetta di utenti.

OggTheora

OggTheora è l'unico standard veramente libero da brevetti. Tuttavia, è probabilmente anche quello con la qualità più bassa, anche se non di molto. Molti confronti testa a testa con H.264 hanno dato per favorito il secondo. Ogg codifica i file in maniera leggermente più rigorosa, ma produce una qualità d'immagine inferiore a H.264 e ha maggiori problemi nello streaming.

VP8 (WebM)

Tra i due estremi, alta qualità ma coperto da brevetti (H.264) e qualità marginale ma royalty-free (Ogg), troviamo VP8, probabilmente lo standard più controverso dei tre. Finora i test hanno dimostrato che H.264 offre una qualità video leggermente superiore a quella di VP8, ma la differenza è trascurabile per la maggior parte a fini commerciali.

La discussione più grande si basa fondamentalmente sullo scegliere o meno standard aperti. Da una parte c'è Google che si tiene lontano da H.264 in favore del suo standard "open" WebM, anche arrivando a rilasciare WebM sotto licenza Creative Commons. D'altra parte, ci sono praticamente tutti gli altri che sostengono che, in questo caso, "open" non significhi veramente "aperto". Portanto a paragone il caso delle cause JPEG, ad esempio, Microsoft sottolinea che anche se il brevetto di WebM non appartiene a Google, senza un'esplicita identificazione dell'utente da parte di Google, molte aziende e individui, distribuendo video WebM, potrebbero trovarsi nella condizione di dover giustificare una violazione del brevetto, verosimilmente con MPEG LA.

In sintesi, come nella maggior parte dei casi, non esiste un'unica soluzione adatta alle esigenze di tutti i progetti, in tutte le circostanze. Ma per la maggior parte dei progetti, nella maggior parte dei casi, probabilmente si tenderà a scegliere H.264. Non solo perché è il formato più diffuso, sia da parte della produzione che del consumatore finale, ma anche per i vantaggi di prestazioni ache offre per merito dell'accelerazione hardware. Tuttavia, per i siti di video commerciali, i diritti di licenza possono potenzialmente costituire un enorme deterrente.

Ma tutta questa discussione serve a poco, il punto è un altro: se ora, o nel prossimo futuro, tutti i browser supporteranno HTML5 comunque, non tutti i browser supportano ogni codec. Così come non non si vuole che un foglio di stile sembri perfetto su IE non funzioni su Firefox, allo stesso modo sarebbe desiderabile creare tag video cross-compatibile.

Convertitori Video

Questo significa, in termini pratici, che gli sviluppatori devono codificare i contenuti video in almeno due formati video (l'ideale sarebbe in tutti e tre) per lavorare con le specifiche HTML5. Per fortuna, esistono vari strumenti pronti per aiutarvi in questo compito.

Miro Video Converter: lo strumento principale, questo convertitore open source, disponibile sia per Mac che per Windows, converte praticamente qualsiasi sorgente video in tutti i formati che si potrebbero voler usare in HTML5, così come molti altri formati specifici per diversi dispositivi e piattaforme.

Handbrake: un altro convertitore open source per Mac e Windows (e Linux), ma buono solo per la conversione in H.264.

MPEG Streamclip (): anche se non open source, MPEG Streamclip è disponibile gratuitamente sia per Mac che per Windows. Anche lui funziona per H.264 e converte anche verso molti altri formati utili al di fuori delle specifiche HTML5.

Firefogg: un'estensione per Firefox che converte video solo in formato Ogg, da cui il nome. Per usarlo, è necessario prima scaricare Firefox e poi installare l'estensione.

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.

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.