Christian Castelli
a- a+

Player FLV open source: inserire video flv in un sito web

Player FLV open source: inserire video flv in un sito web gratis

Sembra esserci molta confusione riguardo al codice necessario per inserire correttamente degli oggetti Flash in una pagina web (ove per oggetti intendiamo qualsiasi contenuto multimediale, ossia un video, una presentazione, un'animazione e via discorrendo) . L'ascesa dei social network come Myspace (che filtra molti tag) hanno aggiunto ulteriore confusione alla questione. In questo tutorial, vedremo le opzioni migliori per includere oggetti Flash nei vostri siti web.

Il tag embed e la semplice inclusione di un oggetto SWF

Partiamo dalla modalità più semplice per inserire oggetti Flash in un sito attraverso il tag embed e i suoi attributi. In questo contesto assumeremo di avere un file denominato mediaplayer.swf che si troverà nella stessa directory della pagina HTML che conterrà il seguente codice per includerlo:

<embed 
       src="mediaplayer.swf" 
       width="300" height="300"
       allowscriptaccess="always" 
       allowfullscreen="true"  
/>

Di questi parametri, il più importante è src: questo contiene il percorso al file SWF da includere (in questo caso mediaplayer.swf). Se tale file risiede in un'altra directory, dovremo inserire il suo percorso relativo (ad esempio. ../flash/mediaplayer.swf) o il suo percorso assoluto (ad esempio http://www.myserver.com/flash/mediaplayer.swf).

I parametri width e height riguardano rispettivamente la larghezza e l'altezza dell'oggetto SWF espressi in pixel, ma i loro valori possono anche essere espressi in percentuale del contenitore SWF (ad esempio: width="100%").

Infine i parametri allowscriptaccess e allowfullscreen dicono rispettivamente al browser che l'oggetto SWF può comunicare con script esterni (e puntare a pagine esterne da quella di inclusione dell'oggetto) e usare la modalità a schermo intero. Se non volete permettere queste azioni, è sufficiente rimuovere entrambi i parametri dal momento che i loro valori di default sono rispettivamente sameDomain e false.


Ulteriori parametri

