Flashembed è un comodo plugin Javascript per incorporare dei contenuti Flash in una pagina HTML: per le funzionalità offerte e la compatibilità su tutti i browser può rappresentare di fatto una valida alternativa al collaudato SWFobject. Vediamo subito le caratteristiche principali di Flashembed, che costituiscono anche i suoi punti di forza:
- innanzitutto la semplicità di utilizzo, con una modalità di implementazione veramente user-friendly;
- le molteplici possibilità di configurazione, attraverso degli oggetti (hash) contenenti varie opzioni e i relativi valori assegnati;
- le ridotte dimensioni: il peso è infatti all'incirca di 9 kb (solo 5 kb per la versione compressa);
- l'integrazione con JQuery: Flashembed è uno script che può tranquillamente operare in modalità standalone, ma è possibile utilizzare i selettori di jQuery per un più rapido accesso agli elementi della pagina.
Installazione di base
Per incominciare ad utilizzare Flashembed è necessario includere nell'head della nostra pagina lo script, prelevabile dalla pagina di download, dove sono anche disponibili altri plugin dell'interessante pacchetto JQuery Tools. La seconda cosa da fare è inserire nel body del documento HTML un elemento contenitore vuoto in cui il nostro script andrà ad iniettare il codice necessario per l'embed del filmato Flash. Per questo scopo possiamo utilizzare un div, che deve essere referenziato attraverso l'assegnazione di un attributo id.
Da ultimo è necessario invocare Flashembed attraverso la funzione omonima, specificando due parametri:
- l'id identificativo del div contenitore
- l'indirizzo (relativo o assoluto) del file swf
Questo è tutto! Vediamo l'esempio e il codice utilizzato, veramente minimale:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flashembed - Esempio 1 - installazione di base </title>
<script type="text/javascript" src="js/flashembed-1.0.4.js"></script>
<style type="text/css">
body { text-align:center; }
#clock { width:300px; height:300px; margin:0 auto; }
</style>
</head>
<body>
<h1>Installazione di base</h1>
<!-- inseriamo il div che fa da contenitore -->
<div id="clock"></div>
<!-- assegnamo il filmato flash al contenitore -->
<script>
flashembed("clock", "swf/clock.swf");
</script>
</body>
</html>Per impostazione predefinita, l'oggetto Flash è collocato all'interno del contenitore specificato in modo che la sua width ed height siano al 100%. Questo significa che è possibile controllare le dimensioni del filmato Flash impostando le dimensioni del contenitore direttamente con i CSS.
Possibilità di configurazione
Nell'esempio precedente abbiamo chiamato la funzione flashembed() utilizzando due soli parametri (l'identificativo del container e l'url del file swf), nella maniera più semplice. In realtà la funzione accetta tre argomenti, di cui solo i primi due sono obbligatori:
container(come abbiamo detto l'iddell'elemento contenitore presente nel documento HTML in cui lo script inserisce l'oggetto Flash);configuration, che specifica il percorso del file swf e facoltativamente le varie modalità di inclusione. In questo ultimo casoconfigurationè un oggetto hash di opzioni, alcune specifiche di Flashembed, altre della configurazione Flash (i classici tagparam);flashvarsè l'argomento facoltativo che permette di passare un hash di variabili, anche in formato JSON, dalla pagina al filmato (non sono altro che le classiche flashvars di Flash).
flashembed(container, configuration, flashvars);Possiamo vedere nel secondo esempio l'utilizzo di parametri personalizzati per gli argomenti configuration e flashvars: in particolare, abbiamo settato la trasparenza del filmato, disabilitato il menu del tasto destro e inviato una variabile che può essere letta e stampata sullo stage da Flash (naturalmente, per quanto riguarda la creazione di un swf capace di interagire con dati esterni, sono necessarie delle nozioni di base di Actionscript). Di seguito il codice HTML e Javascript necessario:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flashembed - Esempio 2 - Parametri di configurazione e Flashvars</title>
<script type="text/javascript" src="js/flashembed-1.0.4.js"></script>
<style type="text/css">
body { text-align:center; }
#clock { width:300px; height:300px; margin:0 auto; }
</style>
</head>
<body>
<h1>Parametri di configurazione e Flashvars</h1>
<div id="clock"></div>
<script>
flashembed(
"clock",
// configuration
{src: "swf/clock_flashvars.swf", wmode: 'transparent', menu: 'false'},
// flashvars
{ my_param: 'Hello world!' }
);
</script>
</body>
</html>Ecco una panoramica sulle varie opzioni del secondo argomento configuration, quando questo viene utilizzato come un oggetto:
- src: l'unica opzione obbligatoria, contenente il percorso del file swf;
- version: permette di specificare la versione minima richiesta di Flash Player necessaria per visualizzare il filmato. In caso non sia installata sul computer client la versione necessaria, viene visualizzato un messaggio di default, customizzabile attraverso i CSS. È anche possibile cambiare il messaggio inserendo un contenuto personalizzato (in formato HTML) direttamente nel container. Ecco un esempio standard in cui viene richiesto un numero di versione molto elevato (20,0) in modo da poter vedere cosa accade quando non si dispone del player installato;
- width: è preferibile non usare questa opzione impostando direttamente le dimensioni del filmato nei CSS;
- height: come sopra;
- expressInstall (richiede la presenza della precedente opzione version): contiene il percorso del file expressinstall.swf. Nel caso in cui il client non disponga della versione Flash richiesta, viene direttamente mostrato l'alert box che consente l'aggiornamento rapido del player (esempio);
- onFail: permette di specificare una funzione di callback invocata nel caso il plugin Flash sia mancante o sia di una versione troppo vecchia (richiede la presenza dell'opzione version);
- cachebusting (valore di default false): abilitando questa proprietà viene forzato il caricamento dell'swf dalla cache del browser;
- le rimanenti opzioni che è possibile specificare sono alcune di quelle tipiche di Flash:
bgcolor,
wmode, menu, allowfullscreen (valore di default true), allowscriptaccess (valore di default always), quality (valore di default high).
Inclusione di video da YouTube e Vimeo
Flashembed può essere utilizzato anche per includere i player di servizi di condivisione video, come ad esempio YouTube e Vimeo. In entrambi i casi è necessario disporre dell'url del player (rintracciabile nella documentazione delle rispettive API) e dell'id del video (nel caso di Youtube si tratta di un codice alfanumerico di 11 caratteri, mentre quello di Vimeo corrisponde a un numero di 7 cifre). Questo può essere facilmente ottenuto con una piccola regular expression partendo dall'url della pagina del video ( ad esempio http://www.vimeo.com/931695 e http://www.youtube.com/watch?v=5G-hcQkY_Gk).
Per personalizzare il player in base alle necessità è necessario impostare i valori di alcune proprietà nell'hash del parametro flashvars di Flashembed: è possibile così abilitare o disibilitare l'opzione fullscreen, scegliere di mostrare o nascondere titolo, rating, nome dell'autore o video correlati, settare l'autoplay del video, il loop, la visualizzazione in alta definizione , etc. L'elenco completo delle opzioni è disponibile sulle pagine della documentazione ufficiale di YouTube e Vimeo.
Vediamo direttamente gli esempi in opera con l'inclusione del player di Youtube e Vimeo. Lo script necessario presenta piccole differenze nelle due versioni, ma è veramente semplice ed è visibile nel codice sorgente delle pagine di esempio.
Utilizzo con JQuery
Attraverso i selettori di JQuery è possibile selezionare con velocità gli elementi della pagina in cui Flashembed inietta il codice necessario alla visualizzazione del filmato Flash. La sintassi necessaria è quella familiare per chi utilizza questo framework:
$(selector).flashembed(configuration, flashvars);Nella chiamata della funzione flashembed(), come possiamo vedere, è necessario omettere il primo argomento container, già passato da JQuery.
Molte volte è buona prassi rinviare l'inclusione dell'oggetto Flash (lazy loading), subordinandolo a un evento come ad esempio il click dell'utente. Questo rende il caricamento della pagina più veloce, soprattutto se il peso del file swf è grande: ecco un esempio. Tramite i selettori di JQuery è agevole anche l'inserimento di più filmati Flash nella stessa pagina: un altro esempio.
Conclusioni e download
Flashembed dispone anche di alcuni metodi statici e di semplici API (queste accessibili referenziando l'oggetto flashemebed instanziato): si tratta comunque di funzionalità marginali e ho lasciato al lettore la facoltà di approfondire l'argomento consultando la documentazione dello script.
Non da ultimo, Flashembed è perfettamente integrato nelle Api Javascript di Flowplayer, un eccellente player Flash per video in formato flv o mp4 e audio in formato mp3 che viene rilasciato con diverse licenze, tra cui una GPL open source. Flowplayer, ed il "concorrente" JWPlayer, saranno l'argomento del prossimo articolo, che ci guiderà alla scoperta dello streaming video.
Tutti gli esempi dell'articolo sono disponibili per il download.
