Using Silverlight Streaming

  • Article

I am currently in the process of re-implementing robbagby.com (some may say implementing, as all it does now is redirect to blogs.msdn.com/bags).  In the new implementation, I am going to use SubText to implement my blog and the site infrastructure.  The reason for this effort is to help me expose screencasts, webcasts, samples and sample code.  Blog posts are not the best way to accomplish this.  I plan on creating pages for specific technologies (WF, WCF, AJAX) where you will be able to get access to these resources.  In this regard, I have been thinking of how to expose these assets.  One decision that was easy is to use Silverlight Streaming Services to expose my shorter screencasts. 

If you are not familiar with Silverlight Streaming from live services, essentially it is a free service (up to 10 GB) that allows you to host your Silverlight applications.  Tim Heuer wrote a great post describing how the naming of Silverlight Streaming may be a bit confusing, as you may assume that the service simply streams the media to your client that is hosted elsewhere.  In fact, you upload your entire Silverlight Application (xaml, js, media, etc) in a zip.  The entire application is then streamed to the client.

I wrote this post to help others that want to take advantage of these services, as the documentation was spread out and some of it was written for various betas.  For this example, I used Expression Encoder 2 (Version 2.0.1406.0).  Here are the steps to get Silverlight Streaming going:

  1. Get a live id account if you don't already have one
    • Navigate to https://home.live.com/
    • Click the “sign in” link in the upper right hand corner
    • Click the “sign up” button
    • Choose your id and fill out the form
  2. Create a Silverlight Streaming account
  3. Encode your video
    • Open Expression Encoder 2
    • Import the video – Click File > Import > Choose Your File
    • (Optional) Add any markers
      • Click on the Metadata Tab (In the upper right corner of Expression)
      • Add markers as necessary
    • Choose Your Template
      • Click on the Output Tab (In the upper right corner of Expression)
      • Choose a template
    • Select your output directory
    • Click the Encode button (Bottom of Expression)
  4. Create a manifest file for your application

    • Create a file named Manifest.xml * Make sure you use the name Manifest.xml

    • Add the following xml to your file:

    • <SilverlightApp>
         <version>1.0</version>
         <loadFunction>StartWithParent</loadFunction>
         <jsOrder>
            <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>

  5. Create a zip file for you application
    • Add the following files to your zip:
      • manifest.xml
      • MicrosoftAjax.js, SilverlightControl.js, SilverlightMedia.js, ExpressionPlayer.js, PlayerStrings.js player.js, StartPlayer.js
      • *.jpg (all jpegs)
      • *.wmv (Your media file)
      • *.xaml (Your xaml file)
    • *** Make sure you do not add Silverlight.js
  6. Upload the zip to your Silverlight Streaming Account
    • Navigate to https://silverlight.live.com/
    • Sign In (if you haven’t already)
    • Browse to the "Manage Applications" page
    • Upload the zip file containing your application
    • The upload will take some time, so be patient. You will k now when it is complete, as when it is done, you will see the test page. Simply click on the “Launch Application Test Page” link to test
  7. To include the application in one of your pages, simply follow the instructions on the test page