SWFObject (ex FlashObject): rilevamento ed inserimento di Flash tramite JavaScript!

Traduzione dell'articolo originale "SWFObject: Javascript Flash Player detection and embed script" di Geoff Stearns.

20 Marzo 2007

SWFObject è un piccolo file JavaScript da usare per includere nelle vostre pagine del contenuto Adobe Flash. Lo script può rilevare il plugin Flash in tutti i più diffusi browsers (sia su Mac e PC) ed è disegnato per facilitare al massimo l’inserimento di contenuti Flash. Inoltre, è ottimizzato per i motori di ricerca, degrada bene, può essere usato in documenti validi HTML e XHTML 1.0*, ed è stato programmato avendo in mente la compatibilità futura, in modo da funzionare anche negli anni futuri.

SWFObject è lo script d’inserimento di file SWF precedentemente conosciuto come FlashObject. Il nome è stato cambiato a causa di motivi legali legati al copyright del termine Flash. Per ulteriori informazioni leggi questo articolo in inglese.

Come bonus aggiuntivo, SWFObject risolve anche il problema di Internet Explorer "Attivazione dei controlli ActiveX" a causa del brevetto EOLAS. Per saperne di più leggi questo articolo.

* Pagine validate come text/html, no applicazioni/xhtml+xml.

Tabella dei contenuti

• Cosa c’è di nuovo in questa versione?
• Come funziona
• Esempi
• Usare Express Install con SWFObject
• Download
• Perché è meglio del resto
• FAQ

Cosa c’è di nuovo in questa versione?

Per una lista completa delle novità, guardate questo post sulla versione 1.5 di SWFObject.

Come funziona

[Per i più smanettoni: potete vedere il sorgente JavaScript qui.]

Usare SWFObject è facile:

• Aggiungete il file JavaScript swfobject.js;
• Aggiungete poche righe di JavaScript nella vostra pagina per includere il vostro filmato Flash.

Qui è riportato un esempio che mostra la quantità minima di codice necessaria per aggiungere un filmato Flash:

<script type="text/javascript" src="swfobject.js"></script>
		
<div id="flashcontent">
  Questo testo è sostituito dal filmato Flash.
</div>

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.write("flashcontent");
</script>

Qui è riportato che cosa fa il codice:

<div id="flashcontent">[...]</div>

Prepara un elemento HTML che conterrà il filmato Flash. Il contenuto presente nell’elemento contenitore (flashcontent nel nostro esempio) sarà rimpiazzato dal contenuto Flash, così che gli utenti con il plugin Flash installato non vedranno mai il contenuto presente in questo elemento. Questa caratteristica ha il vantaggio aggiuntivo di permettere ai motori di ricerca di indicizzare il testo rimpiazzato dal filmato Flash.

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);

Crea un nuovo SWFObject e passa gli argomenti richiesti:

• swf – Il percorso ed il nome del vostro file swf.
• id – L’ID del vostro oggetto o embed tag. L’embed tag avrà questo valore impostato come nome per i file che sfrutteranno l’opzione swliveconnect.
• width – La larghezza del vostro filmato Flash.
• height – L’altezza del vostro filmato Flash.
• version – La versione del player richiesta per riprodurre il vostro filmato Flash. Questa può essere una stringa nel formato 'majorVersion.minorVersion.revision'. Un esempio potrebbe essere: “6.0.65”. Oppure potete semplicemente richiedere la versione maggiore, come “6”.
• background color – Questo è il valore esadecimale del colore dello sfondo del vostro filmato Flash.

Argomenti opzionali:

• quality – La qualità con la quale riprodurre il filmato Flash. Il default è “high”.
• xiRedirectUrl –Se desiderate redirezionare gli utenti che completano l’aggiornamento ExpressInstall, potete specificare un URL alternativo in questo parametro.
• redirectUrl – Se desiderate redirezionare gli utenti che non hanno la versione corretta del plugin, usate questo parametro inserendo un URL alternativo.
• detectKey – Questo è l’URL che lo script SWFObject cercherà quando il rilevamento è bypassato. Il default è ‘detectflash’. Esempio: per aggirare il rilevamento del plugin Flash e semplicemente scrivere il filmato Flash nella pagina, potete aggiungere ?detectflash=false all’URL del documento contenente il filmato Flash.

