HTML5 video: inserire video nelle pagine HTML

HTML5 video: inserire video nelle pagine HTML

In questo articolo vedremo come inserire un video all'interno di una pagina web usufruendo delle nuove funzionalità offerte da HTML5. Per adempiere a questo scopo è stato introdotto un nuovo tag dal WHATWG denominato

HTML5 Geolocation: la geolocalizzazione tramite browser
HTML5 storage: rendere i dati persistenti lato client
HTML5 canvas: come disegnare in HTML5 – Prima Parte

In questo articolo vedremo come inserire un video all’interno di una pagina web usufruendo delle nuove funzionalità offerte da HTML5. Per adempiere a questo scopo è stato introdotto un nuovo tag dal WHATWG denominato <video> che permette di includere un video in diversi formati all’interno dell’HTML senza dover aggiungere plugin esterni come player Flash o QuickTime.

Prima di analizzare il tag <video>, diamo uno sguardo a quali sono i formati video e audio supportati e soprattutto cosa si nascondo dietro un file video. I file video che possiamo trovare in rete con estensione .avi o .mp4 non sono dei veri e proprio file ma dei contenitori di files. Al loro interno sono conservate più tracce: una traccia per il video senza audio e più tracce per il formato audio.

I principali “container” video sono:

  • MPEG 4, con estensione .mp4 o .m4v: il container MPEG4 è una estensione del vecchio formato .mov di QuickTime;
  • WebM, con estensione .webm: è un nuovissimo formato di container, e può essere utilizzato solo per includere file video in formato VP8 e audio in formato Vorbis;
  • Flash Video con estensione .flv: sono il formato usato da Adobe per includere video all’interno della piattaforma Flash, dalla versione 9 possono essere usati video anche in formato MPEG4 e a breve video in formato WebM;
  • Ogg Video, con estensione .ogv: è un formato aperto ed Open Source supportato in Opera, Chrome e Firefox. E’ supportato nativamente sul Desktop delle piattaforme Linux , mentre per Windows e Mac Os ha bisogno di un plugin;
  • AVI (Audio Video Interleave), con estensione .avi: è un formato introdotto da Microsoft ormai datato in quanto non supporta i più recenti codec video.

Abbiamo introdotto i principali container video presenti nel panorama informatico, ora diamo uno sguardo ai codec video e audio. I codec sono degli algoritmi secondo i quali i file video e audio sono stati codificati. Un player video, una volta individuato il container, analizza quali codec sono necessari per avviare il video e riprodurre l’audio, e li decodifica secondo l’algoritmo del codec individuato.

Ci sono una moltitudine di codec video, quelli consentiti in HTML5 sono tre:

  • H.264 conosciuto anche come MPEG-4 AVC: è stato sviluppato dall’MPEG group nel 2003, ed è pensato sia per dispositivi mobile con bassa risoluzione e bassa banda a disposizione, sia per sistemi ad alta risoluzione con alta banda a disposizione. Per supportare questaampia gamma di dispositivi, lo standard prevede la definizione di diversi profili (profiles). I profili più avanzati definiscono delle feature avanzate che comportano una maggiore dimensione del file stesso e un tempo di decodifica maggiore, mentre quelli base sono da preferire per i dispositivi mobili (ad esempio l’iPhone supporta il profile “Baseline” per la versione 3GS, mentre per la versione 4 supporta il più avanzato profilo di tipo “Main”). E’ possibile trovare una ampia disamina di tutti i profili disponibili su Wikipedia;
  • Theora: è stato sviluppato da Xiph.Org Foundation come evoluzione di VP3. E’ Open Source e non è coperto da alcuna royalty, e tutte le distribuzioni Linux lo supportano nativamente senza plugin aggiuntivi. E’ possibile includerlo in tutti i container video visti in precedenza, anche se è il più delle volte incluso in un container Ogg;
  • VP8: è stato sviluppato da On2 ma poi è stata acquisita da Google ed il progetto è stato reso Open Source. Il codec coniuga il livello di definizione di un High Profile di MPEG-4 con la complessità e la occupazione di risorse di un Baseline Profile.

Per quanto riguarda i codec audio abbiamo:

  • MPEG-1 Audio Layer 3 conosciuto come MP3: esso può contenere fino a due canali sonori codificati con diversi bitrate (da 32 a 320 kbps). Da notare come lo standard sia coperto da un brevetto e ragione per cui le distribuzioni Linux non includono un player nativo;
  • Advanced Audio Coding conosciuto come AAC: è divenuto famoso quando la Apple decise di usarlo per il suo formato per le canzoni su iTunes Store. E’ in grado di fornire una migliore qualità rispetto ad un brano MP3 con lo stesso bitrate, inoltre anche esso come H.264 definisce vari livelli di profili differenziati per qualità e complessità;
  • Vorbis conosciuto come Ogg Vorbis: non è gravato da brevetti e quindi è possibile distribuirlo liberamente (ed è dunque inclusi in ogni distro Linux). Tipicamente lo si trova in accoppiata con il codec video Theora incluso in un container Ogg.

Nella tabella seguente vengono riassunti in verde i formati video e audio supportati dai browser attuali, in rosa i formati che verranno supportati in release future e in rosso quelli non supportati in alcuna release:

BrowserTheora(Ogg)+VorbisH.264+MP4VP8 (WebM)
Internet ExplorerNo9.0No
Mozilla Firefox3.5No4.0
Google Chrome3.03.06.0
SafariNo3.1No
Opera10.50Dipende dal S.O.10.60

Vediamo ora come includere un file video, utilizzando il tag <video> ed i suoi attributi:

<video>
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Video tag non supportato. Scarica il video <a href="movie.webm">qui</a>.
<video>

come riportato nell’esempio, all’interno del tag <video> abbiamo elencato una serie di source file dai quali reperire il nostro video e quale tipo di codec utilizzare (utilizzando la sintassi “codec video, codec audio”). Abbiamo elencato più di un file poichè se il browser dell’utente non è in grado di visualizzare un tipo di formato (li browser li analizza nell’ordine in cui li abbiamo inseriti) passa al successivo. Ad esempio Safari che non supporta il container WebM passa al successivo cioè Mp4.

Sono inoltre previsti ulteriori attributi che possiamo utilizzare all’interno del tag:

  • width e height: per impostare la larghezza e l’altezza del video;
  • controls: per visualizzare una serie di controlli built-in;
  • preload: per poter iniziare a scaricare (ma non visualizzare) il file video appena la pagina html è stata caricata;
  • autoplay: per poter iniziare a scaricare e a visualizzare il file video appena la pagina html è stata caricata.

Ad esempio con questo codice:

<video src="movie.webm" width="320" height="240" preload="none" controls/>

vogliamo visualizzare un video con dimensioni 320×240, con dei controlli predefiniti visualizzati e senza che venga scaricato appena la pagina sia stata caricata. Da notare che in questo caso abbiamo scelto di supportare un solo formato video.

COMMENTS

WORDPRESS: 0