AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=1342&pId=-1
Streaming a Silverlight Media Application from Silverlight Live
page
by Jesudas Chinnathampi (Das)
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 39040/ 36

Introduction

Google's acquisition of YouTube.com, an online video streaming site is an apt example of where the Internet is moving towards. Blog is the latest hype, but that is going to change very soon. The bandwidth cost is coming down a lot day by day. Microsoft announcement of Silverlight technology is a great boon to all developers who are internet savvy. I was a great fan of Adobe Flash player. Now I can use Silverlight media controls to stream video files. As an added bonus, Microsoft Silverlight Streaming by Windows live provides us up to 4GB of FREE hosting space. In this article I will show you how we can host a media file using Silverlight controls at Windows Live. Once a media file is hosted, we can invoke the media file from any other web page. If you have a blog, you can show the media file from your blog. Your website's bandwidth is not used. Sounds interesting! Let us dive deep.

Software Requirements

The following lists of software are required in order to create a Silverlight media application and to run the application.

a) Microsoft Silverlight 1.1 Alpha runtime files

b) Microsoft .NET Framework 3.0

c) Microsoft Expression Media Encoder

The examples that you are going to see are based on the above software.

As a first step, you have to encode the video / media file that you want to stream. This can be done using the Expression Media Encoder tool. To encode a media file follow the steps below.

Encode a video file using Microsoft Expression Media Encoder

1) Open Microsoft Expression Media Encoder.

2) Click File -> Import and then select the media file that you want to stream.

3) On the settings tab, choose the Video format. You may want to select a format which is less than or equal to 700 Kbps. This is due to the fact that, video files hosted at Silverlight Streaming should be less than or equal to 700 Kbps. You have to follow some other criteria as well.

a) Video file must be smaller than 22mb.

b) Run time for any video file should be shorter than 10 minutes. 

4) On the Output tab, choose the Template that you want to use to stream your video. When you choose a pre-defined template, Media Encoder will automatically provide you with all controls that are usually found in a Windows Media Player (such as Play button, Pause button, slider control, volume control, file download progress bar control, etc).

5) Click File -> Encode.

By default you can see the encoded video file under: My Documents -> Expression -> Expression Media Encoder -> Output.

You will find a folder under the Output directory for each encoding process. If you look at the folder contents, it may look as follows:

Figure 1

Preparing files to be uploaded to Silverlight.LIVE.com

As per the above example, to stream the video file, "BabyShower.wmv" from Silverlight.live.com, we have to follow some rules. 

A) The first rule is to create a file called "manifest.xml."  The manifest.xml file describes the application to the hosting service. It is like a mediator. In the above screen shot, you can see around 14 files. We only need 7 files plus the manifest.xml. Those seven files are all .js files except the Silverlight.js, player.xaml and the .WMV file. The XML file should look like listing 1.

Listing 1

<SilverlightApp>
 <loadFunction>StartWithParent</loadFunction> 
 <jsOrder>
   <js>MicrosoftAjax.js</js> 
   <js>PreviewMedia.js</js> 
   <js>EmePlayer.js</js> 
   <js>player.js</js> 
   <js>StartPlayer.js</js> 
 </jsOrder>
</SilverlightApp>

B) Move all 8 files to a different folder and name it babyshower. 

Figure 2

C) Create a zip file using the above 8 files.

D) Go to http://silverlight.live.com/ and sign in using your Silverlight streaming account or get one for FREE by creating a new account for FREE at https://silverlight.live.com/account/create.aspx.

E) You will see the following screen after the successful login.

Figure 3

F) Click the "Manage Applications" link and then click "Upload a Silverlight Application."

G) Provide an "Application Name" and upload the zip file that you created in step (C).

Now you have hosted a Silverlight application at Silverlight streaming. You can stream the video from any other web page no matter where it is hosted. After you have uploaded the zip file, you will get a screen similar to the following.

Figure 4

As per the above instructions, all you have to do is to include the following code in your web page.

Listing 2

<script type="text/javascript" src="http://agappdom.net/g/silverlight.js"></script>
<script type="text/javascript" src="CreateSilverlight.js"></script>
 
<div id="Workflow3Wrapper" style="width:500px; height:400px; overflow:hidden;"></div>
<script type="text/javascript">
var BabyShowerWrapper = document.getElementById("BabyShowerWrapper");
CreateSilverlight();
</script>

