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
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.
Ciao Daniele
aiutami a uscire da questo tormento, in pratica a me serve solo la musica e non il video, ho scaricato tutto l’occorrente dal sito di http://www.jeroenwijering.com anche il player ma non riesco a capire come farlo funzionare in pratica ho una pagina dove ci sono le classifiche e devo far ascoltare 30 secondi di una canzone, non so se hai presente la classifica di r101 (www.r101.it) il problema mi sorge quando devo caricare la pagina che si appesantisce come devo fare, forse con il mio metodo carica anche le canzoni, non riesco a spiegarmi meglio dammi una dritta. grazie Sergio
Ciao Sergio, innanzitutto un esempio di playlist lo trovi sul sito stesso di JW: qui
Non credo comunque che gli mp3 vengano caricati subito all’apertura della pagina. I problemi di “pagina pesante” potrebbero dipendere da altro…
In ogni caso per scoprirlo puoi usare l’estensione per firefox firebug. Dopo averlo installato e attivato in firefox, clicca sull’iconcina verde in basso a destra della finestra e clicca su net: ti mostra il peso di tutti gli elementi presenti nella pagina e la velocità di caricamento.
Appena posso scrivo un post sulle playlist mp3 e su firebug, nel frattempo spero che tu riesca a risolvere… ciao
Ciao Daniele, perdona la mia ignoranza ho fatto quello che mi hai detto. ok adesso saresti cosi gentile da dirmi come devo fare per controllare eventuali errori e la velocità di caricamento della pagina. Scusami ancora
Sergio
Ciao Daniele, ho risolto per quanto riguarda la velocità. Adesso mi è sorto un’altro problema su alcuni pc i 30 secondi delle canzoni le ascolto bene mentre facendo la prova su altri le canzoni le sento a veocità tipo 78 giri. da cosa dipende secondo te. Sergio
Caro Sergio… non ne ho la minima idea!!! facci sapere
Ciao Daniele, quando hai tempo prova a sentire questi file e fammi sapere come vanno se li senti a velocità normale o a velocità 78 giri, praticamente ho solo riportato il player. Io su aluni pc come ti dicevo prima li sento bene in altri a velocità 78 giri.
Ciao Sergio
Scuami questo è il cillegamento
http://www.studio99.fm/prova/default.htm
Su Firefox Win e Mac li sento a velocità normale. Non so da cosa possa dipendere…
Complimenti per le infomazioni, funziona a dovere
Complimenti per il post, molto utile!!!
Sono diventata un pò scema con questo player, ma quando va fa il suo lavoro!
Solo per aggiungere una cosa che magari ad altri può servire: potrebbe accadere che con IIS6 dia dei problemi quando si pubblica, non facendo vedere i video.
per farlo funzionare basta aggiungere l’estensione su IIS6:
aprire IIS6
Cliccare col destro su vostro Local Computer Server –> proprietà
Cliccare sul bottone “Myme Types”
Cliccare su “nuovo” e inserire le seguenti informazioni:
Extension: .flv
MIME Type: video/x-flv
Cliccare su “Applica” e “OK”
Riavviare IIS (strumenti di amministrazione->Servizi)
@Elisa: ottimo suggerimento… grazie!
Ciao,
è possibile includere questo player in un altro filmato flash??
Cazzarola ho provato in vari modi ma non riesco..
C’è un tutorial da qualche parte?
(In pratica vorrei utilizzarlo come player in un flash projector per dvd)
Ciao e grazie per le dritte….un complimento per la guida che per un neofita sono presiose…
Avrei un problema : vorrei inserire la variabil che abilit il download del filmato (con le opzioni illustrate nel sito delle faq e del wizard) ma non riesco a farlofunzionare.
Quello che inserisco è:
s1.addVariable(”showdownload”,”true”);
s1.addVariable(”link”,”/path/nomefile”);
Sono riuscito ad inserire il video, ma vorrei che partisse in automatico non appena si apre la pagina come faccio???? grazie.
ciao salvo,
per far partire il video automaticamente, devi aggiungere il parametro AUTOSTART allo script, in questo modo:
s1.addVariable(”autostart”,”true”);
grazie! Daniele, gentilissimo
Scusa ma perchè i miei file .flv non me li visualizza? Si sente solo l’audio mentre se faccio partire i file .swf si vedono, si sentono ma non si riescono a mettere in pausa….
niente ho risolto
Bellissimo script per inserire video, e veramente facile!
Vorrei sapere se c’è la possibilità di settere il volume di default all’ apertura della pagina.
Su safari e firefox per mac funziona uguale? io non li ho e non posso saperlo.
Tnks
Ricky
Ciao a tutti,
intanto complimenti per lo script, davvero bello. Vi scrivo però perché ho un grosso problema. Il tutto mi funziona benissimo, però solo su firefox. Su I.E.7 non si apre completamente.
Potreste darmi una mano, magari è solo una cavolata.
Grazie mille
Fabio
http://www.avvinando.it/video.asp
Ciao Fabio,
lo script è testato anche su ie7. Quindi c’è qualche problema nel tuo codice. In particolare (credo) nel punto in cui passi la variabile con il nome del filmato:
s1.addParam(”flashvars”,”file=filmato.flv”);
prova a cambiarlo così:
s1.addVariable(”file”,”filmato.flv”);
speriamo bene…
Ciao daniele,vorrei kiederti una cosa.Ho un sito sul quale nella home ho messo un filmato .swf.Adesso dovrei renderlo cliccabile collegandolo ad un altra pagina all’interno del mio sito,ma tutto ciò non mi riesce.Puoi aiutarmi?
gentile daniele vedo che sei bravissimo su tutto video; mi servirebbe da te un grande favore; ho visto un video straordinario di adobe media player: siccome vorrei mettere dei video di quella grandezza sul mio blog e leggeri come quelli, ti chiedo se mi puoi spiegare come devo fare. Ti premetto che nella directory video attuale io ho WINDOWS MEDIA PLAYER nell’icon/type e poi quando vado dove c’è il nome del file è ppppp.wmv; siccome come ti dicevo prima vorrei fare adobe media player, come devo fare sull’icon/type?, fermo restando che il file si presuppone pppp.flv, o è diversamente?. Me lo puoi spiegare. Ti ringrazio della tua gentilezza e complimenti per la tua bravura. Giuseppe
Jovanotti ha plagiato la musica di Alejandro Sanz (a primera persona …poi ha plagiato Donatella Rettore
Ciao Daniele,
complimenti per l’ottima guida! Mi e’ stata davvero utile, però ho un piccolissimo problemino:
se uso il tuo codice sia si firefox (fino all’ultima versione) ho la possibilità di ingrandire il video, mentre su IE7 non me la fa ingrandire, come mai?
Grazie!
Ciao Robertino,
Ti riferisci alla possibilità di ingrandire a tutto schermo?
In questo caso assicurati di aver specificato nei parametri anche ALLOWFULLSCREEN, in questo modo:
s1.addParam(”allowfullscreen”,”true”);
come si vede nella demo.
aiuto urgente!ho vari filmati formato mpeg e li ho convertiti in formato flv ,ho usato il vostro script completo per inserirlo nella pagina pero mi visualizza solo un file e gli altro no! avendo ovviamente cambiato il nome del file e avendo lo scaricato sel server ospite come mai?
Dopo mille tentativi non riesco a visualizzare i file. Riesco a vedere l’immagine di preview ma cliccando su play esce la scritta video.flv non trovato. Sul PC invece funziona tutto perfettamente. Avete un consiglio? Grazie
Ciao a tutti
Volevo chiedere, io come tanti faccio gif animate che poi metto in firma nei forum dove sono registrato e funzionano in loop. Ora le gif anno delle limitazioni evidenti se si vuol far vedere una piccola clip. il mio problema al di la del creare un file flv o Swf è come caricarlo in rete e che poi funzioni in loop.
pensavo di mettrllo su il classico e famoso yuo tube ma poi per ottenere il risultato voluto come faccio , i filmati sono cmq senza audio per limitare la grandezza e perchè nn avrebbe senso.
Esempio di una gif : http://immagini.p2pforum.it/out.php/i368071_ani5.GIF
Ciao Daniele,
la guida è veramente ottima,
io avrei la necessità di far partire il video a tutta pagina, in pratica come se si selezionasse l’opzione Mostra tutto del player.
So che è possibile, ma non ci sono ancora riuscito.
Grazie in anticipo se potrai darmi una dritta.
Ciao, Daniele
Io ho lo stesso problema di Enrico: “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.”
Ho un database mysql in cui ho URL dei video ed immagini di anteprima. Facendo una query su una pagina che richiama link video e foto, come faccio, cliccando sui link, a mandarli al player?
Grazie!!
Michela
Mi sto scontrando con lo stesso problema di ‘renegade’:
se aggiungo il parametro “autostart” il filmato parte ma si sente solamente l’audio, mentre il video resta nero e non carica.
Appare solamente se faccio un refresh della pagina o se premo STOP e poi nuovamente PLAY.
Sembra un problema di sincronizzazione e/o ritardo di caricamento (come se venisse premuto PLAY prima del caricamento completato).
‘Renegade’ ha risolto.
Io non sono così fortunato.
Qualcuno sa darmi un suggerimento o si è mai scontrato con lo stesso problema?
Daniele?
Grazie
Ragazzi, io ho fatto tutto, il player, il preview personalizzato, i colori personalizzti… Ero superfelice!
Poi, una volta pubblicato, vedendo il video si blocca e spunta fuori la schermata per embeddarlo, si inceppa, l’audio continua… una cosa snervante. E’ possibile togliere questa funzione che fa uscire l’embed? Anche perchè se io non volessi farlo embeddare… sarei altrimenti costratto? Se è possibile eliminarla, quale stringa html bisogna cancellare dal codice?
Grazie in anticipo!