Saturday, July 30, 2011

Adding Video into a Web Page Using Silverlight

Well, if you're a regular reader of blogs, you would have noticed that I recently posted some videos of Visual Studio and ASP.NET AJAX Silverlight-based. Many of you might want to download videos from Web pages, Web logs, sites, etc., and would ask where to download the video, such as to host it, etc. Also, some of you might be waiting to use the website Silverlight. Well, this post (inspired by my experience) will help you understand how it is possible to achieve both (both use the Silverlight video host web pages) together.

The first thing you need to download a video, video course. You can start recording a screen shot of a simple "how to" technical article or even a delicious recipe that you tried. You can record videos using the screen capture tool or can try it for free

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.

Video encoding for Windows Live Streaming using Expression Encoder

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


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 resource streaming services that Windows Live, you can accommodate up to 4 GB for free streaming videos and an innovative approach, because we take care of streaming and hosting party. All you need is a Silverlight player installed on the client side to make your video.

You can get a Silverlight Streaming account for free from  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 !!!


No comments:

Post a Comment