Adding Videos to web page using Silverlight

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

Print | posted on Monday, February 25, 2008 4:58 AM

Comments on this post

# re: Adding Videos to web page using Silverlight

Requesting Gravatar...
Harish,
I liked your easy to follow Silverlight explanation. It is excellent. I went ahead and followed the instructions. The zipped manifest was uploaded.
The application webpage gives a great test point to see if the video is sitting in the right place. This works well.
The application then gives two methods of inserting code into the webpage,
<iframe> or a three step of putting the javascript into the correct parts of the page.
I tried both but no joy with either, any tips?
Thanks,
Bruce
Left by Bruce Williams on Mar 02, 2008 7:46 PM

# re: Adding Videos to web page using Silverlight

Requesting Gravatar...
Harish,
The iframe method works well in the body of the html webpage. It hates being anywhere near the head of the page,
Thanks,
Bruce
Left by Bruce Williams on Mar 02, 2008 7:53 PM

# re: Adding Videos to web page using Silverlight

Requesting Gravatar...
Hey Harish!

It was awesome today having you at the Microsoft Heroes Event!

Keep in touch!

Regards,
Sameer Panchangam
Left by Sameer Panchangam on Mar 07, 2008 1:44 AM

# re: Adding Videos to web page using Silverlight

Requesting Gravatar...
Harish,
The Silverlight server seems a bit tempermental. I tried another application and while it gets there it doesn't seem to be fully there. The difference is the uploaded application doesn't get the URL with the link. Tried to use the same linked which worked before with a name change but didn't work. I suspect it is how it handles the upload
Thanks,
Bruce
Left by Bruce Williams on Mar 09, 2008 8:06 PM

# re: Adding Videos to web page using Silverlight

Requesting Gravatar...
Harish,
I discovered that the upload did not take the manifest.xml file, there are eight files needed and the way is to look at the folder via a login service they have added. If the unzip doesn't get them all, then problems
Thanks,
Bruce
Left by Bruce Williams on Mar 10, 2008 8:14 PM

# re: Adding Videos to web page using Silverlight

Requesting Gravatar...
Hi Harish,

The video version of this article will be more helpful for many. Becuase we dont have installed the Silver Light Now. So can you upload?

Thanks,
Dhana.
Left by Dhanasekaran on Mar 11, 2008 6:39 PM

# re: Adding Videos to web page using Silverlight

Requesting Gravatar...
Harish,
It would seem that the team behind Silverlight have changed proceedures since last week. Gone is the access to the folders which was useful. I suspect the manifest was not working, so they now have an option to create one using an editor. It produces a best guess with fill in boxes. Worked once but second time it did not best guess.
You may need to change your manifest file to go with the changes. I think that the scripting files should be automatic as I tried the 5 js files without success,
Thanks,
Bruce
Left by Bruce Williams on Mar 18, 2008 7:09 PM

# re: Adding Videos to web page using Silverlight

Requesting Gravatar...
Hey, thanks for the nice tutorial. Could you post a sample? Maybe a link to one of the posts you mentioned at the beginning of this post. Would be helpful to see exactly what we're getting when we're done.
Left by Trevor on Jan 26, 2009 4:00 AM

# re: Adding Videos to web page using Silverlight

Requesting Gravatar...
hello i want to know about silver light
Left by harish v kulkarni on Feb 02, 2009 8:19 PM

# re: Adding Videos to web page using Silverlight

Requesting Gravatar...
Oh, this is how it should be done!! :) I see now :)
Left by Hosting on Jun 03, 2010 10:26 PM

Your comment:

 (will show your gravatar)