| Comments

In an email dialog today I saw someone asking how he could use an existing Encoder 2 template for existing media or streaming URIs when you don’t have something to encode.  After a few explanations, he replied that someone should blog this – and I agree :-).

So what did he mean?  Well, when you use Expression Encoder, you are typically going to be encoding media to a format to consume.  Encoder also gives you an additional option in the output settings to generate a media player for that encoded content.  These are all based on templates that I’ve previously written about that are available in the product as well is the source code for you to extend.

But what if you have a media file that doesn’t need encoding or you have a streaming URI and you don’t need to encode anything, but want the player?  To some it might not be so obvious so let me try to walk you through the steps.

You need the player

First you need the player.  The XAP that is, of the template you want to use.  There are essentially two ways of going about getting this:

    1. Getting the MediaPlayerTemplate.xap file from an existing output you already did (that used the same template you want)
    2. Building the XAP using the source of the templates and building it from scratch (requires .NET compiler or Visual Studio)

Obviously if you have the XAP of your desired template, you are ready to proceed.  If you don’t, then you’ll need to proceed to step 2.  Here’s what you’ll do:

Building the Player

First, find the template you want.  These are located in C:\Program Files\Microsoft Expression\Encoder 2\Templates\en (note: if you are on 64-bit or a different language, this path may differ slightly).  Within here you’ll see a list of templates by name.  Find the one you want and within that folder there is a Source directory.  That’s what you want.  I highly recommend actually moving the source files to a different place rather than edit directly in the templates directory.  There is a Visual Studio 2008 solution/project file in there and you can open it up and compile. 

As long as you are in there…

If you don’t need all the features of the template (i.e., Adaptive Streaming, etc) consider reading James Clarke’s post on removing some of those references and still creating the same template, but with reduced functionality.

Once compiled (remember to choose the right configuration - i.e., Release, Debug - for your needs), you’ll have in the Bin directory of that project the MediaPlayerTemplate.xap file you need. 

Passing parameters

So how can you compile the player template without media?  The Encoder 2 Silvelright 2 templates are completely parameter driven.  If you notice in any existing encoded project output (look at the default.html file generated) you’ll see the object tag used to host the player.  It may look something like this:

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
   2:     <param name="source" value="MediaPlayerTemplate.xap"/>
   3:     <param name="onerror" value="onSilverlightError" />
   4:     <param name="initparams" value='autoplay=True,autoload=True,enablecaptions=True,muted=False,stretchmode=0,displaytimecode=False,playlist=&lt;playList><playListItems><playListItem title="Moonlight%201.0%20Install%20on%20OpenSuse" description="Screencast%20of%20Moonlight%20install%20on%20OpenSuse.%20%20Virtual%20image%20provided%20by%20http://susestudio.com." mediaSource="MoonlightInstall.wmv" adaptiveStreaming="False" thumbSource="" frameRate="14.9669006991039" width="800" height="600" ><chapters><chapter  position="9.674" thumbnailSource="MoonlightInstall_9.674.jpg" title="Silverlight%201.0%20Chess%20playback%20from%20Vertigo" /><chapter  position="13.967" thumbnailSource="MoonlightInstall_13.967.jpg" title="Standard%20Silverlight%20installer%20integrates%20with%20Moonlight%20install%20links." /><chapter  position="18.058" thumbnailSource="MoonlightInstall_18.058.jpg" title="Firefox%20first%20nag%20message%20to%20protect%20user%20from%20web%20installs." /><chapter  position="20.784" thumbnailSource="MoonlightInstall_20.784.jpg" title="Second%20Firefox%20nag%20message%20(plugin%20message%20from%20trusted%20sources)" /><chapter  position="24.543" thumbnailSource="MoonlightInstall_24.543.jpg" title="Plugin%20installation%20complete%252C%20Firefox%20restart" /><chapter  position="32.055" thumbnailSource="MoonlightInstall_32.055.jpg" title="Silverlight%201.0%20Chess%20now%20working%20with%20Linux/Moonlight" /><chapter  position="43.801" thumbnailSource="MoonlightInstall_43.801.jpg" title="Video.Show%20from%20Vertigo" /><chapter  position="46.675" thumbnailSource="MoonlightInstall_46.675.jpg" title="Launching%20a%20media%20player%20in%20Moonlight%20for%20first%20time" /><chapter  position="48.334" thumbnailSource="MoonlightInstall_48.334.jpg" title="Microsoft%20Media%20Pack%20(codecs)%20prompt%20for%20install" /><chapter  position="51.249" thumbnailSource="MoonlightInstall_51.249.jpg" title="Media%20Pack%20EULA" /><chapter  position="60.051" thumbnailSource="MoonlightInstall_60.051.jpg" title="Re-launch%20media%20player%20with%20Media%20Pack%20installed" /><chapter  position="71.010" thumbnailSource="MoonlightInstall_71.010.jpg" title="HD%20media%20playback%20via%20Moonlight%20on%20Linux" /><chapter  position="72.490" thumbnailSource="MoonlightInstall_72.490.jpg" title="Fullscreen%20mode" /><chapter  position="76.138" thumbnailSource="MoonlightInstall_76.138.jpg" title="Bubblemark%20application%20on%20Moonlight" /></chapters></playListItem></playListItems></playList>' />            
   5:     
   6:     <a href="http://go2.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
   7:          <img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
   8:     </a>
   9: </object>
  10: <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

