daniele rollo » cross-browser http://www.danielerollo.com Produzioni multimediali, interfacce, design Tue, 13 Dec 2011 15:49:41 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Inserire un filmato SWF (Flash) in una pagina Html con javascript: SWFObject http://www.danielerollo.com/inserire-un-filmato-swf-flash-in-una-pagina-html-con-javascript-swfobject/ http://www.danielerollo.com/inserire-un-filmato-swf-flash-in-una-pagina-html-con-javascript-swfobject/#comments Tue, 26 Feb 2008 10:20:24 +0000 daniele http://www.danielerollo.com/2008/02/26/inserire-un-filmato-swf-flash-in-una-pagina-html-con-javascript-swfobject/ Continue reading →]]> Abbiamo già visto in questo post come utilizzare Unobtrusive Flash Object (ufo.js) per pubblicare un filmato flash swf all’interno di una pagina html. Un altra via per evitare i problemi legati ai tag OBJECT ed EMBED, è usare il file javascript SWFobject.
Anche questa tecnica si basa sull’uso del DOM: creeremo un elemento DIV, quindi, il cui contenuto sarà sostituito da javascript con il filmato flash che specificheremo.
E’ possibile scaricare swfobject qui.
Il funzionamento di swfobject.js è molto semplice.
E’ necessario innanzitutto includere lo script all’interno dell’Head nella pagina Html. Quindi:

<script type="text/javascript" src="swfobject.js"></script>

A questo punto, come nel caso di UFO, si imposta il div contenitore: il testo presente all’interno di quest’ultimo sarà visualizzato in tutti i casi in cui, per qualsiasi motivo, javascript non sarà in grado di inserire il player, ma possiamo essere abbastanza sicuri che ciò avverrà solo se non è installato il plugin. Proprio per questo motivo il testo che inseriremo in questo div farà riferimento al plugin mancante:

<div id="swfcontent">
Non è possibile visualizzare il filmato.<br/>
Potrebbe essere necessario installare il plugin flash.<br/>
Puoi scaricarlo <a href="http://www.adobe.com/shockwave/download/download.cgi">qui</a>
</div>

A questo punto possiamo ordinare a SWF Object di sostituire il contenuto del div “swfcontent” con il filmato che noi specificheremo, in questo modo:

<script type="text/javascript">
   var so = new SWFObject("mymovie.swf", "mymovie", "400", "200", "8", "#336699");
   so.write("swfcontent");
</script>

Evidentemente anche SWFOBJECT prevede parametri obbligatori: il percorso del file swf, l’ID univoco da assegnare all’oggetto multimediale che verrà creato, larghezza e altezza, la versione di flash player necessaria per visualizzare il file swf, e il colore di sfondo del filmato.

Ovviamente è possibile passare al file swf variabili flashvars, in questo modo:

so.addVariable("variable1", "value1");

Mentre la funzione getQueryParamValue permette inoltre di passare al filmato flash il contenuto di una variabile presente nell’url:

so.addVariable("varName2", getQueryParamValue("GetVarName"));

Per concludere ecco il codice completo per pubblicare contenuto flash utilizzando SWFOBJECT, supponendo che il file .swf si trovi nella stessa cartella del file html,:

<!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 | pagina esempio</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="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>

<script type="text/javascript">
   var so = new SWFObject("mymovie.swf", "swfcontent", "400", "200", "8", "#336699");
// aggiungiamo righe come la seguente se vogliamo passare variabili al file swf
   so.addVariable("varName", "Var Content"); 
// aggiungiamo righe come la seguente per utilizzare variabili presenti nell'url
   so.addVariable("varName2", getQueryParamValue("GetVarName")); 
   so.write("flashcontent");
</script>


  </body>
</html>

Link:
La pagina di SWFobject

]]> http://www.danielerollo.com/inserire-un-filmato-swf-flash-in-una-pagina-html-con-javascript-swfobject/feed/ 23 Inserire correttamente un filmato SWF (Flash) in una pagina Html utilizzando javascript: UFO http://www.danielerollo.com/inserire-correttamente-un-filmato-swf-flash-in-una-pagina-html-utilizzando-javascript/ http://www.danielerollo.com/inserire-correttamente-un-filmato-swf-flash-in-una-pagina-html-utilizzando-javascript/#comments Wed, 13 Feb 2008 07:20:32 +0000 daniele http://www.danielerollo.com/2008/02/13/inserire-correttamente-un-filmato-swf-flash-in-una-pagina-html-utilizzando-javascript/ Continue reading →]]> 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

]]> http://www.danielerollo.com/inserire-correttamente-un-filmato-swf-flash-in-una-pagina-html-utilizzando-javascript/feed/ 12