Flv in una pagina web con flowplayer

Abbiamo già visto in passato come inserire un video in formato FLV in una pagina Html, utilizzando javascript ed il player flash di Jeroen Wijering. In particolare avevamo visto come l’utilizzo di script come SWFobject, o UFO, fosse necessario per evitare importanti problemi di accessibilità legati all’embedding di un file SFW nella pagina html.

In questo tutorial scopriremo una nuova risorsa per riprodurre un file flv nel nostro sito utilizzando: FLOWplayer, ma la logica che seguiremo per embeddare il player sarà la solita: utilizzeremo javascript e il DOM per inserire il player swf all’interno di un elemento della pagina; il player quindi riprodurrà il video flv. Il risultato sarà simile a questa demo.


Sia il player, sia la libreria javascript sono contenute nel pacchetto d’istallazione di Flowplayer che possiamo scaricare qui. Sul sito di Flowplayer troveremo tre possibili download, e tre possibili licenze, a seconda dell’uso che abbiamo in mente per il player (per un utilizzo commerciale, flowplayer è a pagamento).

L’installazione base del player prevede tre step.
Innanzitutto è necessario includere lo script nella pagina:

<script type="text/javascript" src="flowplayer-3.0.0-rc3.min.js"></script>

Quindi è necessario impostare l’elmento della pagina html che verrà sostituito con il player. Il funzionamento dello script ci permette di specificare semplicemente un link diretto al file FLV al quale, perchè javascript e il DOM funzionino, è necessario assegnare un ID. Chiaramente, lo stile (nel quale in particolare vengono specificate le dimensione del player) può essere assegnato anche con un css esterno.

<a  	 href="video.flv"  
	 style="display:block;width:400px;height:300px"  
	 id="player"> 
</a>

A questo punto richiamiamo la funzione javascript flowplayer, specificando due parametri: l’ID del link da sotituire, ed il nome del file swf da utilizzare come player:

<script>
	flowplayer("player", "flowplayer-3.0.0-rc3.swf");
</script>

Questo è quanto, se è tutto corretto e javascript è attivato, il player dovrebbe funzionare a dovere, proprio come si vede nella demo.

Quella che abbiamo appena visto insieme è l'implementazione minima di Flowplayer (come è documentata anche sul sito di FP). Nei prossimi post vedremo in che modo customizzare il player, e capiremo come sfruttare a pieno lo script per far sì che il video sia comunque accessibile. Ottimi motivi per iscriversi al feed rss di danielerollo.com: stay tuned...