Your video to Silverlight Streaming 101

Author: Bronwen Zande

This article uses Expression Encoder 1. Please goto the newest article Your video to Silverlight Streaming 103 - With Expression Encoder Plugin

This article gives a simple introduction to Silverlight Streaming that will allow you to turn your own video content into a Silverlight Streaming application ready for you to place on your website or blog.

The basic steps are:

• Encode your video
• Prepare and Upload to Silverlight Streaming
• Place Silverlight video on your Website

Encode your Video

This section takes you through the basic steps of how to encode your video ready for SilverLight Streaming.

Prereqs:

1. Get your video content in an accessible place.  For this example I downloaded the WMV (High) version of What is ViaWindowsLive interview from Virtual Tech.Ed
2. Get Microsoft Expression Encoder.  A free trial download can be found here

Steps:

1. Open Media Encoder
2. Import your video using File->Import, anc choose your file location. 
3. Choose the player for your video by selecting the Output tab -> Job Output -> Template. I've choosen the Clean Template.
4. To upload to Silverlight streaming, your video must be less then 22 MB.  Once you are happy with the content of your video and you only need to compress the size, the easiest way to do this is to change the video quality until the estimated size is < 22 MB.
5. Once you are happy Press the Encode button.
6. You may do this as may times as you like until you are happy with the content, quality and player for your video.

Prepare and Upload to Silverlight Streaming

This section will show you how to take the encoded video and prepare and upload to Silverlight Streaming.

Prereqs:

1. Get a Silverlight Streaming account for free here.

 Steps:

1. Find the encoded output from the previous section. Generally the ouput location will be: C:\Users\<Username>\Documents\Expression\Expression Encoder\Output.  Note: Everytime you encode your video there will be a new folder created.
2. Create a Manifest.xml file in the directory of your video from step 1.
3. Paste the following code into the Manifest.xml file:

   <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>
   

4. Create a zipfile of everything in the directory from step 1, excluding the following files: Silverlight.js, default.aspx, project.csproj.  The easiest way to create a zip file is to right click and select Send To -> Compressed (zipped) folder.
5. The contents of your zip file should contain: everything listed in manifest.xml, manifest.xml, player.saml, your video file.
6. Login to your Silverlight Streaming account
7. Goto Manage Applications
8. Choose Upload a Silverlight Application
9.   Give your application a name and find the zip file you created in Step 4 and choose upload

Place Silverlight video on your Website

This section will show you how to place a Silverlight Streaming application on your website

Steps:

1. Login to your Silverlight Streaming account.
2. Choose Manage Applications
3. Choose the Application you wish to use
4. The Application Properites page will show you the javascript you need to put your application on your web page.
5. Steps 1 and 2 on this page go in the body of the page you want to add your application to.  Step 3 is a new CreateSilverlight.js file that your page references.
6. If you want to embed the application on a web page or blog post and you aren't able to create a separate .js file you can combine the script as follows:

   <SCRIPT src="http://agappdom.net/h/silverlight.js" type=text/javascript></SCRIPT>
   
   <SCRIPT type=text/javascript>
   function CreateSilverlight(){
     Silverlight.createHostedObjectEx({
       source: "streaming:/27147/BronJohnVWLVirtualTechEd",
       parentElement: Wrapper_BronJohnVWLVirtualTechEd});
   }
   </SCRIPT>
   
   <DIV id=Wrapper_BronJohnVWLVirtualTechEd style=
   "OVERFLOW: hidden; WIDTH: 500px; HEIGHT: 400px"></DIV>
   <SCRIPT type=text/javascript>
   var Wrapper_BronJohnVWLVirtualTechEd = 
   document.getElementById("Wrapper_BronJohnVWLVirtualTechEd");
   CreateSilverlight();
   </SCRIPT>
   

7. Your application should now look like the one here