Building a custom video player with the Player Framework for the web, desktop and the phone

You can’t think of the web without video these days it seems. And even on the phone we see more and more video as networks get more speed. If you want to build an application or website that shows video, how can you do that easily? The Microsoft Media Platform Player Framework, formerly known as Silverlight Media Framework, is a very useful and powerful toolkit for using a video player. There is support for various types of video/audio, use of advertisement (VAST/MAST/VPAID), markers, captions and more. And even better, you can customize that player to your needs. That means that you can determine what the framework does for you, you can extend it with your functionality, and you can customize the UI of the player.

In this post I want to talk about the customization of the UI of the player. The default look-and-feel and functionality of the player is great for an out-of-the-box experience. But often you want to tailor it to your needs and style. But when you’ve installed the player framework, it’s not always that obvious how you could or should modify the UI. There is documentation on various scenario’s of use for the player, as well as a CHM-file on the API. There is more on the UI in the Samples.Web project when you have installed the sources of the player framework as well (available in the download section on codeplex). This post, and in more detail my embedded session of the Dutch DevDays 2011 (at the end of this post), will show in more detail how to modify the UI.

Installing the Player Framework

To get the player framework, first you go to http://smf.codeplex.com (new http://playerframework.codeplex.com . On the download page you’ll find all the available downloads. The best one to use is the Full Installer (MSI) that can be found under the Additional Downloads. That installer will install all the binaries under %ProgramFiles%/Microsoft SDKs/Microsoft Silverlight Media Framework/[version]. It will also install the IIS Client SDK for Smooth Streaming 1.5 and templates for use with Visual Studio.

UnblockZip

Templates for Blend

If you want to have templates for Blend, download the Blend template I created for Player Framework v2.5 and Blend 4.0.

When on Vista or Windows 7, unblock the zip-file before extracting. To unblock, right-click the downloaded zip-file, select Properties. In the dialog click Unblock like in the picture on the left.

Right-click the zip-file and select Extract All. Select the “My Documents” folder as the target for the files. On Windows 7 it’s C:\Users\[username]\Documents.

Press the Extract button to unpack. Confirm that you want to merge the folders. The templates are now installed for use with Blend.

 

Getting started

It’s easy to start a new project based on the player. Start Visual Studio 2010 (or Expression Blend if you have installed the templates as described above) and select New Project …. Choose the Smooth Streaming or the Progressive Download template as project type. You can immediately run that project, as it contains a MainPage with a player control and a sample stream on the web to play.

Properties of the Player control

The SMF Player control has a number of properties that influence the behavior and functionality. It’s best to use Expression Blend to see the properties. Without going through the complete list, these are a few of the important ones.

In the Common Properties section:

  • AutoPlay to start playing the first playlist item when the control is loaded
  • Playlist (collection). The ellipses button takes you to a separate screen where playlist items can be added

In the Player Controls section:

  • IsControlStripVisible to hide or show the control strip
  • PlaylistVisibility to disable, hide or show the playlist (and potentially the Playlist button)

The template of the Player control

To change other things beyond what’s being exposed through the properties, we have to go into the template of the player. To do this, right-click the Player control in Blend and select Edit Template and Edit a Copy ….

EditTemplate

After that you see a dialog to ask for a name of your template copy and a location to store it. By default it’s in the page you’re in, but it’s a better idea to store it in a separate Resource Dictionary. Click the New… button to create a new Resource Dictionary in your project. Give the template a name and press OK.

You are now inside the UI definition for the Player control. Here you things like Grids, Buttons and more with styles that make up the UI of the Player control. There are also items with a special icon with a green check-mark after some of the elements. Those are TemplateParts.

TemplateParts are a special link between code of the control and the UI. In the definition in the code of the control is defined what base-class they should be (for instance a ButtonBase) and what the name of the element is so it can be found by the code. It’s important to understand this construct so you know how to work with the template.

BasicTemplateAnother important thing to understand is that the Player Framework uses a plugin structure to dynamically add functionality to the player. There are plugins for progressive downloads (and normal streaming), for smooth streaming, logging and more.

One of the elements in the template is the MediaPresenterElement. This is of type ContentControl. The player framework uses this control to dynamically load the appropriate MediaElement to show the video.