Notice the initParams option?  If you aren’t familiar, you can send Silverlight 2 applications parameters using this method.  There’s a video walk-through on using initParams you can view on the Silverlight community site.  The key area here (among the other options) for media URIs is the playlist parameter.  Singling that one out you’ll see the structure looks like this:

   1: <?xml version="1.0" encoding="utf-8" ?>
   2: <playList>
   3:   <playListItems>
   4:     <playListItem title="Moonlight%201.0%20Install%20on%20OpenSuse" description="Screencast%20of%20Moonlight%20install%20on%20OpenSuse.%20%20Virtual%20image%20provided%20by%20http://susestudio.com." mediaSource="MoonlightInstall.wmv" adaptiveStreaming="False" thumbSource="" frameRate="14.9669006991039" width="800" height="600" >
   5:       <chapters>
   6:         <chapter  position="9.674" thumbnailSource="MoonlightInstall_9.674.jpg" title="Silverlight%201.0%20Chess%20playback%20from%20Vertigo" />
   7:         <chapter  position="13.967" thumbnailSource="MoonlightInstall_13.967.jpg" title="Standard%20Silverlight%20installer%20integrates%20with%20Moonlight%20install%20links." />
   8:         <chapter  position="18.058" thumbnailSource="MoonlightInstall_18.058.jpg" title="Firefox%20first%20nag%20message%20to%20protect%20user%20from%20web%20installs." />
   9:         <chapter  position="20.784" thumbnailSource="MoonlightInstall_20.784.jpg" title="Second%20Firefox%20nag%20message%20(plugin%20message%20from%20trusted%20sources)" />
  10:         <chapter  position="24.543" thumbnailSource="MoonlightInstall_24.543.jpg" title="Plugin%20installation%20complete%252C%20Firefox%20restart" />
  11:         <chapter  position="32.055" thumbnailSource="MoonlightInstall_32.055.jpg" title="Silverlight%201.0%20Chess%20now%20working%20with%20Linux/Moonlight" />
  12:         <chapter  position="43.801" thumbnailSource="MoonlightInstall_43.801.jpg" title="Video.Show%20from%20Vertigo" />
  13:         <chapter  position="46.675" thumbnailSource="MoonlightInstall_46.675.jpg" title="Launching%20a%20media%20player%20in%20Moonlight%20for%20first%20time" />
  14:         <chapter  position="48.334" thumbnailSource="MoonlightInstall_48.334.jpg" title="Microsoft%20Media%20Pack%20(codecs)%20prompt%20for%20install" />
  15:         <chapter  position="51.249" thumbnailSource="MoonlightInstall_51.249.jpg" title="Media%20Pack%20EULA" />
  16:         <chapter  position="60.051" thumbnailSource="MoonlightInstall_60.051.jpg" title="Re-launch%20media%20player%20with%20Media%20Pack%20installed" />
  17:         <chapter  position="71.010" thumbnailSource="MoonlightInstall_71.010.jpg" title="HD%20media%20playback%20via%20Moonlight%20on%20Linux" />
  18:         <chapter  position="72.490" thumbnailSource="MoonlightInstall_72.490.jpg" title="Fullscreen%20mode" />
  19:         <chapter  position="76.138" thumbnailSource="MoonlightInstall_76.138.jpg" title="Bubblemark%20application%20on%20Moonlight" />
  20:       </chapters>
  21:     </playListItem>
  22:   </playListItems>
  23: </playList>

This sample above represents a single media file with chapter markers.  The bare minimum for a single media URI would be:

   1: <playList>
   2:   <playListItems>
   3:     <playListItem mediaSource="MoonlightInstall.wmv"></playListItem>
   4:   </playListItems>
   5: </playList>

