Silverlight Streaming hosting and Expression Encoder

How do you host your video content created with Expression Encoder on Silverlight Streaming ?

The first answer is wait for the plugin that will let you do that:

Coming Soon
Publish directly to Silverlight Streaming.

If you can’t wait take a look at Silverlight Streaming SDK that tell you how to do it !

But how do you do if you want to have your video on Silverlight Streaming and your application on your site ?

Read the documentation. I have to say, it was quite obscure the first time I read it. So here is the way we did it with Mathieu.

The output of Expression Encoder is saved in the following folder:

C:\Users*Username*\Documents\Expression\Expression Encoder\Output

In this folder you have everything to start with a very good looking player; the xaml, the JavaScript, your video, a html document, even a visual studio project. You might look at Tim Heuer video “cheating at creating a Silverlight media player“.

To start you have to modify the default.html to use the Silverlight JavaScript script delivered by Silverlight Streaming:

This is recommended by the documentation, but it is not mandatory:

Instead of hosting Silverlight.js on your own web site and using it, you should use http://agappdom.net/h/silverlight.js

Then you have to modify the StartPlayer.js, replace:

with this, adding the initParams:

function StartPlayer_0(parentId) {
this._hostname = EePlayer.Player._getUniqueName(“xamlHost”);

Silverlight.createHostedObjectEx( {   source: <span style="color: rgb(163,21,21)">'player.xaml'</span>, 
                                    parentElement: $get(parentId ||<span style="color: rgb(163,21,21)">"divPlayer_0"</span>), 
                                    id: <span style="color: rgb(0,0,255)">this</span>._hostname, 
                                    properties:{ width:<span style="color: rgb(163,21,21)">'100%'</span>, 
                                                 height:<span style="color: rgb(163,21,21)">'100%'</span>, 
                                                 version:<span style="color: rgb(163,21,21)">'1.0'</span>, 
                                                 background:document.body.style.backgroundColor, 
                                                 isWindowless:<span style="color: rgb(163,21,21)">'false'</span> }, 
                                    events:{ onLoad:Function.createDelegate(<span style="color: rgb(0,0,255)">this</span>, <span style="color: rgb(0,0,255)">this</span>._handleLoad) },
                                    **initParams:<span style="color: rgb(163,21,21)">"streaming:/4065/livewriterdemo/livewriterdemo.wmv"</span>** } );
<span style="color: rgb(0,0,255)">this</span>._currentMediainfo = 0;

}

Now you need a way to get back this the real url of you video out of the streaming:/4065/livewriterdemo/livewriterdemo.wmv, this is done automatically by the script doing a post to Silverlight Streaming server that returns the following javascript:

SLStreaming._StartApp(“bl2”, null
, {}
, []
, [“http://msbluelight-0.agappdom.net/e1/d/4065/8.w/63325188000/0.UZcUXMfJgIK0I0HcP-SQGzhvvVE/livewriterdemo.wmv"]);

Now we need to take car of the real url in the _handleLoad method we change the call to the _playNextVideo to a new method ChangeVideo:

StartPlayer_0.prototype= {
_handleLoad: function() {
this._player = $create( ExtendedPlayer.Player,
{ // properties
autoPlay : true,
volume : 1.0,
muted : false
},
{ // event handlers
mediaEnded: Function.createDelegate(this, this._onMediaEnded),
mediaFailed: Function.createDelegate(this, this._onMediaFailed)
},
null, $get(this._hostname) );
//this._playNextVideo();
this.ChangeVideo();
},
ChangeVideo: function(){

    <span style="color: rgb(0,0,255)">var</span> params = $get(<span style="color: rgb(0,0,255)">this</span>._hostname).InitParams;
    <span style="color: rgb(0,0,255)">this</span>._player.set_mediainfo(
            { <span style="color: rgb(163,21,21)">"mediaUrl"</span>: params, <span style="color: rgb(163,21,21)">"placeholderImage"</span>: <span style="color: rgb(163,21,21)">""</span>, <span style="color: rgb(163,21,21)">"chapters"</span>: [] }  
        );                                                                                                              
},

We get access to the initParams converted to a real url using:

    <span style="color: rgb(0,0,255)">var</span> params = $get(<span style="color: rgb(0,0,255)">this</span>._hostname).InitParams;

Tanks to Mathieu for the help in the javascript coding.

So this is all you need to do to have your video hosted and delivered by Silverlight Streaming and your application hosted on your own site.

Silverlight Streaming hosting and Expression Encoder

Laurent Kempé