The ControllerContainer is probably the most interesting one if you want to change the look and feel of the player. This Grid is the strip with the player controls like play/pause (PlayElement), time track (TimelineElement, CurrentPositionElement, CurrentDurationElement), volume (VolumeElement) and full screen toggle (FullScreenToggleElement).

The PlayerRoot at the top of the template is a Grid with five rows. Most of them are auto sized. By default the ControllerContainer is in the fifth row (Row 4 as we start counting at 0) of the grid. So if you want to position the controlstrip at the top, just set the Row property of the ControllerContainer to 0 and the VerticalAlighment to Top.

Change the basic colors (with a fix)

The template of the player control in the current version of the Player Framework has some issues that make it a bit harder to make simple changes. To make your life a bit more easy to change it, take these steps before you do any of the other changes you plan.

For the PlayElement and the VolumeElement, take these steps:

  1. Right-click the control and select Edit Template, Edit a Copy…
  2. You can change the style name and remove the trailing “1”. Press OK.
  3. Click the arrow icon above the Template-element in Objects and Timeline to scope up again.

For the SlowMotionElement and the FullScreenToggleElement, take these steps:

  1. Right-click the control and select Edit Template, Edit Current
  2. Select the background element and flip it vertical (Menu Object, Flip, Vertical or Ctrl+Shift+4), set the Fill to btnBaseGradient resource, and the Stroke to the btnStrokeGradient resource.
  3. Select the background_hover element and flip it vertical (Menu Object, Flip, Vertical or Ctrl+Shift+4), set the Fill to btnBasePressed resource, and the Stroke to the btnStrokeGradient resource.
  4. If available, select the background_checked element and flip it vertical (Menu Object, Flip, Vertical or Ctrl+Shift+4), set the Fill to btnBasePressed resource, and the Stroke to the btnStrokeGradient resource.
  5. Click the arrow icon above the Template-element in Objects and Timeline to scope up again.

To change colors of the template, change the resources btnBaseGradient and btnBasePressed. If you also change the Fill property of the ControllerContainer, you have made the most important changes to change the color.

Hide and show the control strip on mouse movement

It’s easy to hide and show the control strip on mouse movement … if you know how. To give an easy example, make these changes to the Layout properties of ControllerContainer:

  1. Set Row to 0
  2. Set VerticalAlignment to Bottom
  3. Set the Left and Right Margin to 10
  4. Set the Bottom Margin to 40

The control strip now hovers over the video. Set the Opacity (under Appearance) to 0%. Next thing to do is to define a Storyboard. Create a new one and give it a name (e.g. ToggleControllerContainerVisibility). Define these storyboard-keyframes:

  1. At 0,2s set the opacity of the ControllerContainer to 100%
  2. At 5s record a keyframe (with the RecordKeyframe icon in the storyboard pane) to fix the opacity setting
  3. At 5,5s set the opacity of the ControllerContainer to 0%

Now the storyboard is defined, we have to trigger it. We could do that in code, but that’s more complex. Instead we use a behavior for that. Behaviors can be found in the Assets pane. Drag the ControlStoryboardAction to the PlayerRoot. In the properties of the behavior set the EventName to MouseMove and the Storyboard to the storyboard you just created.

StoryboardAction

Because of the definition of the storyboard it will begin a 5 second timer every time we move the mouse, so it stays visible if it’s already there.

Change the complete UI to your design

If you have a visual design of your player (e.g. in Photoshop), there are a few tips that can be useful:

  • Understand the TemplateParts construction (name of elements are crucial)
  • Because of the extra attributes on controls in the original template, it’s better to change the visuals in the containers and templates. Don’t start with clean visuals and turn them into TemplateParts, as you will miss vital settings.
  • Use Template-databinding and relative-source databinding for showing data. Inspect the original template in XAML mode for more details.

Presentation

To hear more details about customizing the UI of the player, have a look at the session I did at the recent Dutch DevDays 2011. You can also go to Channel 9 and download the video and slides.

Let me know if you succeed or have other findings customizing the template.

Additional howto’s

Also have a look at these how to’s on my blog:

 
Comments

No comments yet.