so.write("flashcontent");

Dice allo script SWFObject di scrivere il contenuto Flash nella pagina (se la versione corretta del plugin è installata nel sistema dell’utente) rimpiazzando il contenuto all’interno dell’elemento contenitore.

I dettagli

SWFObject funziona silenziosamente in background nel vostro documento HTML. Per sviluppare pagine utilizzando SWFObject, dovreste iniziare con il vostro contenuto alternativo (cioè quello non Flash). Fate in modo che le vostre pagine funzionino correttamente senza i filmati Flash. Poi aggiungete il piccolo codice Javascript che sostituisce il contenuto alternativo con i filmati Flash. Questo assicura che il contenuto alternativo sarà indicizzato dai motori di ricerca, e che gli utenti senza il plugin Flash vedranno una pagina HTML funzionante. Se offrire informazioni per un eventuale aggiornamento del player dipende da voi. Se il contenuto alternativo è sufficiente, potrebbe non esserci alcuna ragione di dire ai visitatori che stanno perdendo il contenuto Flash.

SWFObject funziona in tutti i più recenti browsers, compresi, su PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, e Opera. Su Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, e Opera 7.5+, e dovrebbe continuare a funzionare correttamente anche in futuro.

SWFObject rileva la versione del player Flash nei browsers sopraelencati dalla versione 3 in su, e permetterà agli utenti di interagire con il contenuto del vostro filmato Flash senza doverlo ‘attivare’ prima. Per ulteriori informazioni sull’attivazione dei contenuti Flash, leggi questo articolo sui problemi di Internet Explorer legati al brevetto EOLAS.

SWFObject può rilevare le versioni minori e le revisioni del player Flash, semplicemente passando la stringa con il valore della versione che volete. Ad esempio per richiedere la v.6.0 r65 (o 6,0,65,0):

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");

Il rilevamento del plugin da parte di SWFObject può essere aggirato. Se un nuovo browser dovesse essere rilasciato o per qualche ragione il rilevamento del plugin dovesse fallire sul sistema di qualche utente, potete aggiungere un link che disabiliterà il rilevamento del plugin, e scriverà sempre il contenuto Flash nella pagina. Per usare questo ‘bypass’ link, fate un collegamento alla pagina con il vostro contenuto Flash, e includete una variabile URL chiamata ‘detectflash’ ed impostatela a 'false'. Qui è riportato un esempio di come risulterebbe un simile link:

<a href="mypage.html?detectflash=false">Bypass link</a>

 

Esempi di SWFObject

Gli esempi sopra riportati mostrano le operazioni necessarie per il semplice utilizzo di SWFObject, ma cosa è necessario fare per usare alcuni degli altri parametri che il plugin Flash offre? SWFObject rende veramente facile aggiungere qualsiasi parametro extra di cui abbiate bisogno. Gli esempi sottostanti riportano alcuni dei differenti metodi che potrete utilizzare per includere i vostri contenuti Flash.

Un semplice esempio per aggiungere alcuni parametri extra

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
   so.addParam("quality", "low");
   so.addParam("wmode", "transparent");
   so.addParam("salign", "t");
   so.write("flashcontent");
</script>

Nel sito Adobe.com è riportata la lista completa dei parametri accettati e dei loro possibili valori.

Passare variabili ai vostri filmati usando il parametro “FlashVars”:

Usare FlashVars è il modo più semplice per passare dei dati dalla vostra pagina HTML al vostro filmato Flash, ma potete passare i dati solamente quando la pagina si carica. Normalmente, voi aggiungereste un parametro chiamato FlashVars e poi i valori, passando coppie di stringhe del tipo NomeVariabile/ValoreVariabile, come in questo esempio: variabile1=valore1&variabile2=valore2& variabile3=valore3 e così via. SWFObject rende questa operazione più facile permettendo di aggiungere un numero a piacere di variabili in maniera simile a come si aggiungono i parametri aggiuntivi. L’esempio sottostante mostra come passare dei valori al filmato Flash usando questo metodo:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.addVariable("variabile1", "valore1");
   so.addVariable("variabile2", "valore2");
   so.addVariable("variabile3", "valore3");
   so.write("flashcontent");
</script>

Una volta fatto questo, tutte le variabili passate saranno immediatamente disponibili all’interno del filmato Flash. Potrete accedere ad ogni variabile semplicemente riferendovi alla timeline _root.

