MagnificaWeb Siti

 

SWFObject 2.0: rilevamento ed inserimento di Flash tramite JavaScript!

Traduzione della documentazione presente su "SWFObject 2.0: Javascript Flash Player detection and embed script".

SWFObject

14 Marzo 2008

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 2.0 è la nuova versione ufficiale di SWFObject script d’inserimento di file SWF precedentemente conosciuto anche 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 application/xhtml+xml.

Tabella dei contenuti

Cosa è SWFObject 2.0?

SWFObject 2.0:

  • Offre due metodi per inserire dei contenuti Flash; un approccio basato sulla marcatura ed un metodo che si basa su JavaScript
  • Offre un API che cerca di fornire un serie completa di strumenti per inserire dinamicamente dei file SWF e per ricavare le informazioni relative al player Flash
  • Utilizza soltanto un piccolo file JavaScript (dimensioni: 8.7Kb, GZIPed: 3.4Kb)
  • E’ il successore di SWFObject 1.5 e UFO
  • Probabilmente rimpiazzerà l’Adobe Flash Player Detection Kit
  • Intende unificare tutti i metodi esistenti d’inserimento dei contenuti Flash e fornire un nuovo standard per l’inserimento dei contenuti Flash
  • E’ un progetto open source di Geoff Stearns, Michael Williams, e Bobby van der Sluis, ed era precedentemente noto con il nome di SWFFix

Perchè dovrei usare SWFObject 2.0?

SWFObject 2.0:

  • E’ maggiormente ottimizzato e flessibile di ogni altro metodo attualmente disponibile per l’inserimento di contenuti Flash
  • Offre una soluzione per tutti: sia che siete uno sviluppatore HTML, Flash o JavaScript
  • Interrompe il circolo vizioso dell’essere legati alle marcature specifiche dei vari produttori di browser e promuove l’uso degli standard web e del contenuto alternativo
  • Utilizza JavaScript non intrusivo e le procedure migliori
  • E’ facile da usare

L’articolo Flash Embedding Cage Match apparso sul sito A List Apart descrive la logica dietro SWFObject 2.0 (precedentemente chiamato SWFFix).

Perché SWFObject 2.0 usa JavaScript?

Principalmente SWFObject 2.0 usa JavaScript per superare problemi che non possono essere risolti con la sola marcatura:

  • Rileva la versione del player Flash e decide se mostrare il contenuto Flash o quello alternativo, per evitare che versioni sorpassate del plugin Flash non visualizzino il contenuto Flash in maniera corretta.
  • Offre delle funzioni per visualizzare il contenuto alternativo attraverso la manipolazione del DOM (nota: se non è installato il plug-in Flash, l’elemento HTML object automaticamente mostra il contenuto alternativo)
  • Offre l’opzione per utilizzare l’Adobe Express Install per scaricare l’ultima versione del player Flash
  • Risolve il problema delle vecchie versioni di Webkit che ignorano gli elementi param contenuti nell’elemento object, utilizzando l’elemento proprietario embed (nota: questo è l’unico posto dove è utilizzata una marcatura proprietaria e verrà eliminata in una prossima versione)
  • Offre l’opzione di pubblicare il contenuto Flash attraverso JavaScript, evitando il possibile meccanismo del “Clicca per Attivare”
  • Offre un API JavaScript completa per eseguire operazioni sul Flash player e sul contenuto Flash

Dovrei utilizzare il metodo di pubblicazione statico o dinamico?

SWFObject 2.0 offre due diversi metodi per inserire del contenuto Flash:

  1. Il metodo di pubblicazione statico inserisce sia il contenuto Flash che quello alternativo attraverso una marcatura standard, ed utilizza JavaScript per risolvere i problemi che la marcatura da sola non può risolvere
  2. Il metodo di pubblicazione dinamico si basa sulla sostituzione tramite JavaScript di un contenuto alternativo adeguatamente contrassegnato, se la versione del player Flash è abbastanza recente ed il supporto per JavaScript è sufficiente (simile alle precedenti versioni di SWFObject ed UFO)

I vantaggi del metodo di pubblicazione statica sono i seguenti:

  • è promosso l’utilizzo di una marcatura standard
  • il meccanismo per inserire il contenuto Flash non dipende più da JavaScript, degradando in maniera appropriata:
    • se avete il plug-in Flash installato, ma avete JavaScript disabilitato o utilizzate un browser senza supporto per JavaScript, sarete in grado ugualmente di vedere il contenuto Flash;
    • Flash funzionerà anche su strumenti che hanno un pessimo supporto per JavaScript,come la Sony PSP;
    • strumenti automatici come i lettori RSS saranno in grado di rilevare il contenuto Flash.

