Creazione di un Videoplayer per i filmati FLV

Dopo aver visto le fasi principali per la realizzazione di video in formato FLV, non resta che analizzare il procedimento attraverso cui realizzare un'interfaccia Flash con la quale visualizzare i video.

L'interfaccia video che realizzeremo consiste in un file Flash .swf che incorpora o "legge" un file video .flv esterno precedentemente creato. Il file .swf che costituisce la cornice - o sarebbe meglio dire il visualizzatore - dei documenti video .flv può essere realizzato, a seconda delle esigenze e del tipo di interazione che si vuole offrire all'utente, secondo tre stili diversi ciascuno dei quali prevede un differente impegno realizzativo e progettuale.

Il primo caso consente all'utente un'interazione davvero molto limitata, non presentando alcuna interfaccia a lui visibile e, quindi, in alcun modo controllabile. Si tratta in realtà di un sistema di visualizzazione privo di qualsiasi tipo di sistema di controllo come, per esempio, pulsanti e slider. Questo tipo di interfaccia si rivela particolarmente utile quando vogliamo trasmettere dei contenuti in versione integrale senza che l'utente possa decidere di saltarne alcune parti.

Il secondo caso consiste nell'introduzione di un sistema di pulsanti totalmente personalizzato nella grafica attraverso cui controllare la pausa, il riavvolgimento e altre funzionalità di riproduzione di base del filmato. Un livello di controllo aggiuntivo molto semplice da ottenere permette di impostare un tempo del buffer a piacere, in modo che il video venga parzialmente precaricato.

Il terzo caso è quello che permette all'utente di sfruttare al meglio le potenzialità del sistema di riproduzione video .flv combinato con interfacce proprietarie Flash. Utilizzando i componenti multimediali di Macromedia Flash (dalle versioni MX2004 Professional in avanti) è infatti possibile realizzare un riproduttore con controlli molto avanzati e indicatori di avanzamento precisissimi.

Vediamo ognuno di questi tre casi con maggiore dettaglio. Per motivi pratici, non parleremo di come incorporare un file .flv all'interno del file .swf poiché risulta poco vantaggioso utilizzare questo metodo in quanto, collocando il file video all'interno della cornice Flash, si perderebbero tutti i vantaggi in termini di dinamicità e di leggerezza del file che rendono unica questa soluzione di pubblicazione on-line di filmati. Ci occuperemo quindi di predisporre sistemi di visualizzazione per file .flv esterni al filmato Flash.

Cornice di visualizzazione semplice senza interazione

Il primo e più semplice caso prevede la realizzazione di un semplice file .swf che visualizza un video .flv e che può essere inserito in una pagina Web. Ipotizzando di utilizzare come programma di authoring Macromedia Flash MX 2004 Professional, occorre procedere come segue:

• creato un nuovo file Flash si deve aprire la libreria e creare un Nuovo Video. Trasciniamo il video creato all'interno delle stage.

• modifichiamo le proprietà dell'oggetto video assegnando dimensioni e posizioni secondo le nostre esigenze di montaggio. A questo punto diamo come nome all'oggetto mio_video.

• salviamo il documento Flash creato nella stessa cartella dove abbiamo memorizzato il file .flv precedentemente creato (nel nostro caso il file si chiama videoprova.flv).

• ora apriamo il pannello delle Azioni e incolliamo il codice che riportiamo qui di seguito, avendo cura di rispettare la formattazione e la punteggiatura.

  var filmino:NetConnection = new NetConnection();
  filmino.connect(null);
  var riproduci:NetStream = new NetStream(filmino);
  mio_video.attachVideo(riproduci);
  riproduci.play("videoprova.flv");

• a questo punto sarà possibile salvare il documento ed esportare il rispettivo file .swf. Lanciando il file vedremo comparire il video precedentemente codificato all'intero del file Flash.

