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...

This entry was posted in Tutorial, Webdesigner and tagged , , , . Bookmark the permalink.

7 Responses to Flv in una pagina web con flowplayer

  1. michele says:

    ciao, ho eseguito tutto alla lettera come descritto, quando faccio la prova in locale mi da errore
    gentilmente potresti aiutarmi

    grazie

  2. Nativo says:

    Flowplayer mi sembra fantastico! forse il migliore! Ottimo articolo!

  3. pino says:

    ciao,volevo chiederti e possibile inserire una lista di video xml e poterla riprodurre continuamente.si puo inserire in un sito di joomla?
    e poi volevo chiederle se conosce un player che permette di ripetere continuamente dei file flv da una lista xml.grazie.

  4. Vit says:

    Ciao, bell’articolo.
    Non sono particolarmente esperto nel web, volevo sapere le righe sopra se dovevo sistemarle “a caso” oppure vanno inserite in un preciso punto?

  5. Massimo says:

    Ciao.
    Sono riuscito ad installare in una pagina di prova il player che riproduce un solo video caricato nel sito. Volevo sapere se è possibile fare anche in questo modo:
    player inizialmente riproduce una clip o fermo; cliccando su alcune miniature/anteprime di altri video far partire il player in riproduzione di quella miniatura, come se ci fosse una playlist.
    Ti ringrazio in anticipo per una tua cortese risposta di aiuto.

  6. silvia says:

    Ciao e complimenti per l’articolo ho risolto tanti dei miei problemi legati a questo player :)

  7. umberto says:

    Mi potete aiutare a mettere il FlowPlayer nel sito? il codice è questo:
    sbaglio qualcosa?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>