I vantaggi del metodo di pubblicazione dinamica sono i seguenti:

  • evita il problema della attivazione del contenuto attivo (“Fare clic per attivare e utilizzare il controllo”) in Internet Explorer 6+ ed Opera 9+. Tenete però conto che Microsoft sta per eliminare questo problema dalle varie versioni di Internet Explorer
  • Si integra molto bene con applicazioni che utilizzano altri script

Come inserire contenuto Flash utilizzando la pubblicazione statica di SWFObject 2.0

PASSO 1: Inserire il contenuto Flash e quello alternativo utilizzando una marcatura che rispetti gli standard web

La marcatura basilare di SWFObject usa il metodo degli oggetti concatenati (con i commenti condizionali proprietari di Internet Explorer) [ articolo di A List Apart ] per assicurare il miglior supporto multi-piattaforma attraverso la sola marcatura, rispettando gli standard web e supportando il contenuto alternativo [ vedi la suite di test su SWFFix ]:

<!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" lang="en" xml:lang="en"> 
  <head> 
    <title>SWFObject 2.0 - step 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <div>
 
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
 
    </div>
  </body>
</html>

NOTA: il metodo degli oggetti concatenati richiede una doppia definizione object (l’object esterno considera Internet Explorer, mentre quello interno considera tutti gli altri browser). Per questo motivo è necessario definire due volte gli attributi e gli elementi param.

Attributi obbligatori:

  • classid (soltanto nell’elemento object esterno, il valore è sempre clsid:D27CDB6E-AE6D-11cf-96B8-444553540000)
  • type (soltanto nell’elemento object interno, il valore è sempre application/x-shockwave-flash)
  • data (soltanto nell’elemento object interno, definisce l’URL del filmato SWF)
  • width (in entrambi gli elementi object, definisce la larghezza del filmato SWF)
  • height (in entrambi gli elementi object, definisce l’altezza del filmato SWF)

Elemento param obbligatorio:

  • movie (soltanto nell’elemento object esterno, definisce l’URL del filmato SWF)

NOTA: Vi consigliamo di non utilizzare l’attributo codebase per indicare l’URL dell’installer del plugin Flash sui server di Adobe, perché è illegale secondo le specifiche che restringono l’accesso al solo dominio del documento corrente. Invece, vi raccomandiamo di utilizzare del contenuto alternativo con un piccolo messaggio che incoraggi l’utente ad installare il plugin Flash per avere una navigazione più ricca.

Come potete utilizzare l’HTML per configurare il vostro contenuto Flash?

Potete utilizzare i seguenti attributi opzionali dell’elemento object:

  • id
  • name
  • class
  • align

Potete utilizzare i seguenti elementi opzionali param specifici per Flash:

Perché dovreste usare il contenuto alternativo?

L’elemento object vi permette di inserire del contenuto alternativo che sarà visualizzato se Flash non è installato o non è supportato. Questo contenuto sarà anche rilevato dai motori di ricerca, rendendolo molto utile per ottenere una buona indicizzazione nei motori di ricerca. Riassumendo, dovreste utilizzare del contenuto alternativo quando volete che il contenuto sia accessibile anche a quelle persone che navigano nel Web senza plugin, quando volete fornire del contenuto che sia rilevato dai motori di ricerca o quando volete comunicare ai visitatori che possono avere un’esperienza più ricca installando il plugin Flash.

PASSO 2: inserisci la libreria JavaScript SWFObject nella sezione head della pagina HTML

La libreria SWFObject è composta da un file JavaScript esterno. SWFObject sarà eseguito immediatamente e compierà tutte le modifiche al DOM appena questo sarà caricato - per tutti i browser che lo supportano, come IE, Firefox, Safari e Opera 9+ - oppure appena sarà eseguito l’evento onload:

<!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" lang="en" xml:lang="en">
  <head>
    <title>SWFObject 2.0 - passo 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
    <script type="text/javascript" src="swfobject.js"></script>
 
  </head>
  <body>
    <div>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Contenuto alternativo</p>
        <!--[if !IE]>-->
        </object>
       <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

Passo 3: Registrare il vostro contenuto Flash con la libreria SWFObject e dire a SWFObject cosa fare con il vostro contenuto Flash

Innanzitutto aggiungi un id unico al tag object esterno che definisce il tuo contenuto Flash.