So if you have a streaming URI (i.e., mms://mysite.com/live-baseball-game.asx) you would use this playlist structure:

   1: <playList>
   2:   <playListItems>
   3:     <playListItem mediaSource="mms://mysite.com/live-baseball-game.asx"></playListItem>
   4:   </playListItems>
   5: </playList>

and then in your HTML page you could have something like this for the full implementation (noting to use the appropriate width/height for your needs):

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
   2:     <param name="source" value="MediaPlayerTemplate.xap"/>
   3:     <param name="onerror" value="onSilverlightError" />
   4:     <param name="initparams" value='autoplay=True,autoload=True,enablecaptions=True,muted=False,stretchmode=0,displaytimecode=False,playlist=&lt;playList><playListItems><playListItem mediaSource="mms://mysite.com/live-baseball-game.asx"></playListItem></playListItems></playList>' />            
   5:     
   6:     <a href="http://go2.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
   7:          <img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
   8:     </a>
   9: </object>
  10: <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

It is important to note that if you know the other parameters like framerate, etc. you should provide as much information you can for the playListItem node, but I’m just noting the bare minimum above.

Can I do this in code?

Yes, if you were using the media player in code you can still use this method in either XAML as noted in a previous post of mine or in code using something like this:

   1: public Page()
   2:         {
   3:             InitializeComponent();
   4:             Loaded += new RoutedEventHandler(Page_Loaded);
   5:         }
   6:  
   7:         void Page_Loaded(object sender, RoutedEventArgs e)
   8:         {
   9:             ExpressionMediaPlayer.MediaPlayer mp = new ExpressionMediaPlayer.MediaPlayer();
  10:             mp.Width = 800;
  11:             mp.Height = 600;
  12:             ExpressionMediaPlayer.PlaylistItem playListItem = new ExpressionMediaPlayer.PlaylistItem();
  13:             playListItem.MediaUrl = new Uri("mms://mysite.com/live-baseball-game.asx");
  14:             mp.Playlist.Add(playListItem);
  15:             LayoutRoot.Children.Add(mp);
  16:         }

I suspect people would not be using the code concept as much but I just wanted to point it out here.

Summary

So having the MediaPlayerTemplate.xap file is really all you need.  Anything else can be sent as parameters either via the object tag, the XAML control or in code.  This enables being able to really re-use the template you desire without having to run an encoder job just to get the template and change the code.

Hope this helps!

| Comments

In an email dialog today I saw someone asking how he could use an existing Encoder 2 template for existing media or streaming URIs when you don’t have something to encode.  After a few explanations, he replied that someone should blog this – and I agree :-).

So what did he mean?  Well, when you use Expression Encoder, you are typically going to be encoding media to a format to consume.  Encoder also gives you an additional option in the output settings to generate a media player for that encoded content.  These are all based on templates that I’ve previously written about that are available in the product as well is the source code for you to extend.

But what if you have a media file that doesn’t need encoding or you have a streaming URI and you don’t need to encode anything, but want the player?  To some it might not be so obvious so let me try to walk you through the steps.

You need the player

First you need the player.  The XAP that is, of the template you want to use.  There are essentially two ways of going about getting this:

    1. Getting the MediaPlayerTemplate.xap file from an existing output you already did (that used the same template you want)
    2. Building the XAP using the source of the templates and building it from scratch (requires .NET compiler or Visual Studio)

Obviously if you have the XAP of your desired template, you are ready to proceed.  If you don’t, then you’ll need to proceed to step 2.  Here’s what you’ll do:

Building the Player

First, find the template you want.  These are located in C:\Program Files\Microsoft Expression\Encoder 2\Templates\en (note: if you are on 64-bit or a different language, this path may differ slightly).  Within here you’ll see a list of templates by name.  Find the one you want and within that folder there is a Source directory.  That’s what you want.  I highly recommend actually moving the source files to a different place rather than edit directly in the templates directory.  There is a Visual Studio 2008 solution/project file in there and you can open it up and compile. 

As long as you are in there…

If you don’t need all the features of the template (i.e., Adaptive Streaming, etc) consider reading James Clarke’s post on removing some of those references and still creating the same template, but with reduced functionality.

Once compiled (remember to choose the right configuration - i.e., Release, Debug - for your needs), you’ll have in the Bin directory of that project the MediaPlayerTemplate.xap file you need. 

Passing parameters