Lo script SWFObject è dotato anche di una funzione extra che permette di impostare i valori delle variabili direttamente dall’URL. Un possibile esempio potrebbe essere un URL simile a questo: http://www.example.com/page.html?variabile1=valore1& variabile2=valore2
Usando la funzione getQueryParamValue() potete facilmente prendere i valori dall’URL e passarli al vostro filmato Flash. Qui è riportato un esempio, considerando che l’URL sia simile a quello riportato precedentemente:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.addVariable("variabile1", getQueryParamValue("variabile1"));
   so.addVariable("variabile2", getQueryParamValue("variabile2"));
   so.write("flashcontent");
</script>

Inoltre la funzione getQueryParamValue() supporta la lettura di variabili dalla location.hash, usata per collegarsi a timeline più interne di un filmato Flash.

Usare Express Install con SWFObject

SWFObject ha il pieno supporto per la funzionalità Adobe Flash Player Express Install. I vostri visitatori non dovranno più lasciare il vostro sito per aggiornare il loro Flash player.

Per utilizzare l’opzione Express Install dovete uploadare il file expressinstall.swf nel vostro server web. In seguito, utilizzate il metodo useExpressInstall per specificare il percorso al vostro expressinstall.swf. Se non è specificato alcun percorso, SWFObject cercherà nella stessa directory della pagina HTML attuale.

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.useExpressInstall('expressinstall.swf');
   so.write("flashcontent");
</script>

Se volete vedere la funzione ExpressInstall in funzione, potete installare la versione 7 (o 6.0.65) del player Flash e visitare questa pagina.

Se volete modificare le opzioni di Express Install, il codice sorgente del file expressinstall.swf è incluso con SWFObject.

Se il vostro filmato Flash è in una finestra popup, o preferite redirezionare l’utente ad una diversa pagina dopo che l’aggiornamento Express Install è completato, potete usare l’attributo xiRedirectUrl.

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.useExpressInstall('expressinstall.swf');
   // deve essere l’URL assoluto alla pagina del vostro sito
   so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html');
   so.write("flashcontent");
</script>

 

Download

SWFObject è rilasciato sotto la licenza MIT. Questo significa (praticamente) che potete usarlo in qualsiasi situazione (anche in progetti commerciali) senza alcuna restrizione.

Download SWFObject 1.5 – File zippato, include swfobject.js e degli esempi html.

Se preferite scaricare SWFObject dal sito originale allora cliccate qui.

Perchè è meglio del resto

Nel corso degli anni ci sono stati numerosi metodi per rilevare le versioni dei player Flash e per inserire i filmati Flash nei documenti HTML. Questa sezione riporta i metodi più famosi e ne rileva i possibili problemi.

1) Il metodo standard fornito da Adobe

Tutti dovrebbero conoscere il metodo di default di Adobe che utilizza i tag embed. Questo metodo consiste nel nell’uso di un tag Object con un tag Embed al suo interno per evitare problemi di compatibilità. Questo è il metodo più popolare per inserire i propri filmati Flash all’interno di un documento HTML ed è la scelta di default quando pubblicate il vostro filmato dall’applicativo Adobe Flash. Questa è anche la maniera più compatibile per includere un filmato Flash, funzionando nella maggioranza dei browsers. Qui è riportato un esempio del codice usato con questo metodo:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
   codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
   width="550" height="400" id="Untitled-1" align="middle">

   <param name="allowScriptAccess" value="sameDomain" />
   <param name="movie" value="mymovie.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#ffffff" />
   <embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550" 
   height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain" 
   type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>

Sebbene questo sia il modo più diffuso per includere i filmati Flash, ha alcune controindicazioni.

