Attenzione, questo post è datato, la libreria Unobtrusive Flash Objects (UFO) è obsoleta. Per inserire correttamente flash in una pagina html, adesso puoi usare SWFObject: clicca qui per visualizzare i relativi post.

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

This entry was posted in Tutorial, Webdesigner and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

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

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

  2. Roberto says:

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

  3. Marco says:

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

  4. 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!

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

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

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

  8. 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)

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

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

  11. 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!

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

  13. Massimo says:

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

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

  15. Massimo says:

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

  16. 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!

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

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

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

  20. carmelo says:

    ciao,
    vorrei farti i complimenti per la chiarezza dell’esposizione che riesce a far capire persino a un ignorante come me come si inserisce un video
    volevo farti una domanda
    ho visto dei video player
    http://it.sevenload.com/video/49m0b5f-Roberto-Bolano-Entrevista

    che hanno il “segnatempo” consentono cioè di suddividere il filmato in varie sezioni

    è una cosa difficle da fare?
    grazie

  21. dfgdf says:

    asdfasd</b
    wsdwsd

  22. dfgdf says:

    sdfsd

    ciao

  23. davide says:

    buongiorno,
    scusami Daniele ho questo codice generato da Dreamw e tutto funziona solo che vorrei mettere l’anteprima dell’animazione e il loop dei filmati come faccio?


    <!–

    Content on this page requires a newer version of Adobe Flash Player.

    <!–

  24. ho capito come inserire un file flv nella pagina e funziona, ma non ho capito dove e cosa esattamente devo modificare per inserire nella stessa pagina più filmati flv… si può avere un esempio?

  25. kri says:

    a me appare solo la scritta “to see this player” e se clicco li mi apre la pagina di adobe quale potrebbe essere il problema??

  26. Pino Alette says:

    Ciao Daniele, intanto grazie. Ci sono cose molto interessanti nella pagina.

    Dove trovo informazioni per creare inserire dinamicamente dei messaggi pubblicitari prima dell’avvio del video vero e proprio?

    Grazie

  27. Johnk62 says:

    I really like your writing style, good information, thankyou for posting D. kdbedaddeeed

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>