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:

<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","350","250","7");
	s1.addVariable("width","320");
	s1.addVariable("height","350");
        s1.addVariable("displayheight","240");
	s1.addVariable("file","NOMEDELFILE-playlist.XML");
	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.

<playlist version="1">

<trackList>

<track>
<title>Titolo della traccia</title>
<creator>Nome dell'autoere</creator>
<location>percorsodelfilevideo.flv</location>
<image>eventualeimmaginethumb.jpg</image>
</track>

<track>
<title>Titolo della traccia 2</title>
<creator>Nome dell'autore 2</creator>
<location>percorsodelfilevideo2.flv</location>
<image>eventualeimmaginethumb2.jpg</image>
</track>

</trackList>
</playlist>

È chiaro che ogni traccia della playlist corrisponde ad un elemento <track> 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.

http://home5.inet.tele.dk/nyboe/flash/mediaplayer/index.htm