Silverlight Streaming for video assets only

Posted on February 6, 2008
Filed Under 1.0 Javascript, streaming, video | 1 Comment

The Silverlight Streaming service is great for hosting your applications but what if you just want to host your assets there, particularly your heavy bandwidth assets like videos? Well the process is a bit like uploading an application (covered in the previous post) but with a few differences. You still need to create a manifest.xml file but this time since you have no code files to upload you will just reference a dummy.xaml file. You dont need to include this phantom xaml file in your zip but you do have to reference it in the manifest like so…

<SilverlightApp>  
   <source>dummy.xaml</source>
</SilverlightApp>

So just add the above snippet to your “manifest.xml” file, and include it in your zip with your video(s) file and upload to the Silverlight Streaming service.

Now for the tricky parts. You need to make a modification to your code to reference not your local copy of silverlight.js but the remote version supplied by the service, something like http://agappdom.net/h/silverlight.js

Another important change is in your createSilverlight function:

function createSilverlight() {  

   Silverlight.createHostedObjectEx({  

        source: "interface.xaml",  

        parentElement: document.getElementById("Wrapper_MultipleVideos"),  

        id: "SilverlightControl",  

        properties: {  

            width: "940",  

            height: "600",  

            background:"#bb5619",  

            isWindowless: "false",  

            framerate:"30",  

            version: "1.0"  

        },  

        events: {  

        },  

        initParams:"streaming:/48598/MultipleVideos/"  

    });  

}

Two things to note here: 1) use the Silverlight.createHostedObjectEx function call and 2) the additional initParams property.

The initParams property takes a string as input, and should point to your AccountID and Application’s Name listed on the Silverlight Streaming service site, in this case it’s “MultipleVideos”.

What happens here is that the service will convert the string specified into a proper URL. This URL is NOT permanent and will change so you cant just write it down and hard code it into your functions or xaml. Therefore you need to programmatically set the source of your MediaElement.

So for example you could do something like this in your initial start up function of your app (or in the Loaded event call for your main Canvas)

function mainCanvasLoaded(s) { 
   plugin = s.getHost()
   main=s.findName("mainCanvas")
   vid1=main.findName("videoElement1")
   vid2=main.findName("videoElement2")  

   //dynamic URL assignment happens here
   vid1.source=plugin.initParams+"/my_video1.wmv"
   vid2.source=plugin.initParams+"/my_video2.wmv"
}

If you want to upload and reference multiple videos under different application name’s you would need to tweak the initParams property like so to be a comma separated list:

initParams:"streaming:/48598/MondaysVideo/, streaming:/48598/ThursdaysVideo/"

And then in your video source assignment code you could handle that with a split(”,”) call like this:

   urlArray=plugin.initParams.split(",")
   vid1_url=urlArray[0]
   vid2_url=urlArray[1]

Official info on the subject can be found here at this MSDN article, but I didn’t find it too helpful.

Silverlight Streaming Service

Posted on February 5, 2008
Filed Under 1.0 Javascript, streaming, video | 1 Comment

Another post on some info that I thought was intially hard to find. Using the Silverlight Streaming service provided by Windows Live.

The Silverlight Streaming service is meant to be a convenient place where designers and developers can host Silverlight Applications they build for free.

To use the service to host your application you must sign-in to http://silverlight.live.com/ with a windows Live ID, hotmail, messenger or passport account.

After creating an account you will get an Account ID and an Account Key. The Silverlight Streaming Account ID is public and you will need to use it in your code of your Silverlight Applications. Your Account Key is private and should be treated like a password.

Once signed in, click on Manage Applications on the left. Here you can upload your Silverlight Application. Before jumping right in and selecting the files you want to upload you need to do a few things first. You need to create an xml file called ”manifest.xml” listing all the files your app will be using and the order of the JS files. Here is a sample manifest.xml file:

<SilverlightApp>   
   <source>name of the initial XAML file</source>    

   <version>[empty | 1.0 | 1.1]</version>    

   <width>[value in browser units or percentage]</width>    

   <height>[value in browser units or percentage]</height>    

   <jsOrder>    

      <js>[js file to load first]</js>    

      <js>[js file to load second]</js>    

      <js>...</js>    

   </jsOrder>    

</SilverlightApp>

Check out this MSDN Article for more info on the manifest file.

Once you have created this file, name it “manifest.xml” and place it in the root folder of your application. Zip up the entire contents of your application (including the manifest file) and now you’re ready to upload to the Silverlight Streaming service site.

After you’ve successfully uploaded your zip file containing your application, you’ll be directed to a page where you can upload an updated version, launch a test page containing your app, or delete your app. You’ll also be given 3 steps necessary to embed your app on a web site. Embed the scripts given to you on your site and test it out. If all goes well you should see your Silverlight app on your page but hosted through the Streaming service.

In the next post I’ll show how you can host assets only (particularly video) using this service. One would think you could just upload your assets and be given a reference to them but this is not the case and there’s a little more to it…

Recently


Categories


Archives