Feed RSS

Inserire un video in formato flv all’interno di una pagina html

Posted by daniele on 03.03.08

player flv JW

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.

Ecco un esempio.

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

69 comments to “Inserire un video in formato flv all’interno di una pagina html”

  1. Elisabetta Says:

    Ciao, non riesco ad aprire il file .zip, mi da errore

  2. daniele Says:

    Ciao Elisabetta, è molto strano perchè il link punta direttamente al zip originale dell’autore, scaricato da un sacco di gente!

  3. Filmati Flash SWF e video in formato FLV: una panoramica | daniele rollo Says:

    [...] Player swf realizzati allo scopo di riprodurre video flv. [post] [...]

  4. Enrico Says:

    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

  5. daniele Says:

    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.

  6. Enrico Says:

    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

  7. Elisabetta Says:

    ciao daniele, era sicuramente un mio problema. Ora tutto ok

    Senti io dovrei richiamare dei filmati di una playlist. Come faccio a richimarla?

  8. daniele Says:

    Ciao Elisabetta. Per riprodurre una playlist, devi realizzarla in formato xml, ed indicare questo file al player (prova questo wizard).

  9. alessandro Says:

    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

  10. daniele Says:

    Ragazzi sto scrivendo un breve tutorial per inserire una playlist, penso di riuscire a pubblicarlo la settimana prossima…

  11. Andy Says:

    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!

  12. Inserire una playlist di video Flv in una pagina Html | daniele rollo Says:

    [...] 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. [...]

  13. daniele Says:

    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…

  14. Andy Says:

    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…

  15. daniele Says:

    Ottimo Andy!

  16. Fabrizio Says:

    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è?

  17. daniele Says:

    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.

  18. Sergio Says:

    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

  19. daniele Says:

    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

  20. Anonymous Says:

    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

  21. Sergio Says:

    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

  22. daniele Says:

    Caro Sergio… non ne ho la minima idea!!! facci sapere :)

  23. Sergio Says:

    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

  24. Sergio Says:

    Scuami questo è il cillegamento
    http://www.studio99.fm/prova/default.htm

  25. daniele Says:

    Su Firefox Win e Mac li sento a velocità normale. Non so da cosa possa dipendere…

  26. Franco Says:

    Complimenti per le infomazioni, funziona a dovere

  27. elisa Says:

    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)

  28. daniele Says:

    @Elisa: ottimo suggerimento… grazie!

  29. Fonzie Says:

    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)

  30. Guido Says:

    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”);

  31. Salvo Says:

    Sono riuscito ad inserire il video, ma vorrei che partisse in automatico non appena si apre la pagina come faccio???? grazie.

  32. daniele Says:

    ciao salvo,
    per far partire il video automaticamente, devi aggiungere il parametro AUTOSTART allo script, in questo modo:

    s1.addVariable(“autostart”,”true”);

  33. Salvo Says:

    grazie! Daniele, gentilissimo

  34. renegade Says:

    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….

  35. renegade Says:

    niente ho risolto

  36. Ricky Says:

    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

  37. Fabio Says:

    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

  38. daniele Says:

    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…

  39. Angy Says:

    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?

  40. giuseppe Says:

    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

  41. Jovanotti PLagia Says:

    Jovanotti ha plagiato la musica di Alejandro Sanz (a primera persona …poi ha plagiato Donatella Rettore

  42. Robertino Says:

    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! :D

  43. daniele Says:

    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.

  44. roberto Says:

    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?

  45. Massimo Says:

    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

  46. GIOdeMaggio Says:

    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

  47. Matteo Says:

    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.

  48. michela Says:

    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

  49. Pictor Says:

    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 :-)

  50. morgan Says:

    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!

  51. danyel Says:

    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

  52. Roberto Says:

    Ciao Daniele.
    è possibile eliminare il link JWPLAYER che compare in basso a sinistra all’apertura del video?
    Grazie

  53. Marco Says:

    Ciao, come posso inserire un buffer iniziale, per far si che il video non si fermi dopèo qualche secondo? Grazie!!!

  54. roberto Says:

    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!

  55. daniele Says:

    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

  56. roberto Says:

    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

  57. Aldo Says:

    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

  58. daniele Says:

    @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)

  59. daniele Says:

    @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.

  60. leonello Says:

    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

  61. Matteo Says:

    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!

  62. Massimo Says:

    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

  63. Massimo Says:

    Scusa, sono sempre io. Perché quando cambio qualcosa ne codice mi chiede di reinstallare Flash plaer?
    Massimo

  64. Massimo Says:

    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”);

  65. Massimo Says:

    Ciao Daniele,
    non considerare i messaggi precedenti. Una volta pubblicata la pagina funziona tutto correttamente. Ora mi accingo con le playlist.
    Massimo

  66. Paolo Says:

    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!

  67. Diego Says:

    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

  68. elisa Says:

    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

  69. Mauro Says:

    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

Leave a Reply