Abbiamo già visto nei giorni scorsi come inserire all’interno di 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 pagina web un video in formato FLV.
Per visualizzare un flusso video FLV è necessario un player. Questo non sarà nient’altro che un filmato SWF in grado di riprodurre il file. Fa al caso nostro l’ormai storico player di Jeroen Wijering.
Il file Zip che andiamo a scaricare contiene tutto il necessario per pubblicare il video.
Inseriremo all’interno della pagina il file mediaplayer.swf, utilizzando SWFobject.
La seguente istruzione sostituirà il div “container” con un div contente il player swf:
s1.write("container");Ma prima di tutto dovremo specificare i parametri che per SWFobject sono obbligatori.
var s1 = new SWFObject("mediaplayer.swf","mediaplayer","300","170","7");A questi parametri bisognerà aggiungere le variabili flashvars necessarie per creare il player e per riprodurre il filmato: specificheremo infatti il percorso di quest’ultimo e una serie di valori relativi all’aspetto del player.
Il parametro image per esempio indica l’immagine da visualizzare nel player finchè non viene avviata la riproduzione.
s1.addVariable("width","300");
s1.addVariable("height","170");
s1.addVariable("file","video.flv");
s1.addVariable('image','image.jpg');Quindi, ammesso che la pagina html, swfobject.js, mediaplayer.swf e il file video.flv si trovino nella stessa cartella, il codice per pubblicare il player sarà questo:
<script type="text/javascript" src="swfobject.js"></script>
<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("mediaplayer.swf","mediaplayer","300","170","7");
s1.addVariable("width","300");
s1.addVariable("height","170");
s1.addVariable("file","video.flv");
s1.addVariable('image','image.jpg');
s1.write("container");
</script>In questo modo SWFobject sostituisce il div container con un div chiamato mediaplayer, inserisce il filmato flash mediaplayer.swf, con i parametri specificati, all’interno del div e passa al player tutte le variabili necessarie al suo funzionamento.
Nulla di eccezionale quindi: si tratta di utilizzare SWFobject per pubblicare un filmato flash SWF specificando alcune Flashvars obbligatorie.
Aggiungo soltanto che è possibile personalizzare JWplayer in mille modi: tutta la documentazione è sul sito dell’autore, dove si trova anche un utilissimo wizard per impostare il player nel modo che preferiamo.
Altri link:
FLV su wikipedia
Greader
my del.icio.us
Ciao, non riesco ad aprire il file .zip, mi da errore
Ciao Elisabetta, è molto strano perchè il link punta direttamente al zip originale dell’autore, scaricato da un sacco di gente!
[…] Player swf realizzati allo scopo di riprodurre video flv. [post] […]
Molto bello.
non riesco però a capire come far si che nella pagina in cui inserisco questo player con il relativo filmato, cliccando su altri link mi carichi altri filmati.
Comunque molto ben spiegato e utilissimo!
Complimenti
Ciao Enrico, grazie dei complimenti… per fare quello che chiedi bisognerà modificare la funzione javascript che crea il div, in modo che cliccando su un link si passi il nome del file che vogliamo riprodurre e la funzioni ricrei il player… appena ho un secondo scrivo una piccolo guida a proposito.
Ciao,
grazie della risposta e ti ringrazio già anticipatamente per la guida.
Sono stato sul sito dell’autore del palyer e provando il wizard ho trovato una versione che al di sotto del player mostra altri possibili video da visualizzare (mediaplayer with a playlist that autoscrolls).
Ho fatto le varie customizzazioni ma non riesco a capire come passare le variabili all’elenco dei video.
Premetto che mi intendo molto poco di web e praticamente solo a livello html, sono un musicista che per diletto monta video e fa authoring DVD soprattutto per l’orchestra di cui faccio parte.
E’ proprio di lì che nasce questa ricerca del player web.
Ti ringrazio ancora, rinnovo i complimenti per il tuo sito che trovo ottimo!
Enrico
ciao daniele, era sicuramente un mio problema. Ora tutto ok
Senti io dovrei richiamare dei filmati di una playlist. Come faccio a richimarla?
Ciao Elisabetta. Per riprodurre una playlist, devi realizzarla in formato xml, ed indicare questo file al player (prova questo wizard).
Ciao Daniele, sono arrivato oggi sui tuoi tutorials e sono riuscito a capire cosa fare per pubblicare dei filmati. Come Elisabetta vorrei riprodurre una playlist…ma come fare un file .xml? Non sono molto ferrato al di là dell’ html.
Grazie
Alessandro
Ragazzi sto scrivendo un breve tutorial per inserire una playlist, penso di riuscire a pubblicarlo la settimana prossima…
Ciao, se vogli inserire semplicemente più video nella stessa pagina web come devo fare?
Ora ho solo duplicato per ogni video le righe di languaggio della guida… su firefox me le conosce… ie7 e safari no!
qualcuno mi aiuta?
ecco il link della mia pagina:
http://web.tiscali.it/rockford/Video/video.htm
grazie!
[…] Tempo fa abbiamo visto come utilizzare la libreria javascript SWFobject per visualizzare un file flv all’interno di una pagina html, utilizzando il JW Flv player. Se abbiamo ben presente come pubblicare un video in questo modo, sarà un gioco da ragazzi impostare il player per la riproduzione di una playlist di file FLV. Quindi il tutorial che segue presuppone la conoscenza di tutto quello che abbiamo visto nel post dedicato alla pubblicazione di file FLV in una pagina HTML. […]
Ciao Andy, devi cambiare l’id del div contenitore (quindi: “container”) per ogni video: non può essercene più di uno. Magari numerali.. e ricordati di cambiarli anche nel codice javascript.
Stessa cosa per il parametro destinazione (quindi “mediplayer”) nello script. Gli ID sono sempre univoci!!!
fammi sapere se funziona…
Grazie Daniele!
Ho numerato con:
container01
container02
container03
nel codice javascript e ora
e tutto funziona!!!
ora sono cuirioso di provare con la lsita xml…
Ottimo Andy!
ciao, complimenti per la guida, son riuscito a far funzionare tutto anche la lista con i vari video, però caricandolo in remoto, i video non partono. Perchè?
Ciao Fabrizio, una possibilità potrebbe essere i percorsi dei file che passi nello script, controlla che siano validi.. con i percorsi relativi capita sempre di fare qualche errore, spero sai questo.