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.
- l'id
- l'indirizzo
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:
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
height
100%
controllare le dimensioni del filmato Flash
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:
containeridconfigurationconfigurationparamflashvars
flashembed(container, configuration, flashvars);Possiamo vedere nel secondo esempio l'utilizzo di parametri personalizzati per gli argomenti configuration
flashvars
<!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
- src
- version
- width
- height
- expressInstall version
- onFail version
- cachebusting false
- le rimanenti opzioni che è possibile specificare sono alcune di quelle tipiche di Flash:
bgcolor
wmode menu allowfullscreen true allowscriptaccess always quality 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.
