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
Greader
my del.icio.us
[...] 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 [...]
[...] una pagina html un filmato flash utilizzando javascript e il DOM con Unobtrusive Flash Object e con SWFobject. In questo post vedremo come utilizzare una di queste tecniche per inserire all’interno della [...]
se non ho capito male con questo script ordineremo l’inserimento d un file flash dentro ad un div giusto?
io vorrei però poter richiamare diversi video in questo div, cioè cliccando sul link 1 fare in modo che il video ad esso associato si vada ad aprire nel div, stessa cosa cliccando il link2, il 3..ecc ecc..
mi sapreste dare una dritta perfavore?
Ciao Stefano, innanzitutto una precisazione: con questo script inserisci un filmato flash SWF, non per forza un video all’interno del DIV.
Per inserire un vero e proprio video il tutorial giusto è questo.
In ogni caso: per cambiare al volo con un click il contenuto del div (se ho capito bene), credo che potresti creare una funzione javascript e richiamarla al click sul link. La funzione javascript cambia ancora una volta il contenuto del div con il filmto SWF che preferisci (il nome del filmato lo “passi” alla funzione che lo utilizza per ricreare il giusto contenuto del div).
Purtroppo non riesco a risponderti in poche righe, ma
appena posso scrivo un post su questo, grazie dello spunto!
sì intendo anch’io inserire file swf, cioè i classici file prelevati da youtube.
come prima soluzione ho pensato all’utilizzo di iframe, ma siccome voglio passare la validazione del mio sito ne è proibito l’utilizzo.
Spero che tu possa presto inserire un post sull’argomento, io purtroppo capisco praticamente nulla di javascript e perciò mi limiterei a seguire i vari passi sperando d capirli tutti per bene, a copiarli ed incollarli modificando i nomi dei file flash e a genuflettermi in tuo onore per la risoluzione del mio problema :))
Comunque Stefano considera che relativamente ai video, anche quelli di youtube, SWF è il contenitore FLASH: il video vero e proprio, quello che puoi anche scaricare è un file FLV.
[...] per una corretta visualizzazione dei filmati Swf. [Post qui e [...]
Ciao, se a questo punto vorrei inserire un altro oggetto Flash (p.es. un banner) SOPRA il player appena creato, come si dovrà procedere? E soprattutto, è possibile?
Grazie 1000!
ciao Bender, praticamente mi chiedi di inserire più filmati SWF all’interno della pagina. Ripeti lo script, facendo attenzione a nominare i div contenitori usando ID univoci, altrimenti non funzionerà (puoi numerarli).
(Se vuoi inserire più di due o tre swf, ti converrà creare una funzione per allegerire la pagina… di questo mi occuperò in un tutorial prossimamente)
Salve ho visto il vostro tutorial per inserire video flash in pagine web.
Il mio problema è che io ho un sito e-commerce dove ho aggiunto pagine con dreamweaver in quando il sito dovrebbe essere in asp. Non riesco ad inserire i filmati in nessun modo. Ho seguito tutte leistruzioni:
Caricare sul server il mediaplayer il file swf object il file flv, ma la pagine html quale metto?.
Insomma non si vede nien te
ecco il codice php (spero):
<?php
include_once("db.php");
$id_blob = isset($_GET["id_file"]) ? trim($_GET["id_file"]) : "";
$stream = db_find("blob_blob", "blb_blobs", "id_blob = $id_blob ");
echo ($stream);
die();
?>
Fabrizio ti rispondo al volo: non puoi passare una url con parametro get come nome del filmato tra le variabili js. deve essere il nome del file più l’estensione flv. Salva direttamente nel db il nome del file, e poi passa questo allo script. oppure con php fai in modo di “trasformare” l’id in un nome file più l’estensione flv e quindi inserisci questo nello script (via echo) (sempre che il file esista).