Il codice presentato al punto precedente utilizza solo 4 dei parametri disponibili. Potete visualizzare una lista completa dei parametri utilizzabili sul sito di Adobe. Ora osserviamo alcuni dei più interessanti:

  1. bgcolor (#rrggbb): setta il colore di sfondo per l'oggetto SWF utilizzando il valore esadecimale del colore in termini di componenti RGB;
  2. flashvars (variabili): le variabili messe qui verranno caricate nell'SWF;
  3. menu (true, false): se viene settato a false, viene nascosto il menu contestuale che si presenta cliccando con il tasto destro del mouse sull'SWF;
  4. wmode (opaque, transparent, window): parametri per settare la trasparenza, la proprietà di z-index e il flickering.


Flashvars

Dei parametri appena presentati, il più interessante è flashvars, che permette di inviare all'SWF delle variabili inizializzate. FLV Media Player e Image Rotator supportano una gran quantità di queste variabili, rendendole semplici e personalizzabili. Vediamo un esempio in cui utilizziamo tre variabili per l'oggetto mediaplayer.swf: una per indicare la playlist, una per il colore dello sfondo e una per indicare se far partire automaticamente la canzone:

<embed     
     src="mediaplayer.swf"
    width="300"
    height="300"
    allowscriptaccess="always"
    allowfullscreen="true"
    flashvars="file=playlist.xml&backcolor=0x000000&autostart=true"
/>

Come potete vedere, tali variabili vengono inserite in una singola stringa come coppie chiave-valore separate dalla "e" commerciale. Non vi è limite al numero di variabili inseribili nelcodice.


Problematiche per flashvars

Ci sono tre problematiche relazionate al parametro flashvars che causano spesso il mancato caricamento delle variabili. Il primo riguarda il percorso relativo dei files. Quando si indica il percorso di un MP3, di un'immagine o di un file XML, si dovrebbe sempre partire dalla posizione del file HTML che contiene l'oggetto SWF. Per cui, negli esempi precedenti, se il file SWF è posizionato in una sottodirectory, la variabile che punta alla playlist dovrebbe rimanere file=playlist.xml e non file=../playlist.xml! Vi è un'eccezione: il percorso ai file FLV dovrebbe essere fornito relativamente alla posizione del file SWF. Per non confondersi, è sempre possibile usare percorsi assoluti per localizzare le risorse (includendo la parte http://www).

La seconda problematica riguarda l'importazione di file XML. A causa di restrizioni di sicurezza, Flash può importare solo file XML che risiedono nello stesso dominio del file SWF. Per cui, nell'esempio del nostro mediaplayer, se l'oggetto SWF si trova in www.myserver.com, il file playlist.xml dovrebbe anch'esso risiedere in www.myserver.com. Un modo per ovviare a questa limitazione è usare un file crossdomain.xml, che dovrebbe essere installato nella root del sito che contiene il file XML (qui quello per YouTube).

La terza problematica riguarda i simboli ?, =e &. Dal momento che questi vengono usati per separare e legare le coppie chiave-valore, non possono essere usati nelle stesse variabili. Per risolvere il problema è necessario effettuare l 'escaping di questi caratteri. Per fare ciò, è sufficiente rimpiazzare tali simboli con le loro stringhe escaped e dopo effettuare l'azione inversa nell'SWF:

  1. ? ? %3F
  2. = ? %3D
  3. & ? %26


Eolas, XHTML & javascript

Nel 2005 emerse un problema di embedding dopo che una compagnia denominata Eolas intentò e vinse una causa contro Microsoft. Eolas riuscì ad avere il brevetto sull'inclusione automatica di applicazioni esterne (come Flash) nelle pagine web. Come risultato, Microsoft aggiornò Internet Explorer: quando si passa il mouse sopra un oggetto SWF vedrete apparire un bordo grigio. Prima di interagire con l'oggetto, sarà necessario cliccarlo una volta per attivarlo. Un secondo problema riguardail fatto che <embed> non è un tag XHTML valido. Per cui, chi vuole sviluppare siti web accessibili e conformi agli standard W3C non può usarlo.

Una soluzione ad entrambi i problemi consiste nell'uso di javascript per includere contenuto Flash. Dopo che una pagina è stata caricata è possibile inserire il tag <embed> con del codice javascript, aggirando sia le problematiche legali viste prima sia i problemi legati alla validità del codice. Inoltre tramite javascript è possibile controllare se il browser possiede il plugin Flash corretto, altrimenti è possibile caricare del contenuto alternativo.


SWFObject

Un codice javascript molto utile e gratuito per includere oggetti SWF è SWFObject di Geoff Stearns. Viene usato in ogni tipologia di sito ogniqualvolta c'è un file SWF da includere in una pagina web. Per usarlo, dovete innanzitutto eseguire l'upload di swfobject.js sul vostro server e includerlo nell'header delle vostre pagine web in questo modo:

<script type="text/javascript" src="swfobject.js"></script>

Poi, conferite un indetificativo unico all'elemento che deve contenere l'oggetto SWF:

<div id="flashbanner">Questo spazio conterrà l'oggetto SWF</div>

In ultima battuta, istanziate un oggetto SWFObject al di sotto dell'elemento HTML che conterrà l'oggetto SWF e specificate lì dentro tutti i parametri necessari (per una lista completa, consultate il sito ufficiale):

<script type="text/javascript">
    var so = new SWFObject('mp3player.swf','mpl','300','250','7');
    so.addParam('allowfullscreen','true');
    so.addVariable('file','playlist.xml');
    so.addVariable('backcolor','0x000000');
    so.addVariable('autostart','true');
    so.write('flashbanner');  
</script>

L'istanza dell'oggetto SWFObject creerà il codice necessario per includere mp3player.swf. In questo caso le dimensioni sono state settate a 300 x 250 pixel e sono state impostate alcune variabili flashvars (file, backcolor e autostart). Infine, l'istanza dell'oggetto include il contenuto Flash nell'elemento specificato, senza più bordi grigi e problemi di validità del codice.



Ti potrebbe interessare anche

commenta la notizia

Ci sono 2 commenti
irene89
ti ho seguito fino a metà. ma io uso komposer per creare pagine web. come scrivo il codice html per vedere il video flv o swf su internet?

grazie