So how can you compile the player template without media?  The Encoder 2 Silvelright 2 templates are completely parameter driven.  If you notice in any existing encoded project output (look at the default.html file generated) you’ll see the object tag used to host the player.  It may look something like this:

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
   2:     <param name="source" value="MediaPlayerTemplate.xap"/>
   3:     <param name="onerror" value="onSilverlightError" />
   4:     <param name="initparams" value='autoplay=True,autoload=True,enablecaptions=True,muted=False,stretchmode=0,displaytimecode=False,playlist=&lt;playList><playListItems><playListItem title="Moonlight%201.0%20Install%20on%20OpenSuse" description="Screencast%20of%20Moonlight%20install%20on%20OpenSuse.%20%20Virtual%20image%20provided%20by%20http://susestudio.com." mediaSource="MoonlightInstall.wmv" adaptiveStreaming="False" thumbSource="" frameRate="14.9669006991039" width="800" height="600" ><chapters><chapter  position="9.674" thumbnailSource="MoonlightInstall_9.674.jpg" title="Silverlight%201.0%20Chess%20playback%20from%20Vertigo" /><chapter  position="13.967" thumbnailSource="MoonlightInstall_13.967.jpg" title="Standard%20Silverlight%20installer%20integrates%20with%20Moonlight%20install%20links." /><chapter  position="18.058" thumbnailSource="MoonlightInstall_18.058.jpg" title="Firefox%20first%20nag%20message%20to%20protect%20user%20from%20web%20installs." /><chapter  position="20.784" thumbnailSource="MoonlightInstall_20.784.jpg" title="Second%20Firefox%20nag%20message%20(plugin%20message%20from%20trusted%20sources)" /><chapter  position="24.543" thumbnailSource="MoonlightInstall_24.543.jpg" title="Plugin%20installation%20complete%252C%20Firefox%20restart" /><chapter  position="32.055" thumbnailSource="MoonlightInstall_32.055.jpg" title="Silverlight%201.0%20Chess%20now%20working%20with%20Linux/Moonlight" /><chapter  position="43.801" thumbnailSource="MoonlightInstall_43.801.jpg" title="Video.Show%20from%20Vertigo" /><chapter  position="46.675" thumbnailSource="MoonlightInstall_46.675.jpg" title="Launching%20a%20media%20player%20in%20Moonlight%20for%20first%20time" /><chapter  position="48.334" thumbnailSource="MoonlightInstall_48.334.jpg" title="Microsoft%20Media%20Pack%20(codecs)%20prompt%20for%20install" /><chapter  position="51.249" thumbnailSource="MoonlightInstall_51.249.jpg" title="Media%20Pack%20EULA" /><chapter  position="60.051" thumbnailSource="MoonlightInstall_60.051.jpg" title="Re-launch%20media%20player%20with%20Media%20Pack%20installed" /><chapter  position="71.010" thumbnailSource="MoonlightInstall_71.010.jpg" title="HD%20media%20playback%20via%20Moonlight%20on%20Linux" /><chapter  position="72.490" thumbnailSource="MoonlightInstall_72.490.jpg" title="Fullscreen%20mode" /><chapter  position="76.138" thumbnailSource="MoonlightInstall_76.138.jpg" title="Bubblemark%20application%20on%20Moonlight" /></chapters></playListItem></playListItems></playList>' />            
   5:     
   6:     <a href="http://go2.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
   7:          <img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
   8:     </a>
   9: </object>
  10: <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

Notice the initParams option?  If you aren’t familiar, you can send Silverlight 2 applications parameters using this method.  There’s a video walk-through on using initParams you can view on the Silverlight community site.  The key area here (among the other options) for media URIs is the playlist parameter.  Singling that one out you’ll see the structure looks like this:

   1: <?xml version="1.0" encoding="utf-8" ?>
   2: <playList>
   3:   <playListItems>
   4:     <playListItem title="Moonlight%201.0%20Install%20on%20OpenSuse" description="Screencast%20of%20Moonlight%20install%20on%20OpenSuse.%20%20Virtual%20image%20provided%20by%20http://susestudio.com." mediaSource="MoonlightInstall.wmv" adaptiveStreaming="False" thumbSource="" frameRate="14.9669006991039" width="800" height="600" >
   5:       <chapters>
   6:         <chapter  position="9.674" thumbnailSource="MoonlightInstall_9.674.jpg" title="Silverlight%201.0%20Chess%20playback%20from%20Vertigo" />
   7:         <chapter  position="13.967" thumbnailSource="MoonlightInstall_13.967.jpg" title="Standard%20Silverlight%20installer%20integrates%20with%20Moonlight%20install%20links." />
   8:         <chapter  position="18.058" thumbnailSource="MoonlightInstall_18.058.jpg" title="Firefox%20first%20nag%20message%20to%20protect%20user%20from%20web%20installs." />
   9:         <chapter  position="20.784" thumbnailSource="MoonlightInstall_20.784.jpg" title="Second%20Firefox%20nag%20message%20(plugin%20message%20from%20trusted%20sources)" />
  10:         <chapter  position="24.543" thumbnailSource="MoonlightInstall_24.543.jpg" title="Plugin%20installation%20complete%252C%20Firefox%20restart" />
  11:         <chapter  position="32.055" thumbnailSource="MoonlightInstall_32.055.jpg" title="Silverlight%201.0%20Chess%20now%20working%20with%20Linux/Moonlight" />
  12:         <chapter  position="43.801" thumbnailSource="MoonlightInstall_43.801.jpg" title="Video.Show%20from%20Vertigo" />
  13:         <chapter  position="46.675" thumbnailSource="MoonlightInstall_46.675.jpg" title="Launching%20a%20media%20player%20in%20Moonlight%20for%20first%20time" />
  14:         <chapter  position="48.334" thumbnailSource="MoonlightInstall_48.334.jpg" title="Microsoft%20Media%20Pack%20(codecs)%20prompt%20for%20install" />
  15:         <chapter  position="51.249" thumbnailSource="MoonlightInstall_51.249.jpg" title="Media%20Pack%20EULA" />
  16:         <chapter  position="60.051" thumbnailSource="MoonlightInstall_60.051.jpg" title="Re-launch%20media%20player%20with%20Media%20Pack%20installed" />
  17:         <chapter  position="71.010" thumbnailSource="MoonlightInstall_71.010.jpg" title="HD%20media%20playback%20via%20Moonlight%20on%20Linux" />
  18:         <chapter  position="72.490" thumbnailSource="MoonlightInstall_72.490.jpg" title="Fullscreen%20mode" />
  19:         <chapter  position="76.138" thumbnailSource="MoonlightInstall_76.138.jpg" title="Bubblemark%20application%20on%20Moonlight" />
  20:       </chapters>
  21:     </playListItem>
  22:   </playListItems>
  23: </playList>