In seguito aggiungi il metodo swfobject.registerObject:

  1. Il primo argomento (stringa, obbligatorio) specifica l’ id usato nella marcatura.
  2. Il secondo argomento (stringa, obbligatorio) specifica la versione del player Flash richiesta. E’ attivato il controllo della versione del plugin Flash per determinare se mostrare il contenuto Flash o forzare la visualizzazione del contenuto alternativo manipolando il DOM. Benché i numeri delle versioni di Flash normalmente consistono di 4 numeri (major, minor, release, build), SWFObject controlla soltanto i primi tre numeri, così "WIN 9,0,18,0" (IE) e "Shockwave Flash 9 r18" (tutti gli altri browser) sono entrambi convertiti in "9.0.18".
  3. Il terzo argomento (stringa, opzionale) può essere usato per attivare Adobe express install e specifica l’URL del vostro file SWF per express install. Quando la versione richiesta del plugin non è disponibile, express install mostra un dialogo standard per effettuare il download del plugin Flash anziché mostrare il vostro contenuto Flash. Un file expressInstall.swf è contenuto all’interno file del progetto da scaricare. E’ compreso anche il corrispondente file sorgente expressInstall.fla ed un file ActionScript (all’interno della cartella SRC) per permettervi di personalizzare l’opzione express install. Vi prego di notare che express install sarà attivato soltanto una volta (la prima volta che sarà richiesto), che è supportato dal player Flash 6.0.65 o superiore su piattaforme Win o Mac e che richiede una dimensione minima del filmato di 310x137px.
<!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" lang="en" xml:lang="en">
  <head>
    <title>SWFObject 2.0 - passo 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>
 
    <script type="text/javascript">
    swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
    </script>
 
  </head>
  <body>
    <div>
 
      <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
 
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Contenuto alternativo</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

Consigli

Come inserire contenuto Flash utilizzando la pubblicazione dinamica di SWFObject 2.0

PASSO 1: Creare il contenuto alternativo utilizzando una marcatura che rispetti gli standard del web

Il metodo d’inserimento dinamico di SWFObject segue il principio del “miglioramento progressivo” (progressive enhancement) e sostituisce il contenuto HTML alternativo con il contenuto Flash quando è disponibile abbastanza supporto per JavaScript e per il plugin Flash.
Inizialmente definisci il contenuto alternativo e identificalo con un id:

<!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" lang="en" xml:lang="en">
  <head>
    <title>SWFObject 2.0 inserimento dinamico - passo 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
   
    <div id="myContent">
      <p>Contenuto alternativo </p>
    </div>
    
  </body>
</html>

PASSO 2: inserisci la libreria JavaScript SWFObject nella sezione head della pagina HTML

La libreria SWFObject è composta da un file JavaScript esterno. SWFObject sarà eseguito immediatamente e compierà tutte le modifiche al DOM appena questo sarà caricato - per tutti i browser che lo supportano, come IE, Firefox, Safari e Opera 9+ - oppure appena sarà eseguito l’evento onload:

<!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" lang="en" xml:lang="en">
  <head>
    <title>SWFObject 2.0 inserimento dinamico – passo 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
    <script type="text/javascript" src="swfobject.js"></script>
 
  </head>
  <body>
    <div id="myContent">
      <p>Contenuto alternativo</p>
    </div>
  </body>
</html>

PASSO 3: Inserisci il tuo SWF con JavaScript

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) ha cinque argomenti obbligatori e quattro opzionali:

  1. swfUrl (stringa, obbligatorio) specifica l’URL del vostro SWF
  2. id (string, obbligatorio) specifica l’id dell’elemento HTML (contenente il vostro contenuto alternativo) che vorreste sostituire con il contenuto Flash
  3. width (string, obbligatorio) specifica la larghezza del vostro SWF
  4. height (string, obbligatorio) specifica l’altezza del vostro SWF
  5. version (string, obbligatorio) specifica la versione del player Flash richiesta per riprodurre il vostro SWF (il formato è: "major.minor.release", ad esempio: 6.0.65)
  6. expressInstallSwfurl (stringa, opzionale) specifica l’URL del vostro file SWF per express install ed attiva l’Adobe express install. Vi prego di notare che express install sarà attivato soltanto una volta (la prima volta che sarà richiesto), che è supportato dal player Flash 6.0.65 o superiore su piattaforme Win o Mac e che richiede una dimensione minima del filmato di 310x137px.
  7. flashvars (oggetto, opzionale) specifica le tue flashvars con coppie nome:valore
  8. params (oggetto, opzionale) specifica i params degli elementi object con coppie nome:valore
  9. attributes (oggetto, opzionale) specifica gli attribute del vostro object con coppie nome:valore
<!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" lang="en" xml:lang="en">
  <head>
    <title>SWFObject 2.0 inserimento dinamico - passo 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>
    
    <script type="text/javascript">
     swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>
 
  </head>
  <body>
    <div id="myContent">
      <p>Contenuto alternativo</p>
    </div>
  </body>
