In questo articolo ci occuperemo della riproduzione di contenuti video sul web in streaming attraverso l'utilizzo di un player Flash. Nella pratica attraverso lo streaming è possibile avviare la riproduzione con un accesso casuale alla timeline del filmato senza doverne attendere il completo caricamento (come nel caso del semplice "progressive download"). Per avere un' idea basta provare con Google video, Vimeo o You Tube.
Lo streaming vero e proprio è realizzabile (via RTMP, con l'utilizzo di Adobe Flash Media Server o con Red5 (un interessante server open source scritto in Java): la soluzione Adobe è un costoso prodotto commerciale, dall'altra parte anche Red5 ha lo svantaggio della complessità d'installazione e configurazione del server. In entrambi i casi bisogna considerare le notevoli spese per la struttura necessaria (VPS, server managed o dedicato).
Esiste una alternativa valida ed economica, argomento di questa trattazione: si tratta di un HTTP streaming (comunemente denominato pseudo-streaming), ottenuto con l'uso di un piccolo script lato server (realizzato attraverso il linguaggio PHP).
Questa tecnica si presta efficacacemente ad essere impiegata in applicazioni di media grandezza (video per i blog, advertising e presentazioni di prodotti on-line, e-learning, trailer di film, piccole Web TV), e non richiede specifiche configurazioni del server.
Certamente, è necessario calcolare con attenzione il consumo della banda disponibile e soprattutto il numero delle connessioni simultanee che ci aspettiamo di ottenere. Nel caso della previsione di una ingente richiesta di risorse è bene valutare la scelta di una delle opzioni precedenti in RTMP.
In realtà è possibile attuare in maniera molto performante lo pseudo-streaming (via HTTP) anche utilizzando Lighttpd, un web server molto leggero che gira su Apache e che dispone di un apposito modulo per lo streaming.
Inoltre esistono numerosi fornitori di hosting video che offrono soluzioni abbordabili (e comunque scalabili in base alle esigenze di banda e spazio), comprendenti lo streaming via RTPM, l'encoding video e la disponibilità di comode API per lo scripting: ad esempio Bits on the Run, Video Bloom e Vzaar.
Detto questo, è ora di concentrarci su ciò che serve per il nostro streaming "casalingo".
L'encoding dei filmati
Anzitutto è necessario effettuare l'encoding dei filmati nel formato Flash Video (FLV, codificato con Sorenson H.263 o con H.264, supporta anche l'audio AAC). Per la conversione è possibile utilizzare:
| Software | Descrizione |
|---|---|
| Flash Video Encoder | L'encoder di Adobe. Lo troviamo in bundle con Flash pro dalla versione cs2 in poi. Scelta consigliata. |
| FFmpeg | Multipiattaforma, disponibile, con licenza LGPL e GPL, prima per Linux e poi anche per Windows, è la scelta migliore per chi avvezzo alla riga di comando |
| WinFF | La versione a finestra di FFMpeg, ottimo sia per Windows sia per Ubuntu. |
Alternativamente alcuni software freeware per Windows: Free FLV Converter, Any Video Converter, Super C e Riva FLV encoder.
I metadati
Altra operazione fondamentale è iniettare i metadati nel file FLV, si tratta di informazioni "nascoste", necessarie al nostro script PHP per implementare il "seeking", il posizionamento random durante la riproduzione del video.
Possiamo utilizzare per questo FLV MetaData Injector (FLVMDI) una semplice applicazione da riga di comando (tranquilli, è disponibile anche una interfaccia grafica). Per Linux e MacOS è si può utilizzare Yamdy (per gli utenti Mac è possibile integrare una GUI, FLVr Injector).
Lo script xmoov.php
Affinchè lo streaming sia funzionante è necessario utilizzare un piccolo script, xmoov.php, (rilasciato con licenza Creative Commons), che può funzionare su un qualunque web server con PHP versione 4 o superiore; la configurazione è veramente semplice, e non sono richieste particolari cononoscenze del linguaggio.
Per prima cosa è necessario specificare la posizione dei filmati che vogliamo riprodurre, quindi scriviamo il percorso della directory che contiene i video nel sorgente, in questo modo:
//---------------------------------------------------
// MEDIA PATH
//
// you can configure these settings to point
// to video files outside the public html folder
//---------------------------------------------------
// points to server root
define('XMOOV_PATH_ROOT', '');
// points to the folder containing the video files
// [ndA] qui scriviamo il path della directory con i filmati
// nel nostro caso 'video/'
define('XMOOV_PATH_FILES', 'video/');Inoltre, affinchè xmoov.php possa "dialogare" con il player Flash che andremo a utilizzare, è necessario cambiare il nome di una delle variabili GET (XMOOV_GET_POSITION), basta cercare le seguenti righe di codice:
//---------------------------------------------------
// INCOMING GET VARIABLES CONFIGURATION
//
// use these settings to configure how video files,
// seek position and bandwidth .......
//---------------------------------------------------
define('XMOOV_GET_FILE', 'file');
// define('XMOOV_GET_POSITION', 'position');
// [ndA] scriviamo 'start' al posto di 'position'
define('XMOOV_GET_POSITION', 'start');
define('XMOOV_GET_AUTHENTICATION', 'key');
define('XMOOV_GET_BANDWIDTH', 'bw');Con le altre impostazioni disponibili, xmoov.php consente anche di limitare la larghezza di banda disponibile per la riproduzione o di abilitare la cache dei video.
JWPlayer e SWFObject
Nel primo esempio possiamo vedere in opera il player Flash JWPlayer (distribuito anche con licenza non commerciale) incluso nel documento HTML tramite le comode API di SWFObject. Di seguito il codice HTML e Javascript necessario :
<div id="video"></div>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = { autostart: false,
bufferlenght: 0,
volume: 50,
stretching: 'exactfit',
streamer: "../xmoov.php",
file: "linux.flv",
image: 'HTML_it.jpg'
};
var params = { allowScriptAccess: "always",
allowFullScreen: true,
wmode: "transparent",
menu: false
};
var atts = { };
swfobject.embedSWF("jwplayer/player.swf", "video", "640", "360", "9", null, flashvars, params, atts);
</script>Il metodo di SWFObject embedSWF() accetta alcuni parametri obbligatori: il primo è l'indirizzo del player flash, il secondo è l'id del div in cui lo script inserisce l'oggetto Flash.
Per l'utilizzo e la configurazione di JWPlayer è necessario fare attenzione alle coppie chiave-valore passate nell'hash flashvars di SWFObject che ci permettono di personalizzare il player. Nel caso del nostro esempio bisogna obbligatoriamente specificare gli indirizzi del filmato da riprodurre (flashvar file) e del file xmoov.php che ne effettua lo streaming (flashvar streamer).
L'elenco completo delle flashvars utilizzabili è consultabile nella documentazione di JWPlayer. Sempre nel sito ufficiale sono disponibili plugin, skin e moduli per customizzare l'interfaccia del player ed estenderne le funzionalità: ecco l'applicazione di una skin personalizzata in questo esempio.
FLOWplayer e FlashEmbed
FLOWplayer (distribuito con licenza openSource GPL 3.0) rappresenta una delle alternative più valide a JWPlayer per l'ampia possibilità di personalizzazione. Per la nostra tecnica di streaming è necessario utilizzare un plugin aggiuntivo (pseudostreaming lighttpd, si tratta di ulteriore file .swf) che consente di connettere lo script xmoov.php. Nell'esempio presentato il player è stato incluso nel documento tramite l'utilizzo di FlashEmbed, un plugin Javascript simile a SWFObject che consente l'embed di file .swf. Anche in questo caso la configurazione dello script si svolge tramite l'assegnazione di coppie chiave-valore in appositi oggetti:
<div id="video" style="width:640px; height:360px; margin:0 auto;"></div>
<script type="text/javascript" src="js/flashembed-1.0.4.js"></script>
<script type="text/javascript">
flashembed("video",
"flowplayer/flowplayer-3.1.4.swf",
{
config: {
clip: {
url: 'xmoov.php',
provider: 'lighttpd',
autoPlay: false
},
plugins: {
lighttpd: {
url: 'flowplayer.pseudostreaming-3.1.3.swf',
// queryString -> dati passati allo script xmoov.php
queryString: escape('?start=${start}&file=linux.flv')
}
}
} // fine config
});
</script>Il metodo Flashembed() accetta tre parametri: il primo è l'id del div che contiene l'oggetto Flash, il secondo è l'indirizzo del player flash. Il terzo parametro contiene vari hash che ci consentono di richiamare FLOWplayer e di configurarne le varie proprietà. Gli oggetti principali sono:
| Oggetto | Descrizione |
|---|---|
| clip | Permette di impostare il percorso del file xmoov.php e di abilitare lo pseudostreaming lighttpd |
| plugins | Consente di includere vari addons .swf per estendere le funzionalità del player base |
Nel nostro caso il plugin lighttpd richiede l'assegnazione dell'indirizzo del file .swf e della querystring contenente i parametri da passare al player, come l'indirizzo del video flv. Nel successivo esempio è stato utilizzato anche il plugin Controlbar che permette una estesa possibilità di intervento sull'aspetto dell'interfaccia grafica del lettore video.
Per una più approfondita conoscenza delle modalità di utilizzo di FLOWplayer è utile leggere la documentazione ufficiale che abbonda di codice ed esempi.
Conclusioni
In caso di eventuali problemi nell'implementazione degli esempi presentati, come quando il lettore non "trova" il video flv, potrebbe esserci un errore nell'impostazione dei percorsi del player swf e del video: quindi è opportuno controllare nella configurazione sia di xmoov.php che di JavaScript. Una soluzione sbrigativa può essere quella di utilizzare dei collegamenti assoluti.
Tutti gli esempi dell'articolo e i video sono disponibili per il download.