This sample above represents a single media file with chapter markers.  The bare minimum for a single media URI would be:

   1: <playList>
   2:   <playListItems>
   3:     <playListItem mediaSource="MoonlightInstall.wmv"></playListItem>
   4:   </playListItems>
   5: </playList>

So if you have a streaming URI (i.e., mms://mysite.com/live-baseball-game.asx) you would use this playlist structure:

   1: <playList>
   2:   <playListItems>
   3:     <playListItem mediaSource="mms://mysite.com/live-baseball-game.asx"></playListItem>
   4:   </playListItems>
   5: </playList>

and then in your HTML page you could have something like this for the full implementation (noting to use the appropriate width/height for your needs):

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
   2:     <param name="source" value="MediaPlayerTemplate.xap"/>
   3:     <param name="onerror" value="onSilverlightError" />
   4:     <param name="initparams" value='autoplay=True,autoload=True,enablecaptions=True,muted=False,stretchmode=0,displaytimecode=False,playlist=&lt;playList><playListItems><playListItem mediaSource="mms://mysite.com/live-baseball-game.asx"></playListItem></playListItems></playList>' />            
   5:     
   6:     <a href="http://go2.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
   7:          <img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
   8:     </a>
   9: </object>
  10: <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>

It is important to note that if you know the other parameters like framerate, etc. you should provide as much information you can for the playListItem node, but I’m just noting the bare minimum above.

Can I do this in code?

Yes, if you were using the media player in code you can still use this method in either XAML as noted in a previous post of mine or in code using something like this:

   1: public Page()
   2:         {
   3:             InitializeComponent();
   4:             Loaded += new RoutedEventHandler(Page_Loaded);
   5:         }
   6:  
   7:         void Page_Loaded(object sender, RoutedEventArgs e)
   8:         {
   9:             ExpressionMediaPlayer.MediaPlayer mp = new ExpressionMediaPlayer.MediaPlayer();
  10:             mp.Width = 800;
  11:             mp.Height = 600;
  12:             ExpressionMediaPlayer.PlaylistItem playListItem = new ExpressionMediaPlayer.PlaylistItem();
  13:             playListItem.MediaUrl = new Uri("mms://mysite.com/live-baseball-game.asx");
  14:             mp.Playlist.Add(playListItem);
  15:             LayoutRoot.Children.Add(mp);
  16:         }

I suspect people would not be using the code concept as much but I just wanted to point it out here.

Summary

So having the MediaPlayerTemplate.xap file is really all you need.  Anything else can be sent as parameters either via the object tag, the XAML control or in code.  This enables being able to really re-use the template you desire without having to run an encoder job just to get the template and change the code.

Hope this helps!

| Comments

The Expression Encoder team has announced the plans for SP1 of their product (announced, not released).  You can read all the details on their team blog for more information, but two things caught my attention that are probably of most interest: H.264 encoding and a Silverlight 2 template in the box.

The H.264/AAC encoding support is a result of customer feedback (as well as preparing for future Silverlight support).  While the profiles in this service pack will be limited and may not meet the needs of everyone immediately, it is a great step and will probably meet the needs of most.

The templates produced by Encoder 2 right now have been Silverlight 1.0 templates.  This has been a sore spot for some wanting to move to Silverlight 2 and remove themselves from all the javascript that the templates have.  There have been a lot of solutions popping up (shameless plug: SL2VideoPlayer on Codeplex), but people still want the template in the box (note: you can do this with your SL2 players today as well).  The team announced they will be providing SL2 templates based on a core control called MediaPlayer which supports a wide range of features.  As you could imagine the template will support basic and advanced playback capabilities and will be able to be styled as well as advanced property manipulation in Expression Blend.  This one feature caught my eye and makes me happy:

Byte-range seeking: When a user clicks forward on the timeline into a non-downloaded region, the player will cancel the current progressive download and start a new one from the point that has been seeked to.

Sweet.  I can’t wait.  The SP1 will happen by the end of the year and will be a free upgrade to existing Encoder 2 customers.

| Comments

Now that the Silverlight 2 Video Player is available from Codeplex, I wanted to make it a template for Expression Encoder.  I’ll attempt to articulate the steps below.  It’s actually pretty trivial.  In fact in the current incarnation, you have to throw some extra stuff in there you may not need :-).