</html>

Come potete configurare il vostro contenuto Flash?

Potete utilizzare i seguenti attributi opzionali dell’elemento object:

  • id (NOTA: quando non è definito, l’elemento object eredita automaticamente l’id dall’elemento che contiene il contenuto alternativo)
  • name
  • styleclass (usato al posto di class, perché è una parola chiave riservata ECMA4)
  • align

Potete utilizzare i seguenti elementi opzionali param specifici per Flash:

Come usare gli oggetti JavaScript per definire flashvars, params e attributi dell’oggetto?

Potete definire degli oggetti JavaScript usando la notazione letterale, che appare così:

<script type="text/javascript">
 
var flashvars = {};
var params = {};
var attributes = {};
 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
 
</script>

Potete aggiungere le vostre coppie nome:valore quando definite un oggetto (nota: assicuratevi di non mettere una virgola anche dopo l’ultima coppia di valori)

<script type="text/javascript">
 
var flashvars = {
  name1: "hello",
  name2: "world",
  name3: "foobar"
};
var params = {
  menu: "false"
};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};
 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
 
</script>

Oppure aggiungete proprietà e valori dopo la creazione dell’oggetto utilizzando la notazione del punto:

<script type="text/javascript">
 
var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";
 
var params = {};
params.menu = "false";
 
var attributes = {};
attributes.id = "myDynamicContent";
attributes.name = "myDynamicContent";
 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
 
</script>

Per i programmatori che amano scrivere tutto su unica riga, possono anche essere scritte nel seguente modo:

<script type="text/javascript">
 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});
 
</script>

Se non volete utilizzare un argomento, potete definirlo come false o come un oggetto empty (NOTA: dalla versione SWFObject 2.1 e successive potete anche utilizzare null o 0):

<script type="text/javascript">
 
var flashvars = false;
var params = {};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};
 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
 
</script>

L’Oggetto flashvars è una notazione abbreviata per facilitarvi l’utilizzo. Potenzialmente potreste ignorarlo e potreste specificare le vostre flashvars con l’Oggetto params:

<script type="text/javascript">
 
var flashvars = false;
var params = {
  menu: "false",
  flashvars: "name1=hello&name2=world&name3=foobar"
};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};
 
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
 
</script>

Consigli

Consigli per passare da SWFObject 1.5 a SWFObject 2.0

  1. E’ preferibile inserire tutti gli script nella sezione head della pagina HTML
  2. Ora la libreria è scritta in minuscolo: swfobject anziché SWFObject
  3. I metodi possono essere chiamati soltanto attraverso l’utilizzo della libreria (al posto dell’istanza SWFObject della versione 1.5)
  4. Le API sono completamente differenti e più elaborate
  5. SWFObject 2.0 sostituisce l’intero blocco HTML contenente il contenuto alternativo, compreso l’elemento contenitore, se è disponibile sufficiente supporto JavaScript e Flash. SWFObject 1.5, invece, sostituisce soltanto il contenuto all’interno del elemento HTML contenitore. Quando non è specificato un attributo id, l’elemento object eredita automaticamente l’id dall’elemento che contiene il contenuto alternativo.

Consigli per passare da UFO a SWFObject 2.0

  1. SWFObject 2.0 sostituisce l’intero blocco HTML contenente il contenuto alternativo, compreso l’elemento contenitore, se è disponibile sufficiente supporto JavaScript e Flash. UFO, invece, sostituisce soltanto il contenuto all’interno del elemento HTML contenitore. Quando non è specificato un attributo id, l’elemento object eredita automaticamente l’id dall’elemento che contiene il contenuto alternativo.
  2. Il parametro setcontainercss di UFO non è stato implementato in SWFObject 2.0. Può comunque essere facilmente replicato usando le API di SWFObject 2.0 (vedi: swfobject.createCSS(selStr, declStr) )

SWFObject supporta il MIME type application/xhtml+xml?

SWFObject NON supporta XML MIME types.

Esistono varie ragioni per cui non è supportato:

  • Soltanto un esiguo numero di autori per il web lo utilizzano
  • Non siamo sicuri che sia la direzione da seguire. Internet Explorer non lo supporta e tutti gli altri produttori dei browser principali si stanno preparando ai nuovi modi standard di analisi dell’HTML (con HTML 5), che differisce dalle attuale visone del W3C di analizzare HTML come XML
  • Non supportandolo risparmiamo sulle dimensioni del file e sugli sforzi necessari per implementarlo (test, risoluzione dei problemi)

 

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


 

Ricevi tutte le news tramite RSS
© 2005-2015 MagnificaWeb. Tutti i diritti riservati.