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.

I video che vediamo sulle piattaforme di video sharing, e che troviamo nella maggior parte dei siti web, sono video in formato FLV.
FLV è un formato proprietario Adobe, ed è di fatto lo standard per la distribuzione dei video sul web.
Per poter inserire questo tipo di video all’interno di una pagina web è necessario un player SWF.
SWF è il formato dei video interattivi prodotti utilizzando Adobe Flash. In questo caso la tecnologia SWF serve a creare un contenitore in grado di riprodurre e controllare il flusso video FLV. Per creare un player quini per video FLV è necessario utilizzare Adobe Flash, mentre in rete non mancano anche player già pronti ed open source.

La visualizzazione del filmato FLV su un qualsiasi browser dipende quindi innanzitutto dalla possibilità di visualiizare il player SWF. Per poter visualizzare un qualsiasi file SWF su un browser, è necessario che sia installato il plugin Flash Player di Adobe. A seconda della versione di Flash utilizzata per creare il filmato SWF e delle caratteristiche del file, è necessario aver installato una versione più o meno recente del (plugin) Flash Player.

Ricapitolando: il video (FLV) viene riprodotto da un player (SWF) all’interno di un browser in cui è installato il giusto plugin (Adobe Flash player). Ma non è finita.

Il video FLV è un flusso di informazioni ovviamente codificate. La codifica originaria dei video FLV era una variante di H.263, realizzata da Sorenson. Da qualche mese i video FLV possono essere codificati anche con la potente H.264 (mpeg-4 parte 2). Quindi è possibile trovare file FLV codificati in maniera diversa. Si tratta di una differenza non da poco: incide ovviamente sulla qualità e sul bitrate del video da riprodurre, ma anche sui requisiti di sistema necessari a riprodurre il video. Se la codifica Sorenson è supportata da flash player a partire dalla versione 6, la codifica H.264 è supportata solo nelle ultime release della versione 9.

In rete quindi, oltre alle applicazioni desktop per riprodurre i video offline, possiamo trovare:

• Player swf realizzati allo scopo di riprodurre video flv. [post]
• Script per una corretta visualizzazione dei filmati Swf. [Post qui e qui]
• E infine encoder per convertire video in altri formati proprio in FLV [post].

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