Step 1 – Creating the template folder

While I’ve covered this in previous posts and this is also well documented in the Encoder SDK documentation.

First you’ll navigate to C:\Program Files\Microsoft Expression\Encoder 2\Templates\en and you’ll see the existing template folders.  The folders do not represent the name of the template in the Encoder UI, so don’t worry about that.  Create a folder here.  I called mine SL2VideoPlayer.

Step 2 – Creating the hosting page

Go into that folder and we’ll start creating some files here.  We’ll need the XAP from our media player (in my case VideoPlayer.xap) and simply place it in here.  We’ll also want to put a snapshot of our player here.  You can really name it to be anything, but I’m a fan of consistency and other templates call it preview.jpg so I stuck with that.  I recommend a proportionate image size.  You’ll notice the other templates don’t have this image anymore in Encoder 2.  That’s because their preview actually renders the player in Silverlight.  I’ll be honest here and tell you I haven’t messed around enough to know how to enable that, but my static preview image works and I’m sticking with that as it serves its purpose.

The main file we’ll need here is a hosting page.  I’ve called mine default.html again for consistency.  It is here where we have the magic happen.  In fact this step bleeds into the next 2 steps.  For now, you’ll want to create your hosting page that will host the Silverlight player.  This can be basic or elaborate…just create one.  In the next step we’ll make it wake up.

For me I just took the test page format provided to me by Visual Studio 2008 and the Silverlight project template.

Step 3 – Creating parameters for Encoder

Having a static page is nice, but doesn’t really help Encoder understand what we mean.  To our hosting page let’s add some parameters.  Encoder’s build process understands a certain set of parameters that are helpful for us.  It isn’t the intention of this post to emit them all to you, that’s what the SDK is for, but I’ll point out some key ones.  Let’s take a look at the ‘header’ of our hosting page:

   1: <!-- <[email protected] Options LaunchPage="true"$> -->
   2: <!-- <[email protected] Options Name="Silverlight 2 Video Player"$> -->
   3: <!-- <[email protected] Options TemplatePreviewImage="preview.JPG"$> -->

These are the first 3 lines of my default.html page.  They should be pretty self explanatory.  You can see now where the Encoder UI gets the template name from.  The next few lines immediately after this are interesting.  Here’s what my template looks like (after the first 3 lines above):

   1: <!-- <[email protected] Parameter Name="AutoPlay" Caption="Automatically start video when cued" Tooltip="Select to begin playback when video is loaded" Type="System.Boolean" Default="False" $> -->
   2: <!-- <[email protected] Parameter Name="EnableCaptions" Caption="Allow closed captions to show" Tooltip="Select to allow closed caption text over video during playback"Type="System.Boolean" Default="False" $> -->
   3: <!-- <[email protected] Parameter Name="Muted" Caption="Mute player on start" Tooltip="Select to begin playback in a muted state" Type="System.Boolean" Default="False" $> -->
   4: <!-- <[email protected] Parameter Name="MediaMarkers" Caption="Enable Media Marker Animations" Tooltip="Select to enable animations to appear when media markers are found" Type="System.Boolean" Default="False" $> -->
   5: <!-- <[email protected] Parameter Name="ScaleMode" Caption="Stretch Mode" Tooltip="Change the way the template is displayed on the page" Type="System.Enum" EnumValues="Profile Size=1,Stretch=2" Default="Profile Size" $> -->

