Well, if you are a regular reader of my blog, you would have noticed that I have recently uploaded a few videos on Visual Studio and ASP.NET AJAX, powered by Silverlight. A lot of you might want to upload your videos into your web pages, web logs, site etc., and would be wondering on where to upload the videos, how to host it etc., Also, some of you might be waiting to use Silverlight in your website. Well, this post (inspired with my own experience) helps understand on how you can achieve both (use Silverlight as well as host videos on your webpages) together.
The first thing that you would require to upload a video, is obviously the Video. You may want to start recording a screen capture of a simple "How-to" technical article or even on a yummy recipe that you tried. You could record the video using any screen capture tool or can try the free Windows Media Encoder Series
Once you are done with recording a decent size video (say of size 3-4 MB), you are all set to start publishing the video.
Encoding your Video for Windows Live Streaming using Expression Encoder
1. Download Expression Encoder for free
2. Open Expression Encoder, select "File - "Import" and chose the location where you have your recorded video
3. It shows the Imported Video under the Media Content section
4. Select Settings in the right and under Profile adjust the Video and Audio to reduce the size. Typically anything more than 25MB is going to have issues when using Silverlight Streaming. So adjust the settings accordingly.
5. Switch to the Output tab and under Job Output - Template - chose a template for the video. I chose the Silverlight Template which looks cool.
6. Once you are done with the above, click Encode to encode the video file for streaming
7. The Encoded file is typically stored in Documents folder under Expression\Encoder folders.
8. A folder is created for every encoded video
9. When you navigate to this folder, you might find the following files
i. BasePlayer.js
ii. Default.html
iii. Your WMV Video file
iv. MicrosoftAjax.js
v. player.js
vi. player.xaml
vii. PlayerStrings.js
viii. project.csproj
ix. Silverlight.js
x. StartPlayer.js
10. We need to add a Manifest file to the above files.
11. Create a simple .txt file and rename it to manifest.xml. Open it using any text editor and copy paste the following contents
<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>
Save this file
12. Secondly, you may not want the video to start playing automatically since it might be a little annoying for your visitors, particularly if there are more than a single video. To avoid this, you can edit the StartPlayer.js file and navigate to the section where it says autoPlay. It is set to true by default. Change it to false. This would make the video play after users click on the same.
13. Once you are done with the above changes, select all the files mentioned above (contents of the folder for this particular video) and Zip them. You would need to ignore the following files while zipping
i. Default.html
ii. Silverlight.js
iii. project.csproj file
14. The zipped file is what you would require to host your video
Silverlight Streaming
Silverlight Streaming is a free streaming resource provided by Windows Live Services It allows you to host upto 4GB Videos for free streaming and is an innovative approach since we take care of the streaming and hosting part. All one requires is a silverlight player installed on the client side to render your video.
You can get a Silverlight Streaming account for free from http://silverlight.live.com Once you create an account, visit the
Manage Applications section and select "Upload a Silverlight Application" link
You would require to provide a name which has no space (little annoying) without hyphen (even more annoying if you are used to using hyphens) and there after Browse to upload the zipped files.
Once you are able to upload the zip file successfully, you would get an URL with an iframe tag and the required properties.
Adding it to your website
Well, all you have to do is to copy the iframe URL provided in the Silverlight Streaming site and paste it into your blog template (switching to HTML View) / website.
Thats it, you could see that your videos are playing powered by Silverlight Streaming.
Happy Silverlight Streaming !!!