Attenzione, questo post è datato, la libreria Unobtrusive Flash Objects (UFO) è obsoleta. Per inserire correttamente flash in una pagina html, adesso puoi usare SWFObject: clicca qui per visualizzare i relativi post.

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

This entry was posted in Tutorial, Webdesigner and tagged , , , , , , , , , , . Bookmark the permalink.

17 Responses to Inserire correttamente un filmato SWF (Flash) in una pagina Html utilizzando javascript: UFO

  1. Pingback: Inserire un filmato SWF (Flash) in una pagina Html con javascript: SWFObject | daniele rollo

  2. Pingback: Inserire un video in formato flv all'interno di una pagina html | daniele rollo

  3. Jo says:

    Funziona! Grazie!

  4. Dario says:

    Ciao, vorrei sapere come si fa a far si che il video, una volta finito, non riprenda d’accapo! Rigrazio fin d’ora! :)

  5. Meeo says:

    gli dai uno stop nell’ultimo fotogramma! (da flash)

  6. Rafael says:

    Ottimo tutorial.. Grazie!

  7. Andrea says:

    scusate ma in pratica cosa accade?

    io per esempio metto il link di youtube metto il il filmato nella mia pagina e questo parte da solo oppure devo cliccare l’icona play?

    perchè a me serve che parta da solo in automatico per poi fermarsi.

    grazie

  8. Pasquale says:

    Ciao e’ da mesi che cerco uno script completo xke’ il mio swf inserito in un html mi andava in tutti i browser ma non si visualizzava su internet explorer. Ora funziona anche su internet explorer ma ti chiedevo una cosa: ho notato che sempre su explorer quando lancio il sito web, mi esce la scritta che non e’ possibile visualizzare il video swf, ed esce il controllo di ActiveX. Se non scarico il plugin ma clicco su ActiveX e clicco su consenti contenuto bloccato il video funziona. C’e’ un modo per eliminare sempre questi controlli? Perche’ ci sono siti web che si visualizzano senza controlli, aspetto un tuo riscontro, grazie ancora,ciao!!!

  9. robb says:

    ottimissimo tutorial!!! Grande! :D
    ci stavo sbattendo da un bel pò con swf e IE!

  10. Francesco says:

    Conplimenti per l’ottima spiegazione.
    Vorrei sapere se risulta possibile inserire più di un filmato .swf nella stessa pagina utilizzazndo UFO.
    Io ci ho provato. Ho anche modificato il file ufo.js ma proprio nn ci sono riuscito.
    Quello che ottengo è la visualizzazione di un solo filmato e l’errore di una chiamata errata nel file js.
    Qualcuno ha già risolto o conosce la soluzione?
    Grazie a tutti. Ciao, Francesco.

  11. daniele says:

    Ciao Francesco, probabilmente stai utilizzando lo stesso ID sui div in cui vuoi caricare il filmato flash. Se metti più di un video, usa ID differenti (e quindi poi dovrai agire con javascript su i differenti DIV).
    Occhio però che come segnalo in alto sotto al titolo del post, UFO è obsoleta, ed è meglio usare SWFobject.

  12. Ryo says:

    Ottimo, grazie!

  13. woolrich says:

    Io ci ho provato. Ho anche modificato il file ufo.

  14. Marco says:

    Ho un problema non riesco a centrare il flash rispetto alla pagina mi rimane sempre allineato a sx

    ps: ho privato con:
    var FO = {movie:”index.swf”, align:”center”, width:”710″, height:”590″, majorversion:”6″, build:”40″ };
    grazie

  15. Moncler says:

    così incredibile!

  16. Salvaotore says:

    E se voglio inserire più filmati swf con lo stesso codice nella stessa pagina come faccio?

  17. Selena says:

    Amazing! Τhis blog lοоks ϳust like my olԁ onе!
    It’s on a totally different topic but it has pretty much the same page layout and design. Outstanding choice of colors!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>