Come noteremo, uno dei vantaggi di questa soluzione è che il file .swf realizzato è davvero leggerissimo in quanto, di fatto, non contiene nulla fatta eccezione per 5 sole righe di codice Actionscript. In questo modo otterremo quindi un enorme vantaggio per l'utente finale che non dovrà né attendere il caricamento di un pesante Player Web, né avviare (o scaricare!) un riproduttore esterno come Windows Media o RealPlayer. Per trasmettere il nostro video on-line basta a questo punto trasferire la pagina HTML in cui avremo avuto cura di inserire il file .swf e il corrispettivo file video .flv in una cartella di un server Web.

Interfaccia interattiva di base con buffer time e pulsanti grafici personalizzati

Sulla base delle procedure appena viste, introducendo qualche riga di codice supplementare possiamo migliorare la user experience dei nostri utenti. I più esperti di video per il Web avranno forse notato come la visualizzazione del filmato ottenuta con il sistema precedente manchi di un aspetto fondamentale per potersi considerare "usabile". Lo script realizzato prevede infatti la partenza immediata del flusso video, cosa che non tiene conto di utenti che navigano con connessioni lente o, in ogni caso, di variabili come il sovraccarico del server che ospita i nostri video. Con una sola riga di codice supplementare si può parzialmente ovviare a questo problema imponendo al file cornice .swf di precaricare nella memoria dei computer che visualizzano il filmato via Web alcuni secondi di dati video. La riga aggiuntiva evidenziata utilizza un codice molto semplice che permette di modificare, cambiando il numero tra parentesi, il numero di secondi di precaricamento.

var filmino:NetConnection = new NetConnection();
filmino.connect(null);
var riproduci:NetStream = new NetStream(filmino);
mio_video.attachVideo(riproduci);
netStream.setBufferTime(10);
riproduci.play("videoprova.flv");

Dopo aver aggiunto questa funzionalità, possiamo migliorare l'interfaccia rendendola più interattiva aggiungendo due pulsanti per controllare la pausa, la ripresa e il riavvio del filmato.

In questo caso dovremmo creare dei pulsanti, definendo una grafica e una posizione all'interno del file Flash di nostro gradimento. Il primo pulsante, sarà utilizzato per controllare la pausa e la ripresa del filmato esterno. Perché ciò avvenga, sarà sufficiente aggiunge il seguente breve script tra le azioni associate al pulsante:

on (release) {
this.riproduci.pause("videoprova.flv");
}

Da notare come la collocazione dello flusso video (this.riproduci) dipenda dal livello e dal fatto che il pulsante si trovi o no dentro ad altri oggetti.

Testando il filmato potremo sperimentare la funzionalità Pause che al primo clic blocca il filmato, mentre premendo nuovamente riattiva la riproduzione dove era stata interrotta.

Il secondo pulsante, quello del riavvolgimento, utilizzerà lo script già visto in precedenza per l'avvio del flusso video che avevamo collocato nel primo fotogramma della linea temporale principale del filmato Flash.

Lo script completo è il seguente:

on (release) {
this.riproduci.play("videoprova.flv");
}

L'azione attivata a ogni clic consiste nel riavvolgimento al punto iniziale del filmato video esterno e dell'automatica ripartenza della riproduzione.

Le operazioni abilitate dall'uso delle funzionalità dello script Netstream sono parecchie. Per chi volesse realizzare dei pulsanti che rimandano la riproduzione del flusso video esterno a un punto predefinito o, addirittura, che consentono di saltare avanti o indietro nel filmato di un numero a piacere di secondi, consigliamo di approfondire l'utilizzo delle funzionalità NetStream.seek() e NetStream.time.

Il terzo metodo di visualizzazione, che per la ricchezza delle funzionalità possibili sarà trattato in un successivo approfondimento, implica l'utilizzo dei componenti multimediali di Macromedia Flash. Oltre a realizzare player multimediali molto complessi, questa metodologia avanzata consente di predisporre interazioni sincronizzate tra gli eventi che si susseguono nell'animazione Flash e lo scorrimento del filmato video esterno.

Daniele Cerra è giornalista pubblicista, Content Manager, Progettista e-learning e Web e Concept Designer. Il suo sito personale è http://www.danielecerra.it