Il modo tradizionale per inserire un filmato SWF (quindi flash) all’interno di una pagina web è quello di usare il tag object assieme al tag embed.
Poichè OBJECT è il tag che dovremmo utilizzare secondo lo standard W3C , ed EMBED è un tag proprietario, ma supportato da molti browser, la soluzione – tendenzialmente cross-browser – per lungo tempo è stata quella di utilizzarli congiuntamente. È la via scelta tuttora da Youtube per l’embedding dei filmati.
<object width="425" height="355">
<param name="movie"
value="http://www.youtube.com/v/KvA0nmAhTfk&rel=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/KvA0nmAhTfk&rel=1"
type="application/x-shockwave-flash" wmode="transparent"
width="425" height="355"></embed></object>L’utilizzo di OBJECT ed EMBED pone però una serie di problemi non di poco conto: innanzitutto la pagina non è standard-compliant. Inoltre, sulle versioni meno recenti di internet explorer il filmato flash è circondato da un fatidioso riquadro che indica che il file swf non è ancora attivo: bisognerà attivarlo facendo click sul filmato.
Per risolvere questi problemi sarà necessario ricorrere al DOM (Document Object Model). Faremo così: creeremo un elemento div nella pagina html; il contenuto di questo div sarà rimpiazzato (per mezzo di javascript) con del codice in grado di visualizzare correttamente il filmato swf.
A questo scopo è possibile utilizzare due diverse library javascript: Unobtrusive Flash Objects oppure SWFObject. In questo tutorial utilizzeremo la prima, nota come UFO. Vedremo in un altro post tutte le istruzioni per SWF object
Il primo passo da compiere è quindi il download di UFO.js.
A questo punto copiamo il file ufo.js nella cartella del nostro sito e lo richiamiamo nell’HEAD della pagina web in cui il filmato swf deve essere visualizzato:
<script type="text/javascript" src="ufo.js"></script>Nel BODY della pagina invece creeremo un DIV, che avrà quindi ID univoco. Tutto il codice contenuto all’interno di questo DIV sarà sostituito da UFO con il filmato swf.
<div id="swfcontent">Non è possibile visualizzare il filmato. Potrebbe essere necessario installare il plugin flash, puoi scaricarlo <a href="http://www.adobe.com/shockwave/download/download.cgi">qui</a></div>Se il contenuto del div deve essere sostituito, perchè abbiamo inserito, all’interno di swfcontent, un link alla pagina del plugin flash? La risposta è semplice. Se il plugin non è installato sul browser dell’utente, UFO non riuscirà a sostituire il contenuto del div con un filmato: in questo caso l’utente visualizzerà il contenuto del div, cioè un messaggio di errore che invita ad installare il plugin.
Dobbiamo comunque tenere bene a mente che teoricamente questo messaggio di errore viene visualizzato in tutti i casi in cui UFO non può funzionare: quindi anche quando il plugin è installato e tuttavia si verifica un errore che impedisce la sostituzione del contenuto del div. In realtà, se il codice è corretto, non dovrebbero verificarsi errori e il messaggio dovrebbe apparire solo se il plugin non è installato. In ogni caso, UFO rivela qui un altro vantaggio: la possibilità di inserire un contenuto alternativo che sarà visibile a tutti quelli che per un motivo o per l’altro non potranno vedere il filmato.
Andiamo avanti: torniamo nell’HEAD e ordiniamo a UFO di creare il contenuto flash, specificando il nome del div in cui inserirlo e un array contentente i parametri necessari alla riproduzione del filmato: nome del file swf, larghezza e altezza del filmato, majorversion (va bene la versione utilizzata per creare il filmato) e buildversion del plugin flash necessario a visualizzare il filmato.
<script type="text/javascript">
// innanzitutto impostiamo i parametri necessari
var FO = {movie:"nomedelfile.swf", width:"300", height:"120", majorversion:"6", build:"40" };
// quindi richiamiamo ufo, inviando i parametri contenuti in FO,
// e specificando l'elemento swfcontent
UFO.create(FO, "swfcontent");
</script>Per tutti i parametri opzionali consiglio di guardare la documentazione di UFO. Ricordo che utilizzando il parametro opzionale “flashvars” possiamo inviare variabili al filmato flash:
var FO = {movie:"nomedelfile.swf", width:"300", height:"120", majorversion:"6", build:"40", flashvars:"firstvar=daniele&secondvar=2" };Supponendo che ufo.js si trovi nella stessa cartella della pagina html, e invece il filmato flash sia all’interno della cartella, “swf” il codice completo per visualizzare il filmato sarà questo:
<!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>UFO | pagina esempio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"swf/nomedelfile.swf", width:"300", height:"120", majorversion:"6", build:"40" };
UFO.create(FO, "swfcontent");
</script>
</head>
<body>
<div id="swfcontent">
Non è possibile visualizzare il filmato. Potrebbe essere necessario installare il plugin flash, puoi scaricarlo <a href="http://www.adobe.com/shockwave/download/download.cgi">qui</a
</div>
</body>
</html>Link utili:
La guida ad SWFobject
Download UFO.js
Pagina web di UFO
Pagina web di SWFObject
DOM