Sep
12
2007

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:

<script type='text/javascript' src="Silverlight.js"></script>

by

<script type="text/javascript" src="http://agappdom.net/h/silverlight.js"></script>

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:

function StartPlayer_0(parentId) {
    this._hostname = EePlayer.Player._getUniqueName("xamlHost");
    Silverlight.createObjectEx( {   source: 'player.xaml', 
                                    parentElement: $get(parentId ||"divPlayer_0"), 
                                    id:this._hostname, 
                                    properties:{ width:'100%', 
                                                 height:'100%', 
                                                 version:'1.0', 
                                                 background:document.body.style.backgroundColor, 
                                                 isWindowless:'false' }, 
                                    events:{ onLoad:Function.createDelegate(this, this._handleLoad) } } );
    this._currentMediainfo = 0;      
}

with this, adding the initParams:

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

    Silverlight.createHostedObjectEx( {   source: 'player.xaml', 
                                        parentElement: $get(parentId ||"divPlayer_0"), 
                                        id: this._hostname, 
                                        properties:{ width:'100%', 
                                                     height:'100%', 
                                                     version:'1.0', 
                                                     background:document.body.style.backgroundColor, 
                                                     isWindowless:'false' }, 
                                        events:{ onLoad:Function.createDelegate(this, this._handleLoad) },
                                        initParams:"streaming:/4065/livewriterdemo/livewriterdemo.wmv" } );
    this._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(){            

        var params = $get(this._hostname).InitParams;
        this._player.set_mediainfo(
                { "mediaUrl": params, "placeholderImage": "", "chapters": [] }  
            );                                                                                                              
    },                  

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

        var params = $get(this._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.

Comments (5) -

http://

Hi Laurent,

I am now - and it works a treat!

Now all I've got to do is figure out how to embed it into dynamic xaml, so that I can use it effectively within an existing Silverlight plugin.

Thanks again.

Nigel.

lkempe

Welcome Nigel!

http://

Hey, great example!  I'm making the InitParams into an array from a comma delineated string in order to allow the selection of multiple videos from a menu.  However, I lose all player controls when the InitParams value is set.  If I comment it out, the player works again.  Any suggestions?

http://

hi everyone,
does it work for mp3 streaming as well?
because i did all that is written here and i get the "unable to load file" error,
any help?

http://

sir,
my file path is:
msbluelight-0.agappdom.net/e1/d/34222/13935307.a/63387705600/0.kfhXsC6zQrWgfqaju5w5KTkjKE0/video.wmv

my problem is that some days before i saw a video on internet .that is very useful for me .so i saved that video. but after one days when i run that saved video from my computer, that not run.
plz tell me how to run this link that i have to given above
my email id sachin366@gmail.com

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

About Laurent

Laurent Kempé

Laurent Kempé is the editor, founder, and primary contributor of Tech Head Brothers, a French portal about Microsoft .NET technologies.

He is currently employed by Innoveo Solutions since 10/2007 as a Senior Solution Architect, certified Scrum Master and Founding Member.

Founder, owner and Managing Partner of Jobping, which provides a unique and efficient platform for connecting Microsoft skilled job seekers with employers using Microsoft technologies.

Laurent was awarded Most Valuable Professional (MVP) by Microsoft from April 2002 to April 2012.

JetBrains Academy Member
Certified ScrumMaster
My status

Twitter

Flickr

www.flickr.com
This is a Flickr badge showing public photos and videos from Laurent Kempé. Make your own badge here.

Month List

Page List