Visualizzare una playlist di video Flv in una pagina Html
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.
Fatta questa dovuta premessa possiamo cominciare…
Sappiamo come specificare al player il file flv da riprodurre, usando questa riga di codice:
s1.addVariable("file","nomedelfile.flv");Se vogliamo vogliamo che il player, anzichè visualizzare un singolo video, riproduca una playlist di filmati flv, potremo semplicemente specificare il file XML che la contiene, al posto del file .FLV.
s1.addVariable("file","playlist.xml");Rispetto agli altri parametri, come ad esempio il colore di sfondo del player, opzione fullscreen, ecc., resta valido quanto spiegato nell’altro tutorial. Bisognerà tuttavia fare attenzione a certi parametri aggiuntivi dovuti al fatto che verrà riprodotta una playlist. Specificheremo l’altezza effettiva del video: il player swf dovrà infatti contenere quest’ultimo più uno spazio dedicato alle altre tracce della playlist. Disabiliteremo la riproduzione casuale, e faremo il modo che le dimensioni del filmato si adattino al player mantenendo invariate le proporzioni. Attiveremo infine le thumbnail (quindi nella playlist dovremo speficare anche il percorso delle relative immagini).
s1.addVariable("displayheight","225");
s1.addVariable("shuffle","false");
s1.addVariable("overstretch","true");
s1.addVariable("thumbsinplaylist","true");Il codice per pubblicare la nostra playlist, ammesso che SWFObject.js (ricordiamoci di richiamarlo nell’html), il file mediaplayer.swf, e il file XML si trovino nella stessa directory della pagina html, sarebbe quindi il seguente:
<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="js/swfobject.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("swf/mediaplayer.swf","mediaplayer","320","350","7");
s1.addVariable("width","320");
s1.addVariable("height","350");
s1.addVariable("file","xml/playlist.xml");
s1.addVariable("displayheight","225");
s1.addVariable("overstretch","fit");
s1.addVariable("shuffle","false");
s1.addVariable("thumbsinplaylist","true");
s1.write("container");
</script>È dunque necessario prepare un file XML con la playlist. Vediamo come costruire questo file. Bastera un editor di testo qualsiasi, come blocco note o textedit.
Nome dell'autoere
percorsodelfilevideo.flv
<img alt="" />eventualeimmaginethumb.jpg
Nome dell'autore 2
percorsodelfilevideo2.flv
<img alt="" />eventualeimmaginethumb2.jpgÈ chiaro che ogni traccia della playlist corrisponde ad un elemento nel file XML.
All’interno dell’elemento poi specificheremo di volta in volta titolo, autore, il nome ed il percorso del file flv, e infine la thumbnail da visualizzare nel player.
Mi raccomando ai percorsi dei file: se pensate di aver fatto tutto per bene, e comunque i video non si vedono è possibile che abbiate sbagliato il percorso dei file richiamati nella playlist… ricordate che il percorso è relativo al file SWF!
(Ma, stranamente, per le immagini il percorso è relativa alla posione del file hmtl).
Se ancora non è tutto chiarissimo, niente paura, come al solito ho preparato l’esempio.
April 16th, 2008 at 8:22 pm
ciao dani. sto cercando siti dove posso trovare plugin per color correction free. o cmq programmi per color video free. cmq mi servono plugin.?
inoltre hai mai visto http://www.videocopilot.com?
June 17th, 2008 at 12:58 am
Ciao Daniele molto bello ed interessante…ti volevo chiedere una cosa…..è possibile mandare in play tutti i video senza selezionarli uno dietro l’altro in automatico……grazie.
July 3rd, 2008 at 6:22 pm
Cia Daniele, interessanti i tuoi consigli, ma purtroppo non sono riuscito a realizzare a pieno la playlist. Vedo i filmati ma non visualizzo la la playlist. Il player vicino al pulsante di avvio/stop in basso a sinistra possiede anche due pulsanti (frecce) avanti e indietro. Con quelle riesco a pasare al filmato successivo o al precedente ma della playlist manco l’ombra. Noto che nel tuo script viene richiamato il file mediaplayer.swf ma dal sito dell’autore da te indicato scarico il file player.swf. Dipenderà da quello? Puoi darmi una mano per favore eventualmente inviandomi il tuo file mediaplayer.swf. Grazie di cuore
July 14th, 2008 at 6:46 pm
Ciao Dani, acnhe io sono riuscito a fare “IN PARTE LA PLAYLIST” cioe non mi si vede la play list dove e possibile scegliere i video ma i vari filmai mi si vedono in un singolo player consecutivamente e come se avrei unito tutti i filmati in un solo… Come fare????
July 16th, 2008 at 1:11 am
Ho un altro problema… non mi si vedono le thumbnails e relativo testo…perchè? Ho copiato giusto…
October 18th, 2008 at 1:54 pm
Non capisco come fare per poter avviare i video da qualsiasi posizione senza dover aspettare che venga tutto scaricato, se sposto la progress bar in una posizione che non è stata ancora scaricata il player non me lo fa vedere
October 18th, 2008 at 1:59 pm
Ciao Gossip,
sono abbastanza ceerto che quest funzione non sia supportata dal jwplayer…
iè una feature importante, vedro di trovare qualcosa nei prossimi giorni.
October 19th, 2008 at 7:40 pm
Altra cosa che non sono riuscito a capire è se c’è un modo, per i video hostati su megavideo, per risalire dal link del tipo:
http://www.megavideo.com/?v=38V973Q8
al url sorgente:
http://www05.megavideo.com/files/0e8125fef7351d694042087be249bb35/
…direttamente tramite player. Manualmente è abbastanza semplice, basta uno sniffer per protocollo http o l’estenzione per firefox (downloadhelper), il problema è che saltuariamente i link al url sorgente cambiano ed il player non trova + la fonte, quindi sono costretto ad aggiornare tutti i link manualmente nella playlist…
November 14th, 2008 at 6:43 pm
non mi si vedono le thumbsnail, e nn capisco come mai.
lo spazio prima del titolo c’è ma è vuoto…
November 15th, 2008 at 2:19 pm
@kob4yashi: potrebbe essere un problema di percorso dell’immagine nell’Xml. Considera che il percorso che inserisci nell’xml deve essere relativo alla posizione del file swf.
January 3rd, 2009 at 5:46 pm
Ciao Daniele… spero che risponderai anche se l’articolo è di aprile!!! Volevo sapere come mettere la playlist a destra? Grazie comunque per il tutorial!
February 4th, 2009 at 8:16 pm
caro dniele volevo sapere come si mettono i thumbnail in un video; mi escono i fotogrammi tutti neri
March 3rd, 2009 at 12:43 am
scusate ma riesco a creare la playlist, ma e’ normale che il player non passi direttamente al filmato successivo?? e’ possibile fare un loop di tutta la playlist completa senza dover premere avanti?
March 21st, 2009 at 6:16 pm
Ciao, anch’io come Alessandro avrei bisogno di sapere se c’è un modo per visualizzare la playlist a destra (please, please, please…).
In ogni caso ti ringrazio per il tutorial, funziona alla grande, complimenti sinceri!
March 21st, 2009 at 6:19 pm
Ovviamente per destra intendo lateralmente al video e non sovrapposto ad esso, dunque a destra, sinitra, sotto, sopra… purchè al di fuori
March 25th, 2009 at 5:49 pm
Ciao ragazzi,
è possibile specificare nella playlist l’orario di inizio dei video, quindi creare un palinsesto che “legge” l’orario di messa in onda dei filmati?
April 14th, 2009 at 12:42 am
ciao Daniele sono riuscito a creare perfettamente la play list seguendo la tua guida.
Ora volevo implementare la pagina con un upload in modo da garantire a dei miei amici registrati di fare upload dei loro video sul mio sito e fin qua nessun problema. Ma come fare in modo che il file XML contenente le informazioni neccessari per consentire la visualizzazione dei video nel player si aggiorni automaticamente non appena il video a stato uplodato sul sito?
April 16th, 2009 at 9:38 pm
un altra domanda, o creato la playlist ma ce il modo di vedere i video in schermo pieno. magari un pulsantino sul player. Grazie
April 17th, 2009 at 5:04 pm
Ciao Daniele,
sono arrivato al tuo blog perchè da un paio di settimane sono alle prese con questo ottimo, devo dire, player e ho condiviso la maggior parte dei dubbi e dei problemi che hanno avuto gli utenti che mi hanno preceduto nelle varie risposte.
Per quanto riguarda la visualizzazione di player, dei file e (parzialmente) della playlist non ho problema.
L’unica cosa che mi lascia perplesso è questa:
ho creato una playlist in .xml che riporto qui sotto
nome dell’autore
titolo del video
percorso\video.flv
nome dell’autore
titolo del video
percorso\video.flv
il problema è che viene visualizzato solo il titolo del video e non l’autore che è ‘piazzato’ sulla riga superiore. Come mai?
Grazie anticipatamente per la risposta.
April 18th, 2009 at 12:27 am
Daniele o necessita di vedere i video in fullscreen, mi puoi aiutare per favore, o creato la playlisti ma non ce modo di vedere i video a schermo intero che devo fare? Grazie ancora
April 19th, 2009 at 10:58 pm
Ciao Salvo,
per il fulscreen prova ad aggiungere:
s1.addParam(“allowfullscreen”,”true”);
tra i parametri che passi al player.
dovrebbe funzionare
April 19th, 2009 at 11:00 pm
Michelangelo, mi sembra strano… se segui l’esempio dovrebbe essere visualizzato tutto correttamente. Sei sicuro di aver scritto correttamente il file XML?
April 20th, 2009 at 11:56 am
Ti chiedo scusa, ma nella fretta non ho scritto il codice completo, che riporto qui sotto (mi sembra che sia tutto in regola, a meno che non debba intervenire sulle dimensioni del riquadro della playlist)
nome dell’autore
titolo del video
percorso\video.flv
nome dell’autore
titolo del video
percorso\video.flv
April 20th, 2009 at 12:05 pm
Michelangelo non puoi postare xml nei commenti (non vengono visualizzati i tag), magar metti il link alla playlist, se è on-line..
April 20th, 2009 at 2:11 pm
hai ragione scusa!
April 20th, 2009 at 2:32 pm
L’ho messo qui (spero vada bene)
http://michelangelo.altervista.org/pagine/playlist.xml
April 22nd, 2009 at 11:43 pm
Daniele i parametri s1.addParam(”allowfullscreen”,”true”);
li avevo gia aggiunti ma niente. Cmq anche nel tuo esempio non va in full screen. Aiutami ne o urgente bisogno Grazie
April 23rd, 2009 at 8:49 pm
ok daniele o risolto il fullscreen ma ora mi serve che il player esegua in automatico tutti i video presenti nella playlist, senza dover selezionarlo uno per uno. Ti ringrazio se risolvo questo giuro che non ti ropero piu le scatole. Grazie
April 29th, 2009 at 11:40 am
Questo tutorial è magnifico grazie!!!
Ho pero’ un problema ..ho letto che anche altri come me non sono riusciti a visualizzare la playlist…
Cosa ho sbagliato? Grazie per la tua risposta!
Saluti!!!
April 29th, 2009 at 4:24 pm
Ciao Daniele, anche io come Domenico ho la assoluta necessità di fare in modo che i video flv contenuti nella playlist partano all’orario giusto.
Quindi vorrei sapere se è possibile specificare nella playlist l’orario di inizio dei video, in modo che i filmati vadano all’orario previsto, proprio come accade per una normale trasmissione tv. E quale potrebbe essere il codice da inserire nel player?
Rispondi plaese!
Grazie Nick
May 2nd, 2009 at 9:27 am
Ho risolto grazie!
Il problema era con mediaplayer.swf.
Ora compare la playlist…
June 23rd, 2009 at 10:57 am
Ciao Daniele
Ho lo stesso problema di Rinaldo :”Vedo i filmati ma non visualizzo la la playlist. Il player vicino al pulsante di avvio/stop in basso a sinistra possiede anche due pulsanti (frecce) avanti e indietro. Con quelle riesco a pasare al filmato successivo o al precedente ma della playlist manco l’ombra”
Ho provato a ricontrollare il percorso delle immagini ed è corretto, anche perchè prima di cliccare play, viene visualizzata l’immagine desiderata.
Cortesemente potresti dirmi qual è il problema
grazie
June 25th, 2009 at 10:18 pm
Ciao Daniele
Ho lo stesso problema di Rinaldo :”Vedo i filmati ma non visualizzo la la playlist. Il player vicino al pulsante di avvio/stop in basso a sinistra possiede anche due pulsanti (frecce) avanti e indietro. Con quelle riesco a pasare al filmato successivo o al precedente ma della playlist manco l’ombra”
Ho provato a ricontrollare il percorso delle immagini ed è corretto, anche perchè prima di cliccare play, viene visualizzata l’immagine desiderata.
Cortesemente potresti dirmi qual è il problema
grazie
June 25th, 2009 at 10:36 pm
Daniele ciao. Dunque il problema persiste però ti volevo porre alla tua attenzione il sguente codice :
var s1 = new SWFObject(‘player-viral.swf’,'mediaplayer-viral’,'330′,’250′,’10′);
A differenza del tuo Tutorial visualizzo il player solo richiamandolo come player-viral . Trattasi di una versione nuova rispetto al tuo tutorial.? Forse per questo che non vedo la playlist ?
Grazie
August 5th, 2009 at 3:55 pm
Domandona… ma questa playlist permette di far partire un video in automatico appena finisce il precedente? Perchè a me serivrebbe proprio questa opzione… finisce il primo video e parte il secondo, finisce il secondo e parte il terzo… e così via, tutto in automatico.
Ditemi che si può fare!!! E ditemi come!!!
Sono davvero disperata !!
Mettendo l’autostart a “true” ottengo solo che parta il primo in automatico, ma quando finisce, il secondo non parte! Come posso fare?
Grazie mille a chiunque mi saprà aiutare!!
E grazie mille a JD!!!!
August 5th, 2009 at 3:56 pm
Ciao a tutti. Sto utilizzando questo bellissimo script e funziona bene. Ho solo un problema: ho impostato la riga
s1.addVariable(“autostart”,”true”);
e infatti appena apro la pagina il primo video in playlist parte.
Ho la necessità di far partire in automatico anche il secondo e il terzo e così via in seguito alla fine del video precedente.
Come si può realizzare questa modifica?
Grazie a tutti.
August 5th, 2009 at 4:32 pm
Rieccomi! hihi! Io e il mio socio senza saperlo stavamo scrivendo la stessa domanda nello stesso momento!
Beh, poco male… nel frettempo abbiamo risolto, riporto perchè può essere magari utile ad altri:
s1.addVariable(“repeat”,”always”);
è questo il parametro che permette di far partire un video non appena si conclude il precedente ^_^
December 18th, 2009 at 3:45 pm
Ciao Daniele,
innanzitutto grazie per le tue pillole di saggezza…
sto imparando tutta una serie di cose a me poco più che sconosciute.
Ho un problema relativo all’inserimento di un .flv nel sito sopra cioè http://www.silviocoiffeur.it
penso di aver fatto tutto come da te descritto con viral…caricato il file sul server, puntato ect, ect…ma nonostante tutto mi da “file not found o access denied”…premetto che uso dreamweaver CS3 (non so se può servire)
Mi faresti cosa grata se riuscissi a risolvere questo problema che mi semplificherebbe tutta una serie di problemi futuri? Ho paura che il file pesi troppo (70M circa…)