My First Silverlight Streaming Project

  • Article

I had a short video that I needed to share with family this weekend so I thought I'd try out the Silverlight streaming service that's currently free.

I started out with this guide Your Video to Silverlight Streaming 101 which seemed pretty straight forward. The first part is easy, get Expression Encoder installed and run the video content through that choosing a job output template. It looks like you can do it without Expression Encoder, but I had no idea how to format the control files required for Silverlight hosting.

The output from Expression Encoder includes the WMV file, a .XAML file (typically called player.xaml) and a series of .JS support files. Your next job is to create a Manifest.xml file which is a required part of the Silverlight hosting. Turns out this was a tricky part.

The guide I was following showed the contents of the Manifest.xml file. But what it showed would receive a non-descript error back from uploading to Silverlight streaming. Ouch.

Eventually I found this post showing the error and the fix. Here's the correct Manifest.xml that I had to use:

<SilverlightApp>
<version>1.0</version>
<loadFunction>StartWithParent</loadFunction>
<jsOrder>
<js>MicrosoftAjax.js</js>
<js>Silverlight.js</js>
<js>BasePlayer.js</js>
<js>PlayerStrings.js</js>
<js>player.js</js>
<js>StartPlayer.js</js>
</jsOrder>
</SilverlightApp>

Apparently the order of the .js files is extremely important to the Silverlight hosting server. Also notice that there's no mention of my .WMV file or my .XAML file. These are not required in the manifest. Though they are required in the .ZIP file you upload.

So now you just upload a .ZIP file containing all these to Silverlight streaming and you're done.

Wait, not done yet. No one can see it unless you create a web page to stream the video to. The Silverlight streaming server will show you three pieces of script.

  1. The first one has to go in the header of your web page.
  2. The second one has to go in the body of your web page where you want the media to show.
  3. The third one has to go in a separate file called CreateSilverlight.js in the same directory as your web page.

So I created a simple default.htm and the CreateSilverlight.js and uploaded them to a new directory that my family can get to. Here's the simple Default.htm source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head><title>Duncan's Homework Stop Motion</title>
<script type="text/javascript" src="https://agappdom.net/h/silverlight.js"></script>
<script type="text/javascript" src="CreateSilverlight.js"></script></head>
<body>
<div id="Wrapper_TestVideo" style="width:500px; height:400px; overflow:hidden;"></div>
<script type="text/javascript">
var Wrapper_ANotherone = document.getElementById("Wrapper_ TestVideo ");
CreateSilverlight();
</script></body></html>