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