Silverlight + Expression Encoder + TechEd
Il mio ultimo post riguardava un video di presentazione del TechEd, che spero abbiate visto :-)
Come avrete notato il video è un file WMV, che fa partire il lettore che avete installato sul computer. Mi sono detto, ma perchè non renderlo disponibile in streaming magari facendo un' applicazione con Silverlight ?
Ecco come
1) Silverlight Streaming
Il primo problema che dobbiamo affrontare se vogliamo offrire un nostro video in streaming è avere una piattaforma di streaming :-).
Tra i servizi di Winows Live, c'è Silverlight Streaming (in alpha), che vi consente di uplodare gratuitamente file video che possono essere consumati in streaming. Attualmente il limite delle applicazioni, vedere dopo cosa intendo, che potete uplodare è di circa 22MB, che a 300Kbs sono circa un filmato di 10 minuti. Nel mio caso il filmato dura pochi secondi e quindi non ho problemi.
Per poter utilizzare questo servizio occorre per prima cosa avere un account Windows Live ID, account che potete comunque utilizzare per accedere agli altri servizi Windows Live.
2) Codifichiamo il video con Expression Encoder
Ora che abbiamo una piattaforma di streaming abbiamo bisogno di effetuare la codifica del nostro file WMV.
Con il rilascio di Silverlight è stato anche rilasciato Expression Encoder, applicazione che potete scaricare in trial e che vi consente di effetuare diverse operazioni di codifica da formati di ingresso a diversi formati di output adatti alla pubblicazione di filmati in streaming e codificati in formato VC-1 per poter essere letti da un' applicazione Silverlight.
Quindi dopo aver installato Expression Encoder, ho aperto il mio file WMV dal menù file, Import.., quindi ho scelto il "profilo" che mi interessava ottenere.
Nella figura si intravede il profilo scelto che corrisponde alla codifica video di VC-1 a 1.7 Mbps, andando sulla combobox con il cursore viene evidenziata questa e altre informazioni.
E' ora possibile scegliere uno skin da applicare al video in modo che sia visibile all'interno di un "lettore", con tasti play, stop etc.
Per fare questo in figura vedete la sezione Job Output e il template applicato "Blitz", che corrisponde alla preview che vedete in figura. Quest'operazione crea un opportuno file XAML, il linguaggio usato anche in WPF per la creazione dell'interfaccia utente, e dei file Javascript per poter gestire le interazioni con l'applicazione, come la pressione del tasto play etc.
Premendo il tasto Encode vengono creati nella directory di output i file HTML, Javascript, XAML e WMV, quest'ultimo codificato come abbiamo scelto, necessari per lanciare l'applicazione da un qualsiasi server web, non solo IIS ma anche un server Apache o altri. In questo caso il file verrebbe consumato sfruttando il progressive download.
3) Creare un'applicazione per Silverlight Streaming
Possiamo creare un'applicazione per Silverlight Streaming, in modo da non appesantire il nostro server web con il download del file ma scaricando il file in streaming da questo servizio Windows Live.
Per tutti i dettagli consultare la guida qui, vediamo ora passo passo come fare.
Dobbiamo creare un file .zip che uploderemo successivamente. Questo file dovrà contenenere un file manifest.xml fatto in questo modo:
<SilverlightApp>
<version>1.0</version>
<loadFunction>StartWithParent</loadFunction>
<jsOrder>
<js>MicrosoftAjax.js</js><js>BasePlayer.js</js><js>PlayerStrings.js</js><js>player.js</js><js>StartPlayer.js</js></jsOrder></SilverlightApp>
Quindi i seguenti file che trovate nella directory di output di Media Encoder:
player.xaml - Il file XAML che contiene l'applicazione Silverlight
*.wmv – Video file(s)
*.jpg – Image file(s), thumbnails per la definizione dei capitoli e la preview ( non presenti nel nostro esempio)
*.js - tutti i file di script tranne Silverlight.js
Andiamo ora nel sito di amministrazione di Silverlight Streaming nella sezione dove possiamo fare l'upload di file:
Una volta fatto l'upload trovate le istruzioni su come inserire in una pagina HTML l'applicazione Silverlight creata, che presenterà il video in streaming. Oltre la modifica ad un file HTML dovete aggiungere nella direcrtoy del vostro sito web anche un file CreateSilverligh.js che instanzia il plug-in silverlight.
Qui trovate la pagine web funzionante che contiene l'applicazione creata.
Per completezza riporto il codice da inserire nella pagina HTML:
Nella sezione Header
<script type="text/javascript" src="https://agappdom.net/h/silverlight.js"></script>
<script type="text/javascript" src="CreateSilverlight.js" mce_src="CreateSilverlight.js"></script>
Nel Body
<div id="Wrapper_TechEd2007Video" style="width:500px; height:400px; overflow:hidden;"></div>
<script type="text/javascript">
var Wrapper_TechEd2007Video = document.getElementById("Wrapper_TechEd2007Video");
CreateSilverlight();
</script>
Creare il file CreateSilverlight.js che contiene
function CreateSilverlight(){
Silverlight.createHostedObjectEx({
source: "streaming:/4031/TechEd2007Video",parentElement: Wrapper_TechEd2007Video});
}
Conclusione
Abbiamo visto come creare un'applicazione Silverlight per visualizzare un video con Expresion Encoder ed abbiamo usato il servizio di Windows Live, Silverlight Streaming per fare lo streaming del video, senza appesantire il nostro server web, dove abbiamo creato invece una semplice pagina HTML e un file Javascript.
Usando gli ultimi esempi di codice potete inserire nelle vostre pagine il video del TechEd 2007 che vi ho messo a disposizione!
Per chi di voi è interessato vi consiglio di tenere d'occhio anche il blog di Roberto Cavallini, User Experience Evangelist in Microsoft Italia per aggiornamenti sui prodotti Expression.
Buon divertimento.
-Pietro