Il tag video è un'altra di quelle invenzioni che rendono HTML5 il linguaggio del web del futuro: poter inserire in maniera nativa e facile dei contenuti multimediali all'interno di una pagina HTML offre opportunità davvero interessanti per i web designer. Per rendere il tutto ancora più semplice, vi presentiamo qui una serie di 5 ottime soluzioni per implementare già da subito i il tag <video> sulle vostre pagine – e il tutto senza perdere nemmeno un utente dal momento che tutte i player proposti hanno come fallback Flash, quindi anche i "vecchi" browser vedranno il video.

Video for Everybody!

Buon prodotto pensato per i developers che hanno voglia di stare a smanettare o per chi vuole una soluzione veloce per il proprio blog. Non utilizza JavaScript per assicurare la visione del video usando il tag <video> (se supportato dal browser) oppure Flash. In caso non sia presente neanche Flash mostra un'immagine cliccando la quale si può scaricare il video.

VideoJS

Ottima soluzione che offre una serie di funzionalità quali sottotitoli, fullscreen, tema customizzabile, facilità di inserimento nelle pagine web e supporto (con fallback) fino a IE6. Funziona anche su device mobili e tablets (Android, iPhone e iPad), uno dei leader nel "mercato" dei player video HTML5.

Molto bella, inoltre, la possibilità di cambiare CSS e tema al volo, anche durante il play di un video: questa funzionalità si può apprezzare sul sito del player, dove è possibile avere i controlli YouTube-style, Vimeo-style o "originali"

jMediaelement

jMediaelement è una soluzione JavaScript che si appoggia su jQuery per inserire contenuti video nelle nostre pagine HTML. I principali vantaggi di questo prodotto sono rappresentati dalla "leggerezza", dall'uso di markup semantico per aggiungere controlli e dall'interfaccia jQuery-style – che consente dunque a chi è esperto di questa libreria di usare comandi e funzioni ben note come ad esempio

$('video').bind('playing', function(){<br />        alert('the video has started to play')<br />    });

per legare ad eventi specifici (in questo caso l'avvio del video) funzioni JavaScript.

Il codice è ospitato su GitHub quindi è molto facile partecipare e fork-are il progetto per creare modifiche o innovazioni alla struttura di base.

FlareVideo

FlareVideo è un'altra buona soluzione per chi desidera un player facile da inserire nelle pagine HTML e che non comporti troppi problemi con browser di vecchia generazione. Offre la possibilità di visualizzazione in fullscreen e, come VideoJS, consente di modificare il CSS e il tema al volo – ovviamente lasciando libero l'utilizzatore di crearsi il proprio tema per i controlli (play/pause, volume, etc.)

LeanBack

Le peculiarità di questo player sono la totale indipendenza dalla libreria JavaScript utilizzata, il supporto di sottotitoli (come si può vedere nella demo sulla homepage del progetto, tra i vari formati supportati ci sono i file .srt o .sbv, ovvero il formato utilizzato da YouTube), la possibilità di selezionare la qualità del video (ad esempio 360p, 480p, 720p HD, 1080p HD) e la facoltà di scegliere differenti velocità di play (non su Firefox, per ora).

Questo player offre poi una serie di comode shortcut da tastiera e funziona anche su iPhone e iPad (su Android effetua il fallback al player nativo)

Conclusioni

A conclusione di questa breve analisi dei player disponibili per implementare in maniera facile, veloce e sicura i video sulle nostre pagine HTML5 questo è il nostro giudizio:

  • per avere una soluzione "rapida" ed elegante che ci consenta di andare subito "live" con un prodotto di qualità: VideoJS
  • per chi ama smanettare e magari anche andare a ravanare nel codice: Video for Everybody!
  • per i jQueristi di tutto il mondo, per avere API "standard" e un'interfaccia di programmazione ormai conosciutissima: jMediaelement
  • per chi vuole il massimo della flessibilità anche se deve stare a studiare un po' di documentazione per capire e conoscere tutte le possibilità: LeanBack