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.

Sep
6
2007

MSDN Universal Subscribers get Expression Encoder for free

If you are a lucky MSDN Universal subscriber then you can get Expression Encoder (released yesterday with Silverlight 1.0) for free. How ?

Juts use the key you have for Expression Studio delivered on MSDN Subscriber Downloads, on the page Subscription Product Keys.

This was posted on the newsgroup

We are pleased to offer Expression Encoder, formerly Expression Media Encoder, for download. If you are an existing Expression Studio or Expression Media customer, please enter your Expression Media (Windows) product key when prompted during the Expression Encoder installation to activate the software. If you do not have a product key, you can download Expression Encoder and preview its functionality. This fully functioning version will expire 60 days after installation. -- Jonathan [MSFT]

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