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 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
Ciao Daniele.
è possibile eliminare il link JWPLAYER che compare in basso a sinistra all’apertura del video?
Grazie
Ciao, come posso inserire un buffer iniziale, per far si che il video non si fermi dopèo qualche secondo? Grazie!!!
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!
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
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
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
@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)
@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.
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
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!
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
Scusa, sono sempre io. Perché quando cambio qualcosa ne codice mi chiede di reinstallare Flash plaer?
Massimo
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”);
Ciao Daniele,
non considerare i messaggi precedenti. Una volta pubblicata la pagina funziona tutto correttamente. Ora mi accingo con le playlist.
Massimo
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!
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
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
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
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
asdfasd</b
wsdwsd
sdfsd
ciao
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.
<!–