• Non c’è rilevamento del plugin Flash. – Senza rilevamento del plugin, gli utenti potrebbero non vedere, in parte o tutto, il contenuto Flash. Se il plugin non è installato sarà visualizzata su Internet Explorer la finestra di dialogo ‘Installazione ActiveX’ – una finestra che molti utenti ora temono a causa dei numerosi virus e spyware – o lo strano ‘pezzo di puzzle’ sui browser basati sul motore di Mozilla (ad esempio Firefox). Nessuno di questi sistemi d’installazione sono semplici da usare, e solitamente non spiegano in maniera accurata cosa sia necessario fare e perché.
• A causa dei problemi legati al brevetto EOLAS, gli utenti dovranno cliccare sul contenuto del vostro filmato Flash per 'attivarlo' prima di poterci interagire. In questo articolo potrete trovare ulteriori informazioni sul problema dell'attivazione degli ActiveX di Internet Explorer.
• Il codice HTML e XHTML non si valida. – Non esiste il tag embed in nessuna versione di HTML e di XHTML. Comunque, siccome molti browsers interagiscono con i tag object in maniera differente, il tag embed è necessario per evitare problemi di compatibilità.

2) Uso del solo tag Object / La tecnica del “Flash satay”

Questo metodo ha raggiunto una certa popolarità dopo essere apparso in un articolo su A List Apart nel Novembre del 2002. Qui sono riportatati due esempi uno per la tecnica che utilizza soltanto il tag Object ed uno per il “Flash satay”:

'Uso del solo tag Object'

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
   width="300" height="120">
   <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
   <param name="quality" value="high">
   <param name="bgcolor" value="#FFFFFF">
   <!--[if !IE]> <-->
   <object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
	 width="300" height="120" type="application/x-shockwave-flash">

  <param name="quality" value="high">
  <param name="bgcolor" value="#FFFFFF">
  <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
  FAIL (the browser should render some flash content, not this).
 </object>
 <!--> <![endif]-->

</object>

Flash satay

<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf" 
width="400" height="300">
<param name="movie" 
value="c.swf?path=movie.swf" />
<img src="noflash.gif" 
width="200" height="100" alt="" />
</object>

• Problemi di accessibilità. – Utilizzando la tecnica del Flash Satay, alcuni screen readers (come JAWS) ignoreranno il vostro contenuto Flash.
• A causa dei problemi legati al brevetto EOLAS, gli utenti dovranno cliccare sul contenuto del vostro filmato Flash per 'attivarlo' prima di poterci interagire. In questo articolo potrete trovare ulteriori informazioni sul problema dell'attivazione degli ActiveX di Internet Explorer.
• Non c’è rilevamento del plugin Flash. – Stesso problema riportato per la tecnica 1. Senza rilevamento del plugin, gli utenti potrebbero non vedere il contenuto della pagina. Quando il player Flash incontra un filmato Flash incluso in una pagina, proverà a riprodurlo qualsiasi sia la versione del player installata. Così se il visitatore ha installato il plugin versione 6 ed incontra un filmato Flash versione 7, il plugin proverà ugualmente a riprodurre il filmato potendo causare degli effetti inaspettati.
• Alcune tecniche “Flash satay” non riproducono il filmato Flash nel player. – In questo caso sarebbe necessario l’utilizzo di un filmato swf contenitore per caricare il vostro filmato. Questa situazione rende poco agevole il passaggio di variabili attraverso parametri FlashVars e rende necessario il mantenimento di un numero doppio di filmati Flash.
• Vecchi versioni di safari ignorano i tag param. – Fino alla versione 2.0 (su Tiger) o 1.3 (su Panther) e probabilmente 1.2.8 (prima di Panther) Safari ignorerebbe il tag param. Questo significa che se proverete ad impostare altre opzioni usando il tag param, come FlashVars o Align o Salign, ecc. Safari non li vedrebbe

3) Rilevamento: La tecnica del 'piccolo filmato Flash nella pagina index'

Questa tecnica consiste nel mettere un piccolo filmato Flash nella pagina iniziale del vostro sito, e far controllare a quest’ultimo la variabile $version nel player Flash e redirezionare l’utente ad una seconda pagina contenente il vero filmato Flash, oppure ad una pagina dove effettuare l’aggiornamento del player.
I problemi di questo metodo sono:

