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
Pingback: Inserire correttamente un filmato SWF (Flash) in una pagina Html utilizzando javascript | daniele rollo
Pingback: Inserire un video in formato flv all'interno di una pagina html | daniele rollo
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.
Pingback: Filmati Flash SWF e video in formato FLV: una panoramica | daniele rollo
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).
Caro Daniele,
Solo alcune note (se non già evidenziate):
1. L’id della div deve essere uguale al parametro della write JS, altrimenti non funzia, ovvero:
…so.write(“flashcontent”)
2. Il secondo parametro di SWFObject (“myflash”) ha un altro significato e può essere diverso come id dai due precedenti
3. Questo tool è molto interessante, anche se relativamente compatibile, per es. funzia bene con MZ-Firefox 2, ma non linka con MS-Explorer 7
4. Vedere: http://blog.deconcept.com/swfobject/
Grazie.
PLB
————————————————
testo…
var so = new SWFObject(“flash.swf”,”myflash”,”80″,”40″,”8″,”#FFFFFF”);
so.write(“flashcontent”);
————————————————
urgente!ho da inserire nel mio sito molti video che da mpg sono stati convertiti in flv pero no so come fare visto che non sono pratico di flash e vari codici.la mia idea e’ di avere una pagina web con i filmati e che sia l’utente a caricarlo con il tasto “start”per capirci come posso fare? che programma devo scaricare ed inserirlo nel server cosi l’utente possa vedere i film?
Funziona tutto sul PC, ma sul web il player dice file non trovato. Non trovo la soluzione
un esempi vale piu di 1000 parole
ciao johnny,
In alcuni post specialmente quelli più “lineari” di solito non fornisco l’esempio.
daniele
Ciao Daniele e complimenti per il tuo sito…
passo a farti una domanda..
sto provando ad utilizzare Swfobject 2.2 per validare il sito con W3C e passare delle flashvars ai miei swf.
Il sito è composto in questo modo… ho solamente 3 swf.. uno a sinistra e due al centro della pagina…
ora ti spiego il mio problema… se faccio l’embed dell’swf all’interno dei rispettivi DIV con dreamweaver (quindi nn seguendo il metodo SwfObject) si allineano bene come dovrebbero…
invece…
appena sostituisco il codice generato da dreamweaver con quello di Swfobject non si allinea più bene… ovvero..riesco a vedere tutti e tre gli swf.. ma si allineano uno sull’altro… oppure si sovrappongono… come se non si interessasse più degli allineamenti che gli passo tramite il css..
sapresti spiegarmi come mai?? è mai successo anche a te??
ti faccio presente che utilizzo Swfobject 2.2 e sto provando il metodo della pubblicazione DINAMICA.
grazie mille del tuo aiuto
Luca
potete aiutarmi devo inserire un file swf nella pag html ho usato questo tutorial ma non sono riuscita a farlo funzionare
e con la procedura guidata di dreamweawer il filmato non viene visualizzato dopo la pubblicazione sul server non capisco qualcuno ha qualche idea?
Ciao a tutti ho un problema.
Ho usato questo (ottimo) tutorial per inserire il file .swf in una pagina. Praticamente attraverso una seri di funzioni apro un popup con all’interno il codice object/embed generato da swfobject. Mi chiedo però se è possibile rendere il contenuto swf cliccabile e indirizzabile ad una specifica pagina, in quanto ora, se ci clicco, mi apre una pagina con lo stesso url della pagina di provenienza più il valore undefined (es http://www.blabla.com/undefined).
In poche parole vorrei che cliccando sopra al file swf mi si apra una specifica pagina.
Ringrazio molto chi può aiutarmi
è possibile che le immagini grandi non vengano visualizzate correttamente?
Salve Daniele, ho un problema con dreamweaver…non riesco a realizzare una mappa con i punti cliccabili su un file SWF. sulle immagini normali è semplicissimo ma sui file in flash come si fa?
ciao, una domanda…ho inserito sul mio blog, una canaletv con mogulus, mi ha dato il codice embed ma vorrei inserire il lettore sotto l’header quindi nella colonna centrale sfruttando la sua larghezza, dato che quelle laterali mi impongono misure piccole, dovrei creare un box ma forse sbaglio qualcosa, come faccio a creare un div implementandoci dentro il codice embed che mi restituisce mogulus?
purtroppo non ho capito esattamente dove cambiare i div nel codice head per inserire in una stessa pagina più filmati interni in flash.. si può avere un esepio pratico?