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 webgratis

Sembra esserci molta confusione riguardo al codice necessarioper inserire correttamente degli oggetti Flash in una paginaweb (ove per oggetti intendiamo qualsiasi contenutomultimediale, ossia un video, una presentazione,un'animazione e via discorrendo) . L'ascesa deisocial network come Myspace (che filtra molti tag) hannoaggiunto ulteriore confusione alla questione. In questotutorial, vedremo le opzioni migliori per includere oggettiFlash nei vostri siti web.

Il tag embed e la semplice inclusione di un oggetto SWF

Partiamo dalla modalità più semplice perinserire oggetti Flash in un sito attraverso il tagembed e i suoi attributi. In questo contestoassumeremo di avere un file denominato mediaplayer.swf che sitroverà nella stessa directory della pagina HTML checonterrà 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 daincludere (in questo caso mediaplayer.swf). Se talefile risiede in un'altra directory, dovremo inserire ilsuo percorso relativo (ad esempio.../flash/mediaplayer.swf) o il suo percorso assoluto(ad esempiohttp://www.myserver.com/flash/mediaplayer.swf).

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

Infine i parametri allowscriptaccess eallowfullscreen dicono rispettivamente al browserche l'oggetto SWF può comunicare con script esterni (e puntarea pagine esterne da quella di inclusione dell'oggetto) eusare la modalità a schermo intero. Senon volete permettere queste azioni, è sufficienterimuovere entrambi i parametri dal momento che i loro valoridi default sono rispettivamente sameDomain efalse.


Ulteriori parametri

Il codice presentato al punto precedente utilizza solo 4 deiparametri disponibili. Potete visualizzare una lista completadei 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 inviareall'SWF delle variabili inizializzate. FLVMedia Player e ImageRotator supportano unagran quantità di queste variabili, rendendolesemplici e personalizzabili. Vediamo un esempio in cuiutilizziamo tre variabili per l'oggetto mediaplayer.swf:una per indicare la playlist, una per il colore dello sfondoe 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 unasingola stringa come coppie chiave-valore separate dalla"e" commerciale. Non vi è limite al numerodi variabili inseribili nelcodice.


Problematiche per flashvars

Ci sono tre problematiche relazionate al parametro flashvarsche causano spesso il mancato caricamento delle variabili. Ilprimo riguarda il percorso relativo dei files. Quando siindica il percorso di un MP3, di un'immagine o di un fileXML, si dovrebbe sempre partire dalla posizione del file HTMLche contiene l'oggetto SWF. Per cui, negli esempiprecedenti, se il file SWF è posizionato in unasottodirectory, la variabile che punta alla playlist dovrebberimanere file=playlist.xml e nonfile=../playlist.xml! Vi è un'eccezione:il percorso ai file FLV dovrebbe essere fornito relativamentealla posizione del file SWF. Per non confondersi, èsempre possibile usare percorsi assoluti per localizzare lerisorse (includendo la parte http://www).

La seconda problematica riguarda l'importazione di fileXML. A causa di restrizioni di sicurezza, Flash puòimportare solo file XML che risiedono nello stesso dominiodel file SWF. Per cui, nell'esempio del nostromediaplayer, se l'oggetto SWF si trova inwww.myserver.com, il file playlist.xmldovrebbe anch'esso risiedere inwww.myserver.com. Un modo per ovviare a questalimitazione è usare un file crossdomain.xml, chedovrebbe essere installato nella root del sito che contieneil file XML (quiquello per YouTube).

La terza problematica riguarda i simboli ?,=e &. Dal momento che questi vengonousati per separare e legare le coppie chiave-valore, nonpossono essere usati nelle stesse variabili. Per risolvere ilproblema è necessario effettuare l 'escaping di questi caratteri. Per fare ciò,è sufficiente rimpiazzare tali simboli con le lorostringhe escaped e dopo effettuare l'azione inversanell'SWF:

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


Eolas, XHTML & javascript

Nel 2005 emerse un problema di embedding dopo che unacompagnia denominata Eolas intentò evinse una causa contro Microsoft. Eolas riuscì adavere il brevetto sull'inclusione automatica diapplicazioni esterne (come Flash) nelle pagine web. Comerisultato, Microsoft aggiornò Internet Explorer:quando si passa il mouse sopra un oggetto SWF vedreteapparire un bordo grigio. Prima di interagire conl'oggetto, sarà necessario cliccarlo una volta perattivarlo. Un secondo problema riguardail fatto che<embed> non è un tag XHTML valido.Per cui, chi vuole sviluppare siti web accessibili e conformiagli standard W3C non può usarlo.

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


SWFObject

Un codice javascript molto utile e gratuito per includereoggetti SWF è SWFObject di Geoff Stearns. Vieneusato 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.jssul vostro server e includerlo nell'header delle vostrepagine web in questo modo: 

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

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

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

In ultima battuta, istanziate un oggetto SWFObject al disotto dell'elemento HTML che conterràl'oggetto SWF e specificate lì dentro tutti iparametri 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à ilcodice necessario per includere mp3player.swf. Inquesto caso le dimensioni sono state settate a 300 x 250pixel e sono state impostate alcune variabili flashvars(file, backcolor e autostart).Infine, l'istanza dell'oggetto include il contenutoFlash nell'elemento specificato, senza più bordigrigi e problemi di validità del codice.