• Non  c’è il rilevamento del plugin nelle pagine interne del sito. – Se un utente raggiunge direttamente una pagina interna, il controllo della presenza del plugin Flash non è effettuato.
• A causa dei problemi legati al brevetto EOLAS, gli utenti dovranno cliccare sul contenuto del vostro filmato Flash per 'attivarlo' prima di poterci interagire. In questo articolo potrete trovare ulteriori informazioni sul problema dell'attivazione degli ActiveX di Internet Explorer.
• Il codice HTML e XHMTL non è valido. – Il tag embed necessario per inserire il filmato Flash nel documento HTML non è valido.
• Condizionerà in maniera negativa il posizionamento nei motori di ricerca. – Con questa tecnica la pagina iniziale del vostro sito sarà semplicemente una pagina vuota. Quando la gente troverà il vostro sito sui motori di ricerca potrebbe vedere soltanto la scritta “Rilevamento del player Flash” o addirittura nessuna descrizione. Questo è veramente uno spreco in termini di visibilità per il vostro sito.

4) Il Flash Player Detection Kit di Adobe

Adobe ha realizzato un buon lavoro con il nuovo detection kit incluso con Flash 8, ma ancora non è perfetto. Utilizza due differenti modi per rilevare il plugin Flash:

1. Il classico "piccolo filmato Flash nella pagina iniziale del sito" - (vedi sopra)
2. JavaScript – Sì, esatto. Flash adesso include un rilevatore per il plugin in JavaScript. Sfortunatamente, non è semplice da usare, mischiando JavaScript, VBscript, e tutto il vostro HTML tutto dentro una singola pagina. Questa metodo continua ad avere molte delle controindicazioni delle altre tecniche viste e non fa nulla per facilitare la vita degli sviluppatori Flash/HTML. Inoltre anche questa tecnica non si valida come XHTML o HTML (sempre che ci teniate a questo tipo di cose).

5) Utilizzo di JavaScript per rilevare il plugin e per inserire i filmati Flash

E’difficile criticare questo metodo, siccome varia da sito a sito. Comunque, la maggior parte dei metodi di rilevamento del plugin fatti in JavaScript presentano i seguenti problemi:

• Rilevamento del plugin non affidabile. – Spesso il rilevamento del plugin funziona soltanto con le versioni attuali, ed ha bisogno di essere aggiornato manualmente ogni volta che una nuova versione del plugin è rilasciata.
• Aggiunge più codice alle pagine. – Rendendo più difficile aggiornare o cambiare i contenuti delle vostre pagine. Questo metodo potrebbe rendere più difficile l’aggiunta di ulteriori filmati Flash.
• Una soluzione troppo complicata. – Molti script fatti per includere filmati Flash possono crescere fino a grandi dimensioni o diventare decisamente complicati. SWFObject invece è disegnato per essere semplice e leggero.

FAQ

Continuate ad avere problemi? Provate a leggere nei precedenti post (in inglese) su SWFObject [1, 2, 3] (specialmente i commenti), dove gran parte delle domande più frequenti sono state risposte oppure visitate il forum ufficiale.

Ringraziamenti

L'autore Geoff Stearns ringrazia Toby Boudreaux per i consigli e l'aiuto profuso nel rendere SWFObject migliore.

Ti è piaciuto questo articolo? Aggiungilo a: del.icio.us

Ricevi tutte le news RSS

Alcuni Progetti

• Hotel Villa Rossi
• Magnani Arredamenti
• Agriturismo Ca' Poggio
• Appartamenti Semprini - Igea Marina
• Fratelli Giannini: Forni a legna, barbecue
• Bookmark Converter

Articoli

• Calendario 2022 Compatto
• Calendario 2021 Compatto
• Calendario 2020 Compatto
• SWFObject 2.0 - Documentazione completa in italiano
• WordPress foglio d’aiuto - Cheat sheet
• Espressioni Regolari Cheat Sheet
• Ottimizzazione per i motori di ricerca (SEO): Principi di base
• Collegamenti esterni semplici ed accessibili
• Svelato l’algoritmo di Google? Il teorema di Randfish
• I 10 peccati capitali nell'epoca del web
• SFWObject (ex FlashObject): come rilevare il plugin Flash ed inserire filmati Flash usando Javascripit
• Valutazione dell’accessibilità di un sito web – Parte Prima: storia e preparazione
• Valutazione dell’accessibilità di un sito web – Parte Seconda: controlli di base
• Valutazione dell’accessibilità di un sito web – Parte Terza: scavando più a fondo

Post interessanti

• Brevetto EOLAS e la modifica ActiveX di Internet Explorer
• In un battito di ciglia: come la gente giudica un sito web
• Siamo sulla copertina di Applied Optics
• Posizionamento nei motori di ricerca e campagne PayPerClick