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:
- Getting the MediaPlayerTemplate.xap file from an existing output you already did (that used the same template you want)
- 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=<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=<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!
