VideoJS è un componente che consente di includere nelle nostre pagine web un Video Player in HTML5. È composto essenzialmente da 3 parti: un codice HTML di embed (che utilizza il tag video introdotto nelle nuove specifiche), una piccola libreria Javascript e un file CSS. Alcuni di voi si potranno domandare perché utilizzare VideoJS quando molti browser implementano già nativamente le funzionalità video con un player built-in. Vediamo allora subito i vantaggi e i motivi principali di questa libreria:
- il codice utilizzato da VideoJS consente una compatibilità cross-browser pressoché completa, prevedendo anche un'alternativa facoltativa con Flash Player per i browser meno recenti che non implementano HTML5. I formati video supportati sono MP4 (codec video h.264), OGG Theora e WebM;
- consente la correzione di eventuali bug dei browser e aggiunge funzionalità interessanti come il pulsante per la modalità full screen;
- assicura un aspetto più coerente e uniforme al player e ai controlli incorporati nei diversi browser (e grazie all'utilizzo dei CSS, consente di creare facilmente delle interfacce personalizzate).
Letture consigliate per un approfondimento su HTML5 video e propedeutiche all'utilizzo di VideoJS sono Video for Everybody (su cui si basa il codice di embed di VideoJS) e naturalmente la guida HTML5 di Html.it.
Come utilizzare VideoJS
Per prima cosa è necessario effettuare il download dell'ultima versione di VideoJS, e dopo aver decompresso l'archivio zip, includere i file Javascript e CSS nell'head del documento. È richiesta solo qualche riga di codice Javascript che servirà per attivare il plugin al caricamento della pagina:
<head>
...
<script src="js/video.js" type="text/javascript"></script>
<script type="text/javascript">
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();
</script>
<link rel="stylesheet" href="css/video-js.css" type="text/css">
...
</head>In seconda battuta basta aggiungere il codice HTML necessario per l'embed, avendo cura di inserire nei vari tag source il percorso al formato del video che si desidera riprodurre. Come già detto è possibile utilizzare anche un player Flash alternativo (attribuendo all'object la classe "vjs-flash-fallback"), per i casi in cui manchi nel browser il supporto ad HTML5 o al formato video disponibile; l'esempio allegato a questo articolo include Flowplayer, prelevabile dal sito ufficiale, che presenta un'approfondita documentazione utile per una configurazione più avanzata delle varie impostazioni.
<div class="video-js-box">
<video id="example" class="video-js" width="640" height="360" controls preload poster="images/poster.jpg">
<source src="video/big_buck_bunny.mp4" type='video/mp4' />
<source src="video/big_buck_bunny.ogv" type='video/webm' />
<source src="video/big_buck_bunny.webm" type='video/ogg' />
<object id="flash_fallback" class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="swf/flowplayer-3.2.7.swf">
<param name="movie" value="swf/flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["images/poster.jpg", {"url": "video/big_buck_bunny.mp4","autoPlay":false,"autoBuffering":true}]}' />
</object>
</video>
</div>Per i più pigri è disponibile un comodo builder che genera automaticamente il codice HTML necessario. Una implementazione ideale prevede l'impiego di più tipi diversi di sorgenti video, sempre allo scopo di ottenere le condizioni di riproduzione ottimali e una migliore compatibilità in ogni ambiente, come sintetizzato nella seguente tabella:
| Browser | Player + sorgente video utilizzato |
|---|---|
| IE9 | HTML5 + MP4 |
| IE6/IE7/IE8 | Flash + MP4 |
| Firefox 4 | HTML5 + WEBM/OGG |
| Firefox 3.5/3.6 | HTML5 + OGG |
| Firefox 2/3 | Flash + MP4 |
| Chrome 6+ | HTML5 + MP4/WEBM/OGG |
| Safari 3+ | HTML5 + MP4 |
| Opera 10.60+ | HTML5 + WEBM/OGG |
| Opera 9/10 | Flash + MP4 |
| IOS/Android | HTML5 + MP4 |
Impostazioni e personalizzazione
Per una configurazione personalizzata è possibile intervenire direttamente nel codice di embed utilizzando gli appositi attributi HTML5: autoplay, loop, preload, poster, etc. Riguardo le specifiche funzionalità di ognuno di essi, la guida HTML5 è molto esaustiva in proposito. In realtà anche attraverso il codice Javascript è consentito il settaggio di alcuni parametri opzionali racchiusi in un hash passato come argomento nella funzione di inizializzazione setupAllWhenReady().
VideoJS.setupAllWhenReady({
autoplay: false,
preload: true,
useBuiltInControls: false,
controlsBelow: false,
controlsAtStart: false,
controlsHiding: true,
defaultVolume: 0.85,
playerFallbackOrder: ["html5", "flash", "links"],
flashPlayer: "htmlObject",
flashPlayerVersion: false
linksHiding: true
});Non è tutto: VideoJS può essere utilizzato anche in combinazione con JQuery, utilizzando una sintassi molto comoda e familiare agli utilizzatori del framework (esempio).
VideoJS.DOMReady(function(){
// passare l'ID dell'elemento video o un array di elementi
var myPlayer = VideoJS.setup("example", {
autoplay: true,
preload: true
}
);
// metodi disponibili
myPlayer.play();
myPlayer.pause();
});Una delle prerogative di spicco di VideoJS è senz'altro la possibilità di personalizzare l'interfaccia e i controlli del player tramite un foglio di stile CSS e senza ricorrere ad immagini. Nell'archivio di download sono comprese alcune skin di semplice applicazione: è sufficiente includere il file CSS addizionale e aggiungere la classe specifica al div contenitore del video, come è visibile nel codice sorgente di questo esempio.
Considerazioni e download
Le funzionalità di VideoJS sono completate da comode estensioni di terze parti che ne consentono una facile implementazione nei più diffusi CMS opensource: WordPress, Drupal e Joomla.
Per concludere è doveroso menzionare alcuni plugin alternativi molto simili a VideoJS ed altrettanto validi: in particolare MediaElement.js, Projekktor e Flarevideo, tutti dipendenti da JQuery.
Gli esempi e il codice dell'articolo sono disponibili per il download. I video nei vari formati utilizzati sono prelevabili da Video for everybody.
