Create Your Own Silverlight HD Video Tutorial: From Video File to Working Silverlight Streaming Application

nikola — Sat, 17 May 2008 02:51:00 GMT

In This Tutorial

· Learn how to process video file with the Expression Encoder to prepare it for Silverlight Streaming Service

· Configure Expression Encoder Application output to work with Silverlight Streaming

Step1: Preparing Video in Expression Encoder

Download the trial from here: http://www.microsoft.com/downloads/details.aspx?FamilyId=A04DCC8C-9DB7-41CB-A27C-08CBEB0A01BA&displaylang=en

Do this:

· Click File | Import and open your video

· Select Streaming Broadband profile or another profile you may like.

I selected Streaming Broadband and then customized the bit rate and resolution to my liking.

Note: the file size must be less than 105 MB currently to work with Silverlight Streaming

· Click Output on the top-right part of the screen

· Choose a picture to be shown before the video is loaded from the Thumbnail section

· In Job Output, select a template – this will be your output application

I also unchecked Cue Video Page on load and Automatically start video when cued

· Click the Encode button on the bottom-left part of the screen

o After encoding is done, your application should load in the default browser!

Step2: Configure Application for Silverlight Streaming

· Find the output directory of the application, using the Output tab, then Job Output – look at the Directory box

· Create a manifest.xml in the output directory (folder), containing this:

<loadFunction>StartWithParent</loadFunction>

<js>MicrosoftAjax.js</js>

<js>SilverlightControl.js</js>

<js>SilverlightMedia.js</js>

<js>ExpressionPlayer.js</js>

<js>PlayerStrings.js</js>

<js>player.js</js>

<js>StartPlayer.js</js>

</jsOrder>

</SilverlightApp>

· Zip all files from the output folder, except for Default.html and Silverlight.js

· Upload the .zip file on your account at http://silverlight.live.com

You’re done!

Tips and Tricks

· If you want to update application settings (e.g. change the player background color) from within Expression Encoder, there is no need to encode the stream again:

o Click the Encode tab, then on Video select Source Profile (this will copy the un-encoded video in the application output folder)

o After the video is copied and the settings updated, add only the .js and .xaml files to the original application .zip file

· After uploading the application to http://silverlight.live.com you can customize it in-place by clicking on Edit next to the Application Manifest text

You had me at "Hello World!" : Streaming

Create Your Own Silverlight HD Video Tutorial: From Video File to Working Silverlight Streaming Application

In This Tutorial

Step1: Preparing Video in Expression Encoder

Step2: Configure Application for Silverlight Streaming

Tips and Tricks