Recentemente mi sono imbattuto con l’esigenza di includere un video .flv all’interno del popup di Fancybox (uno script jQuery stile lightbox, con funzionalità più avanzate). Seppur lo script offra già di base il supporto all’integrazione di video Youtube, non c’è verso di visualizzare un video, se non utilizzando un iframe nel quale integriamo un lettore esterno.
Se però abbiamo l’esigenza di avere il video in pagina “nascosto”, siamo costretti a ricorrere ad altri metodi. Ed ecco che, navigando in giro per il web, scopriamo come sia possibile integrare il noto lettore Flowplayer al tanto amato Fancybox. Nel momento in cui scrivo questo articolo garantisco sulla compatibilità totale dei 2 script (in particolare Flowplayer funziona sia con la versione 1.3 che con la versione 2.0+ di Fancybox). L’unico accorgimento da prendere nel caso si utilizzino versioni di Fancybox differenti, è quello di controllare le funzioni di callback che vengono messe a disposizione.
Procuriamoci gli script
Per prima cosa, inevitabilmente, scarichiamo Fancybox e Fancyplayer ai link seguenti:
Fancybox: http://fancyapps.com/fancybox/
Fancyplayer (free): http://flowplayer.org/download/index.html
Dopodichè prepariamo la nostra cartella in cui lavoreremo utilizzando la struttura seguente:
Prepariamo il codice html da utilizzare
Prima di tutto includiamo il css di Fancybox (oltre ad un nostro eventuale foglio stile), jQuery ed i file .js che ci servono:
<link href="fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css"> </link><link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox.js"></script> <script type="text/javascript" src="flowplayer/flowplayer-3.2.6.min.js"></script> </link>
Fatto questo prepariamo la semplicissima struttura html:
<div id="player" data-url="https://www.gleenk.com/demo/jquery/fancybox-flowplayer/Talbot%20Bay%20-%20Australia%20-%20BBC.flv"></div> <a id="play-video" href="#player">Play video</a>
Come vediamo sarà fondamentale avere un attributo in cui inserire l’url dove si trova il video: per farlo ci siamo avvalsi della proprieta HTML5 data-nome, dove nome è qualsiasi cosa si voglia. Utilizzando jQuery non avremo alcuna difficoltà ad andare a “pescare” questo valore. Vi anticipo fin da subito che non avrete problemi di compatibilità cross-browser.
Inoltre impostiamo l’href del link con il medesimo nome dell’ID del contenitore del video.
jQuery in azione
A questo punto non ci resta che scrivere il codice che realizzerà la magia:
var url = $("#player").attr("data-url");
$("a#play-video").fancybox({
'scrolling': false,
'titleShow': false,
'padding' : 0,
'beforeLoad' : function() {
$("#player").show();
$f("player", "flowplayer/flowplayer-3.2.7.swf", url);
},
'afterClose' : function() {
$("#player").hide();
$f().unload();
}
});E’ bene sottolineare brevemente alcuni punti. Nel caso che vedete sopra abbiamo utilizzato una variabile url per memorizzare il percorso del video. In questo modo, se avessimo in pagina diversi video, utilizzando opportunamente “this” in jQuery potremmo prelevare il video che ci interessa. La variabile url verrebbe infatti cambiata ad ogni click. (Per farlo ricordiamoci di utilizzare delle classi e non ID come nell’esempio).
Infine è bene precisare che scrolling, titleShow, padding sono proprietà di Fancybox che servono per nascondere spazi, scritte e scrollbar. beforeLoad e afterClose sono invece le 2 callback di cui parlavamo all’inizio. Sono due funzioni che agiscono prima del caricamento del video e dopo. Saranno queste quelle per cui accertarsi che la sintassi non sia cambiata nel corso di future versioni!
Compatibilità con i browser
Il seguente sistema è stato testato e ne è stata accertata la funzionalità sui seguenti browser:
- Mozilla Firefox (qualsiasi versione moderna)
- Chrome (qualsiasi versione moderna)
- Opera (qualsiasi versione moderna)
- Internet Explorer 7+