And do not forget to create a file called "CreateSilverlight.js" with the following contents:

Listing 3

function CreateSilverlight()
{
Sys.Silverlight.createHostedObjectEx({source:
"streaming:/99999/BabyShower",parentElement: BabyShower});
}

Please remember to replace the account ID number "99999" with your account ID number.

 

Invoke multiple video files from a single web page

Now that you have seen how to host a video file at Silverlight streaming account, I will show you an example of how to have a common web page which will have hyperlinks to all video files hosted in your Silverlight streaming account. This way, you can share all your video files using one common web page. Let me assume you have hosted 5 video files using the techniques that you have seen so far in this article.

Your main html / asp / aspx page should look as follows.

Listing 4

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>My Videos</title>
<script type="text/javascript" src="http://agappdom.net/g/silverlight.js"></script>
<script type="text/javascript" src="CreateSilverlight.js"></script>    
</head>
<body>
    <form id="form1" runat="server">
    <table width="95%" align="center" ID="Table1">
    <tr>
      <td width="20%"><a href="javascript:showVideo(1);">
        <font face="verdana" size="2"><b>Birthday Party</b></font></a></td>
      <td width="20%"><a href="javascript:showVideo(2);"> 
        <font face="verdana" size="2"><b>Graduation Party</b></font></a></td>
      <td width="20%"><a href="javascript:showVideo(3);"> 
        <font face="verdana" size="2"><b>Bachelors Party</b></font></a></td>
      <td width="20%"><a href="javascript:showVideo(4);"> 
        <font face="verdana" size="2"><b>Wedding Day</b></font></a></td>
      <td width="20%"><a href="javascript:showVideo(5);"> 
        <font face="verdana" size="2"><b>Babyshower</b></font></a></td> 
      </tr>
      </table>
      <div id="videoWrapper" style="width:800px; height:700px; 
          overflow:hidden;"></div>
    </form>
</body>
</html>

In the above code I have used a custom JavaScript function named, "showVideo." You guessed it right; the function is defined inside the "CreateSilverlight.js" file. The content of the Create Silverlight file will look like Listing 5.

Listing 5

function showVideo (intCtr)
{
      var varWrapper = document.getElementById("videoWrapper");
      CreateSilverlight(intCtr);
}
 
function CreateSilverlight(intID)
{
      if (intID == 1)
            Sys.Silverlight.createHostedObjectEx(
              {source: "streaming:/99999/Birthday",parentElement: videoWrapper});
            
      if (intID == 2)
            Sys.Silverlight.createHostedObjectEx(
              {source: "streaming:/99999/Graduation",
                parentElement: videoWrapper});        
 
      if (intID == 3)
            Sys.Silverlight.createHostedObjectEx(
              {source: "streaming:/99999/Bachelors",parentElement: videoWrapper});        
 
      if (intID == 4)
            Sys.Silverlight.createHostedObjectEx(
              {source: "streaming:/99999/Wedding",parentElement: videoWrapper});          
 
      if (intID == 5)
            Sys.Silverlight.createHostedObjectEx(
              {source: "streaming:/99999/BabyShower",
                parentElement: videoWrapper});                    
}

What I have done above is a very simple tweak from the code that we got after we uploaded the zip file. I created an argument for the method, CreteSilverlight called intID. The value of intID is passed by the showVideo function. Again, the argument for the showVideo function is being passed by the webpage which shows the video names with hyperlinks. So, if you want to add a new video, all you have to do is add another row in the web page with a different argument to the ShowVideo function.  Also, you will have to add another if statement inside the CreateSilverlight function which actually initiates the video streaming.

Summary

Hope you enjoyed the new way of streaming video files through the latest Silverlight technology from Microsoft. Silverlight is still in beta and we have so much restriction on the video file size that we can stream and also on the video bit rate quality. As per the current standards, the video running time for a single video cannot exceed 10 minutes. We can overcome this by splitting our video into multiple video files and playing video file one after the other. I have another article which talks about how to play video files which run more then 10 minutes. Until then, keep your fingers crossed!

 

 



©Copyright 1998-2014 ASPAlliance.com  |  Page Processed at 12/18/2014 7:24:16 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search