Setup Silverlight Streaming Service with StartPlayer.js

February 8, 2008 16:30 by John M

XDev Software has adopted using the free service provided by Microsoft called Microsoft Silverlight Streaming.  I wanted to provided a quick overview on how one can setup their javascript file to utilize this service once one has signed up for it.  For this example I have used the StartPlayer.js file that comes with Microsoft’s new software called Microsoft Expression Encoder.  I read an article from here

This article explains how Expression Encoder comes with base javascript files that handle all of the base functionality of a media player for Silverlight.  There are two core files that come with Expression Encoder templates.  They are BasePlayer.js and StartPlayer.js.  There are 3 more files that come with it, one called MicrosoftAjax.js, player.js and PlayerString.js.  However, you actually only need to deal with StartPlayer.js because in the end you just need to know the functions to call from BasePlayer.js and so forth.  I strongly recommend you read the article in the link above to get a better understanding.

Anyway, off to the point of the article.  Ok once you have signed up for the Silverlight Streaming Service you will need to modify the StartPlayer.js file and reference a new javascript file instead of a local Silverlight.js.  The silverlight.js file at the time of this article that you need to reference is the following:

http://agappdom.net/h/silverlight.js

I have copied my code below so you can see how to modify the StartPlayer.js file.  Please note I have made additional modifications besides just getting it to work with the Silverlight Streaming Service.  I further modified it to allow myself to pass a media path as a variable.  I may write another blog on that at another time.  However, for right now I have sections dedicated to local media viewing and media viewing using Silverlight Streaming Service for local developing purposes.  Below is my full StartPlayer.js file

------------------------------------------------------------------------------------

var strMovie = ""; //user added variable

//we added a parameter to StartPlayer_0, get_mediainfo, _playNextVideo
 
function get_mediainfo(mediainfoIndex, strMovie) {
    switch (mediainfoIndex) {       

        case 0:
            return  { "mediaUrl": strMovie,
                      "placeholderImage": "",
                      "chapters": [              
                                  ]
                    };                                                               
                         
        default:
             throw Error.invalidOperation("No such mediainfo");
     }
}

function StartWithParent(parentId, appId) {
    new StartPlayer_0(parentId);
}

function StartPlayer_0(parentId, movie) {
    strMovie = movie;
    this._hostname = EePlayer.Player._getUniqueName("xamlHost");
   
    //STREAMING SILVERLIGHT OBJECT  
    Silverlight.createHostedObjectEx(
 {   source: 'player.xaml',
          parentElement: $get(parentId ||"divPlayer_0"),
          id:this._hostname,
          properties:
          { width:'100%'
           , height:'100%'
           , version:'1.0'
           , isWindowless:'false;'
           , background:'#383838'
          },
          events:
          {
            onLoad:Function.createDelegate(this, this._handleLoad)
          },
          initParams:[strMovie]
        }
   );
    //NON STREAMING SILVERLIGHT
//    Silverlight.createObjectEx(
// {   source: 'player.xaml',
//          parentElement: $get(parentId ||"divPlayer_0"),
//          id:this._hostname,
//          properties:
//          { width:'100%'
//            , height:'100%'
//            , version:'1.0'
//            , isWindowless:'false;'
//            , background:'#383838'
//          },
//          events:
//          {
//             onLoad:Function.createDelegate(this, this._handleLoad)
//          }
//      }
//    );
    this._currentMediainfo = 0;
}
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(strMovie);    
    },   
    _onMediaEnded: function(sender, eventArgs) {
        window.setTimeout( Function.createDelegate(this, this._playNextVideo), 1000);
    },
    _onMediaFailed: function(sender, eventArgs) {
        alert(String.format( Ee.UI.Xaml.Media.Res.mediaFailed, this._player.get_mediaUrl() ) );
    },
    _playNextVideo: function(movie) {
   //used for streaming
        var params = $get(this._hostname).InitParams;
        var cVideos = 1;
        if (this._currentMediainfo<cVideos)
        {
            //used for local
           // this._player.set_mediainfo( get_mediainfo( this._currentMediainfo++, movie ) );
            //used for streaming
            this._player.set_mediainfo( get_mediainfo( this._currentMediainfo++, params ) );
        }      
    }       
}


NOTE: the media path that gets assigned to strMovie may look something like this:

streaming:/yourSilverlightStreamingID/yourSilverlightAppName/yourVideo.wmv

I know in the article noted above it mentions something on how Microsoft is hoping that people adopt the javascript classes/files they have made so people can create their own media players and media player skins so we have done just that.

Again, this is only one way to setup Silverlight Streaming service using the StartPlayer.js file.  However, if you don’t want to use the variable strMovie you can replace it with the static media path similar to the one mentioned above.

I know this may be a lot to take in at once, so please, any questions let us know.

 

Currently rated 3.0 by 1 people

  • Currently 3/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Add comment


(Will show your Gravatar icon)  

  Country flag




Live preview

January 6. 2009 14:14

Gravatar