Okay, these may need a bit more understanding.  Let’s dissect one of them a bit as the all are of type parameter.  First the Name – this is what will be known to your code later (in step 4) so this is really an internal name…not visible to the user.  The second attribute, Caption, will be seen to your user and should be descriptive, but concise.  Tooltip is, well, a tooltip…and if you don’t know what that is, maybe you shouldn’t be customizing templates?  Type is the data type of your parameter…these are standard .NET types like System.String, System.Boolean, etc.  The final attribute, Default, is exactly what it sounds like – providing a default value for the parameter.  At this point you may be asking yourself: How is the user providing input to these values? and that would be a great question.

You see, when you add parameters to your template they show up as advanced options to the template.  Let’s look at Encoder 2 after we’ve selected our template.  Notice the template name and then the expander decorator:

If you expand these advanced properties you’ll see your parameters.  Here’s my setup for the SL2VideoPlayer template:

Pretty cool, huh?  You can totally provide your users of your template the option to provide input parameters.  Now my params are pretty obvious but you could probably think of some other creative uses.  But we didn’t have to do anything to get some of this free UI goodness!  Now we have our template selectable and our users can provide certain parameters…let’s see how we can use them.

Step 4 – Reading the parameters in the template

We’ve got the input parameters, how do we use them?  Well for my input parameters, these directly translate to initParams for my Silverlight application.  However regardless there are some other things you can get other than parameters.  Again, I’ll defer to the full Encoder SDK, but since you are encoding a file, I’m guessing at least the output of that file is an important attribute you’ll want to be aware of.  Again, let’s take a look at other code in my default.html template where I use code to get at these parameters:

   1: <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" 
   2:     <$ if (TemplateParameter.ScaleMode == "1") { $>width="<$=PublishedItems[0].MediaItem.VideoSize.Width$>" 
   3:     height="<$=PublishedItems[0].MediaItem.VideoSize.Height$>"<$}else{$>width="100%" height="100%"<$}$>>
   4:         <param name="source" value="VideoPlayer.xap"/>
   5:         <param name="onerror" value="onSilverlightError" />
   6:         <param name="background" value="white" />
   7:         <param name="initParams" value="autostart=<$=TemplateParameter.AutoPlay$>,muted=<$=TemplateParameter.Muted$>,
   8:             captions=<$=TemplateParameter.EnableCaptions$>,markers=<$=TemplateParameter.MediaMarkers$>,
   9:             m=<$=PublishedItems[0].OutputFileName$>" />
  10:         <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
  11:              <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
  12:         </a>
  13: </object>

See some familiar code here?  the “<$>” decoration is instructing the Encoder build process that this is code to be executed.  What kind of code?  .NET baby.  My example is very, very simple here and in fact I’m just extracting attributes.  The SDK has examples of more advanced techniques should you need them.

You can see the use of TemplateParameter that enables me to get at the parameter configuration options that we’ve provided to the user.  I just retrieve them, can inspect them, etc.  Some of them I’m just passing in the parameter, others I’m acting upon.

The one thing that you’ll want to familiarize yourself with is the PublishedItems model.  This represents the Encoder job activities.  You can see that my reference actually uses an index of 0.  This is because Encoder supports encoding multiple files at once and your output could contain more than one file.  This could be helpful in creating a template that uses multiple media sources and you are creating a visual playlist feature.  For me, I’m just using one, so I grab the first item.  I can then reflect on properties of that published item such as name, video size of the media, etc.  A very helpful and powerful little scripting-looking language that can be leveraged to really customize your template.

Using this code we now have our default.html file that in the end will be complete and have all our HTML provided for us.  I should note that the attributes in the header of the page will not be emitted.

Step 5 – Additional File(s)

What is really cool is that the process looks at other files in your template to see if they need to be acted upon as well.  So if you have javascript or other files that might need to be dynamic based on output, you can use the same coding methods as above in other files – it doesn’t all have to live in default.html at all!

Step 6 – Prepare the template for Silverlight Streaming

At this point our template will work.  We can import a video media asset, choose our template and click Encode.  After encoding the start page will launch with our options passed in and render.  But what about the next step?  What if I wanted to upload to Silverlight Streaming Services to host my media and application.  Well, I know that there is already a plugin that allows a quick upload for this – the SLSPlugin.  How can we tap into this?  I thought that I’d be able to just click publish and it would work, but that isn’t the case.

First the plugin expects at least one XAML file to exist…and we have a XAP.  So trick one, create foo.xaml with nothing in it and put it in the template folder.  Done.

Second, it expects a manifest.xml file to exist.  This is because the plugin is packaging our template assets into a ZIP that Silverlight Streaming understands for multiple assets.  This requires a manifest definition file that is a part of that ZIP.  So I create a manifest.xml file and put it in my template directory.  Remember step 5?  In my manifest I have it with some code as well:

   1: <SilverlightApp>
   2:   <source>VideoPlayer.xap</source>
   3:   <version>2.0</version>
   4:   <name><$=PublishedItems[0].MediaItem.Name$></name>
   5:     <$if (TemplateParameter.ScaleMode == "1") {$>
   6:         <width><$=PublishedItems[0].MediaItem.VideoSize.Width$></width>
   7:         <height><$=PublishedItems[0].MediaItem.VideoSize.Height$></height>
   8:     <$}$>
   9: </SilverlightApp>

