Inserire un video in formato flv all’interno di una pagina html
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
March 19th, 2008 at 11:12 am
Ciao, non riesco ad aprire il file .zip, mi da errore
March 19th, 2008 at 11:27 am
Ciao Elisabetta, è molto strano perchè il link punta direttamente al zip originale dell’autore, scaricato da un sacco di gente!
March 20th, 2008 at 12:46 pm
[...] Player swf realizzati allo scopo di riprodurre video flv. [post] [...]
March 27th, 2008 at 3:31 pm
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
March 27th, 2008 at 3:38 pm
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.
March 28th, 2008 at 2:56 pm
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
April 3rd, 2008 at 10:19 am
ciao daniele, era sicuramente un mio problema. Ora tutto ok
Senti io dovrei richiamare dei filmati di una playlist. Come faccio a richimarla?
April 4th, 2008 at 7:37 am
Ciao Elisabetta. Per riprodurre una playlist, devi realizzarla in formato xml, ed indicare questo file al player (prova questo wizard).
April 6th, 2008 at 6:38 pm
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
April 8th, 2008 at 10:32 pm
Ragazzi sto scrivendo un breve tutorial per inserire una playlist, penso di riuscire a pubblicarlo la settimana prossima…
April 14th, 2008 at 10:50 pm
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!
April 15th, 2008 at 10:05 am
[...] 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. [...]
April 15th, 2008 at 1:03 pm
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…
April 16th, 2008 at 12:05 am
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…
April 16th, 2008 at 8:32 am
Ottimo Andy!
May 6th, 2008 at 5:12 pm
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è?
May 6th, 2008 at 7:55 pm
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.
May 16th, 2008 at 12:32 am
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
May 16th, 2008 at 9:36 am
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
May 16th, 2008 at 12:04 pm
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
May 16th, 2008 at 4:32 pm
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
May 16th, 2008 at 4:43 pm
Caro Sergio… non ne ho la minima idea!!! facci sapere
May 19th, 2008 at 11:00 am
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
May 19th, 2008 at 11:00 am
Scuami questo è il cillegamento
http://www.studio99.fm/prova/default.htm
May 19th, 2008 at 7:08 pm
Su Firefox Win e Mac li sento a velocità normale. Non so da cosa possa dipendere…
May 25th, 2008 at 9:30 am
Complimenti per le infomazioni, funziona a dovere
June 4th, 2008 at 4:30 pm
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)
June 7th, 2008 at 11:30 am
@Elisa: ottimo suggerimento… grazie!
June 13th, 2008 at 12:24 pm
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)
June 18th, 2008 at 7:14 pm
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”);
July 13th, 2008 at 5:46 pm
Sono riuscito ad inserire il video, ma vorrei che partisse in automatico non appena si apre la pagina come faccio???? grazie.
July 13th, 2008 at 9:51 pm
ciao salvo,
per far partire il video automaticamente, devi aggiungere il parametro AUTOSTART allo script, in questo modo:
s1.addVariable(“autostart”,”true”);
July 14th, 2008 at 5:02 pm
grazie! Daniele, gentilissimo
July 16th, 2008 at 12:15 am
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….
July 16th, 2008 at 1:10 am
niente ho risolto
July 16th, 2008 at 12:06 pm
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
July 18th, 2008 at 1:43 pm
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
July 18th, 2008 at 2:51 pm
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…
July 26th, 2008 at 1:53 pm
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?
July 28th, 2008 at 5:35 pm
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
October 18th, 2008 at 10:32 pm
Jovanotti ha plagiato la musica di Alejandro Sanz (a primera persona …poi ha plagiato Donatella Rettore
October 26th, 2008 at 2:24 pm
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!
October 27th, 2008 at 11:15 am
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.
November 21st, 2008 at 3:30 pm
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?
January 1st, 2009 at 12:20 am
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
February 16th, 2009 at 11:24 am
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
May 1st, 2009 at 12:12 pm
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.
May 5th, 2009 at 7:09 pm
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
May 8th, 2009 at 11:28 am
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
June 21st, 2009 at 4:30 pm
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!
July 17th, 2009 at 3:20 pm
Ciao Daniele sai dirmi se il player visualizza correttamente anche i filmati in 16:9 e se si cosa si deve fare?
a me i filmati in 16:9 li visualizza in 4:3 chiaramente deformandoli in altezza.
Ti ringrazio anticipatamente
August 7th, 2009 at 11:30 am
Ciao Daniele.
è possibile eliminare il link JWPLAYER che compare in basso a sinistra all’apertura del video?
Grazie
September 27th, 2009 at 6:34 pm
Ciao, come posso inserire un buffer iniziale, per far si che il video non si fermi dopèo qualche secondo? Grazie!!!
December 21st, 2009 at 11:05 am
Ciao Daniele,
pur seguendo le tue istruzioni non riesco a far partire il video su http://www.silviocoiffeur.it
Nel senso che ho impostato tutto come da te descritto, ma quando vado su start il player mi dice “file not found or acces denied…”
Forse il file è troppo pesante (70M)?
Per favore…illuminami.
grazie!
December 21st, 2009 at 11:14 am
Ciao Roberto,
escluderei l’ipotesi del file troppo pesante, visto che l’errore che ritrovi dice un’altra cosa. Il problema è che il player non riesce a “pescare” il file video (.flv).
Per cui verifica che il file esista sul server e che si trovi nella cartella giusta…
oppure specifica il percorso corretto nella variabili che passi al player.
ciao
Daniele
December 22nd, 2009 at 2:57 pm
Ciao Daniele,
grazie della risposta, e complimenti per le guide! raramente se ne trovano così ben spiegate e da persona veramente competente.
Il mio problema l’ho risolto! era colpa del maintainer che aveva chiuso gli accessi ai .flv…dimmi un pò te se è possibile!!! mah!
Visto che ci sono, un’altra domanda come mai il video parte a volte va velocissimo e si normalizza solo se clicco di nuovo su start oppure in mezzo alla barra di scorrimento del tempo??
Grazie ancora di tutto….
Roberto
December 23rd, 2009 at 1:11 am
a me capita che in locale funziona tutto ok, come pubblico la cartella sul sito mi dice mi dice “file not found or acces denied…”
è tutt’oggi che ci lavoro sopra, ho provato a mettere il percorso completo ma la situazione non cambia, cosa può essere, grazie
December 23rd, 2009 at 11:08 am
@roberto per questo aspetto forse vale la pena controllare il bitrate del video (in generale comunque 70 megabyte per un video – flv – di qualche minuto sono troppi)
December 23rd, 2009 at 11:11 am
@aldo – potrebbe essere un problema di permessi sulle cartelle. In questo caso dovresti assegnare almeno i permessi di lettura sulla cartella in cui il file è contenuto.
February 8th, 2010 at 3:53 pm
Salve e complimenti per la guida.
Vorrei, cortesementer sapere, se sia possibile creare un CD/DVD con un flash player incorporato che possa cioè funzionare a prescindere dal fatto che l’utente finale abbia o meno il flash player installato.
Qualora fosse possibile quale sarebbe il codice da usare in una pagina html per usare il visualizzatore stand alone?
Grazie
March 2nd, 2010 at 9:15 pm
questo problema del video in una pagina web mi assillava da tempo e non riuscivo a trovare una soluzione valida. Daniele SEI UN DIO!
Grazie di esistere, ti debbo un favorone!
March 16th, 2010 at 12:38 pm
Ciao Daniele scusa per la mia incompetenza. Ho utilizzato il codice, ma quando faccio il preview del sito vedo una finestra bianca. Come posso risolvere?
Grazie mille,
Massimo
March 16th, 2010 at 1:29 pm
Scusa, sono sempre io. Perché quando cambio qualcosa ne codice mi chiede di reinstallare Flash plaer?
Massimo
March 16th, 2010 at 2:02 pm
Ciao Daniele, le sto provando tutte, ma non riesco a vedere niente.
Questo è il codice che inserisco:
Get the Flash Player to see this player.
var s1 = new SWFObject(“player-viral.swf”,”mediaplayer”,”300″,”170″,”7″);
s1.addVariable(“width”,”300″);
s1.addVariable(“height”,”170″);
s1.addVariable(“file”,”Direttiva Macchine e Marcatura CE (Modulo 2)_1.flv”);
s1.addVariable(‘image’,'preview.jpg’);
s1.write(“container”);
March 16th, 2010 at 2:23 pm
Ciao Daniele,
non considerare i messaggi precedenti. Una volta pubblicata la pagina funziona tutto correttamente. Ora mi accingo con le playlist.
Massimo
June 15th, 2010 at 11:18 pm
Ciao Daniele,
io ho un problemino un po strano… tutto funziona perfettamente ma… ad un certo punto s’interrompe il filmato… a circa un quarto della sua totale lunghezza… cosa posso fare?
Ho controllato il filmato ed è perfetto… vedendolo con un player sul mio computer.
Ciao e grazie!
June 17th, 2010 at 9:39 am
Ciao Daniele
la mia esigenza è quella di far girare il video facendolo partire in automatico e in loop e senza che appaiano i comandi: è possibile?
Grazie
Diego
July 6th, 2010 at 10:06 am
Ciao Daniele,
ho trovato con piacere questi tuoi tutorial, ottimi e ben fatti che ho seguito per implementare dei video nella pagina web.
Ti scrivo per chiederti come mai, nella versione del tuo tutorial non è presente il watermark JWPlayer, mentre quello scaricabile dal sito dell’autore ce l’ha, sono due versioni differenti?
Ti ringrazio e ancora complimenti
Elisa
August 26th, 2010 at 4:34 pm
Ciao,
non gliene vado fuori!
Vorrei inserire un filmato “flv” in modo che si avvii all’arrivo alla pagina principale del sito e che al termine appaia quindi la home; uso front page, ho provato in tutte le maniere ma dopo aver copiato il codice HTML nella pagina, visualizzando l’anteprima vedo solo… IL CODICE!!!
Non nascondo di essere alle primissime armi…
Grazie per la risposta.
Mauro