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.
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.
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.