So my manfiest is dynamically generated based on the output as well.  This file is created as a part of the encode process and is not a part of the default.html file…so you can see an example of separate files being able to access the parameters as well as the PublishedItems collection as well.  Now that the file is created it can get packaged into the app!

However, with my implementation of SL2 Video Player I run into a snag.  You see the default.html page is great and we can use it and it supplies all of our needs because we are using initParams.  However SLS doesn’t use our hosting page.  It generates it’s own HTML hosting page and creates the Silverlight object using createObject.  This is fine except for one thing: it doesn’t currently support initParams.  Yes I know createObject does, but SLS hasn’t built in the support to use those yet.  So alas, my final step here for my particular use is broken :-(.  I’m working with the SLS guys to implement initParams support much easier.  I’d love to see it a part of the manfiest options so I could have:

   1: <SilverlightApp>
   2:     <source>VideoPlayer.xap</source>
   3:     <initParams>m=foo.wmv,captions=true</initParams>
   4: </SilverlightApp>

And then the solution would be complete and life would be glorious.  We’ll let you know when that happens.

Summary

In brief summary hopefully this let’s you see some of the options you have for still being able to use Silverlight 2 in your Encoder 2 workflow.  The SDK provides a way for us to get integrated into the encoding pipeline and do our customizations.  It’s simple to do and will only get better.  You can download my complete template example here.  Please note that this was based on an earlier build of the SL2 Video Player.  The project has been progressing and you can get the latest version of the player at the Codeplex project site.

| Comments

I’ve seen this issue a few times with people using the Manage Videos portion of Silverlight Streaming to directly upload a video file to be hosted.  Now with direct endpoints to the WMV files I’m seeing it a bit more.  Let me see if I can shed some light on this situation.

First, there is a distinction between uploading an application to Silverlight Streaming versus just a video.  What I’m going to discuss here is working with video only uploads.  If you didn’t know, you can directly upload just a video and Silverlight Streaming will host that file and create a Silverlight player experience for you as well (if you want it).

Okay, now on to the issue.  It is important to note that there are specific size limitations of videos with Silverlight Streaming services.  If you are trying to go beyond those size limitations your issue could be that right away.  The video file size must be smaller than 105MB.  Moving on…

Some of you may have attempted to upload a video and then directed to the page that shows the video processing and seen a “Video cannot be processed” message. 

Your issue could be related to what I’ll explain here.  It’s a bug.  We released the Silverlight Streaming transcoding (upload video turnkey only) service when Expression Encoder 2 was not yet released.  When Encoder 2 shipped, we realized that it wasn’t playing nice (the outputs rather) with the transcoding service.  We have to fix this and are working on it.  If you are taking a video source, running it through Expression Encoder 2 and then trying to upload that resulting video, you may be hitting this issue.

One thing to note, is that the “upload video” is a transcoding service.  So if you already have a VC-1 (or Silverlight capable) media format WMV, there really is no need to use the upload video portion.  You already have a high-quality encoded format and don’t need to transcode that again.  So how do you get it up there if this issue exists?  A few ways.

Option 1 – Upload an Application with a manifest

You can package the video file up with an application and use the Manage Applications functionality to upload that content.  You can use one of the Encoder templates if you’d like as well.  Even though you may not need the extra files, that is okay, because you can still have an endpoint to your WMV if that is what you want.  Since we don’t have the Silverlght Streaming Publish plug-in for Expression Encoder 2 complete yet (it is coming), here is a workaround on how to create those packages.

Option 2 – Upload the file direct with the API

While maybe not flexible for some, you can upload the file as an application directly using the API which doesn’t require a ZIP format for this purpose.  More information on the methods and API you would need can be found here.  The API is a WebDAV-based API for managing applications.

Option 3 – Name your WMV file to ‘video.wmv’ and upload as an application

Before you do any operation rename your file to ‘video.wmv’ and then go to the Manage Applications area of Silverlight Streaming.  Create a new application and give it a name, then in the next screen upload the ‘video.wmv’ file you just renamed.  After completion you can go to the Manage Videos section of the administration site and see your video.

We understand this may be a problem for some of you and are doing our best to address it as soon as possible.  Please note this is only an issue for Expression Encoder 2 file outputs that are attempting to be uploaded via the Silverlight Streaming transcoding service (aka Manage Videos) section.

Hope this helps!