banner
Workin' on Windows running on Windows Azure.
Posts
 
Previous Next 

One of the areas we invested in heavily for Expression Encoder 2 was in our Silverlight player templates.  In V1 and V2 of Expression Encoder, these were built using the Javascript/XAML programming model.  We had to create our own control framework since controls didn't exist in Silverlight.  After some prototyping prior to Mix 08 where we ported the Javascript BasePlayer to managed code, we decided to rebuild the templates from scratch taking advantage of the new skinning and control model that come in Silverlight 2. In this post I want to drill into the resulting code a little bit and shed a little light on how we structured the new templates and how to use them.

Template Project Structure.

Once you've installed Expression Encoder Service Pack 1, you can get at the templates we ship by going to:

%programfiles%\Microsoft Expression\Encoder 2\Templates\en\

In here, the new ones are SL2Standard, SL2Gallery, SL2AudioOnly, BlackGlass, GoldenAudio and FrostedGallery.  You may wonder why we didn't port all of the templates to Silverlight 2; the answer is simply that we didn't have enough time.

Within each template, the project structure is as follows:

  • MediaPlayer: this is the core custom control
  • ExpressionPlayer: this is a derived player that implements some specific behavior that we didn't feel was general enough to include in the base MediaPlayer control.
  • AdaptiveStreaming: this is the client portion of our implementation of IIS Smooth Streaming.  I'll cover this in a future post.
  • Template: this is project that is responsible for bootstrapping the Silverlight player into a web page.  It also handles the injection of the playlist items.

Inside MediaPlayer

The MediaPlayer control was built to raise the abstraction bar for designers and developers above the relatively low-level MediaElement (a rectangle for rendering videos) to a control that encompasses common user interactions.  As such it solves problems such as client-side playlists, scrubbing, captioning, display of partial download progress, display of graphical chapter points and much more all in a look-less fashion.  It also contains a number of other building block controls notably SensitiveSlider, StretchBox, DownloadProgressBar and SizeConstrainer which each implement unique functionality required by the MediaPlayer.  These are all independently skinnable.  Here is a quick review of what these controls do:

SensitiveSlider is a special type of slider that a) responds to absolute clicks with snapping (like IsMoveToPointEnabled in WPF), b) controls when property changed values are fired to enable scrubbing.

StretchBox is quite close to a ViewBox in WPF but is primarily for making its contents smaller once their minimum size has been reached.  Then there is more space available than the minimum, the child control is given as much space as available. 

DownloadProgressBar is derived from ProgressBar but with an added property for specifying a minimum value. This value enables the progress bar to show download progress in the case where a byte range seek has occurred and the downloading is offset from the start of the file.

SizeConstrainer is a control that subtly alters the way table sizing works such that the child item of SizeConstrainer doesn't get to effect the size of a grid cell that is sizing to Auto. In practice this enables a table to host two columns; one containing mediaelement (who's size effects the height of the grid row it lives in) and one containing a SizeConstrainer wrapping a listbox.

The MediaPlayer control ships with a default control template that provides the default buttons, sliders and other controls.  This makes it possible to instantiate the control thusly: 

More on this in a bit..

Creating a Custom Player Template

Creating a custom Expression Encoder skin is as easy as it was in previous versions: simply select Edit copy in Blend from the white dot menu. This allows you to start with one of our defaults and restyle.

Once in Blend you can customize the template to your heart's content. The key to doing this is to edit a copy of the ControlTemplate for MediaPlayer from the context menu. In Blend:

In Expression Encoder 2 SP1 we also added the ability to edit templates in Visual Studio.

Debugging output

The primary case where you will want to debug a Silverlight template is when it has some content in it; in other words after the template has been through the encode process and is part of a job. I will cover the different ways of debugging templates my next post.

Using MediaPlayer outside of an Expression Encoder template

Going forwards we will make it easier for users to create projects that incorporate a MediaPlayer. For now you need to follow some basic steps: Tim Heuer does a great job of covering how to do this here.

Comments[2]
  1. 1. Made by Pawan Venugopal on 9/21/2009 7:55:00 PM

    Hi Clark, I am planning to build a sample application using Expression Encoder 3 + silverlight 3 + IIS Smooth Streaming. My first step is that i will like to upload a video file from web using silverlight 3 and it passes the video file into the Expression encoder 3 to encode it and the output file is updated to the playlist on the fly where the user when clicks the output file image can view the video which incoprates smooth streaming. Can you tell me how to achive this. or some links or samples which basically incoprates these kind of functionality. Can th prior be achived. -Pawan


  2. 2. Made by karthik on 3/5/2010 12:21:04 PM

    Hi James, I want to get sliders,playpause button control of media player in xaml, so that I can trigger event on clicking those control. Can you help me on that??


 Name
  email (will not be shown)
 web site


Close

9/19/2014 9:51:47 PM