While the player framework UI can be easily styled and customized to look just how you want it to look and feel for your app, we've also identified two common user experiences that designers often choose and provided an easy way to get this out of the box without any custom styling:

The default video tag look and feel

If you use just the basic video tag in an HTML/JS Windows 8 app, you get out of the box a video with a control panel at the bottom. The player framework offers a similiar look and feel out of the box if you use the default theme in Xaml or the PlayerFramework-dark.css style in HTML.
To apply this theme in JS, simply add the PlayerFramework-dark.css theme to your HTML:
<link href="/Microsoft.PlayerFramework.Js/css/PlayerFramework-dark.css" rel="stylesheet">

To apply this theme in Xaml, simply add add the default control to your project:
<mmppf:MediaPlayer x:Name="player" Source="http://smf.blob.core.windows.net/samples/videos/wildlife.mp4"/>

The Windows 8 entertainment app theme

While the default video tag-like look and feel is fine for some apps, many apps want a UX more condusive to fullscreen playback on touch screens. With the help of Vertigo Software, Microsoft has put together a great design guidelines document for Windows 8 media applications.
To apply this theme in JS, instead of adding the CSS file above, simply add the PlayerFramework-Entertainment-dark.css theme to your HTML:
<link href="/Microsoft.PlayerFramework.Js/css/PlayerFramework-Entertainment-dark.css" rel="stylesheet" />

To apply this theme in Xaml, simply add add the entertainment app Xaml file to your page xaml or app.xaml:
                <ResourceDictionary Source="ms-appx:///Microsoft.PlayerFramework/themes/Entertainment.xaml"/>

Additional customization

In addition to the themes above, you can also easily place buttons and controls in other places within your app and bind them to MediaPlayer.InteractiveViewModel
For example, to place the closed captions button in your appbar in JS:
<div id="bottomAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{ placement: 'bottom', layout: 'custom' }">
    <button type="button" class="pf-captions-control" data-win-control="WinJS.UI.AppBarCommand" data-win-bind="winControl.icon: captionsIcon; winControl.label: captionsLabel; winControl.tooltip: captionsTooltip; winControl.disabled: isCaptionsDisabled;" data-win-options="{ type: 'flyout', flyout: captionsMenu }"></button>

To place the closed captions button in your appbar in Xaml:
        <StackPanel Orientation="Horizontal" x:Name="MediaPlayerButtons">
            <mmppf:CaptionSelectionButton x:Name="CaptionSelectionButton" ViewModel="{Binding InteractiveViewModel, ElementName=player}" Style="{StaticResource AppBarButtonStyle}"/>
// WARNING: Normally the binding above would work but due to the way namescoping works in Xaml on Windows 8 for appbar items, the following code behind is required:
public StylingTestPage()
    CaptionSelectionButton.ViewModel = player.InteractiveViewModel;
    player.InteractiveViewModelChanged += player_InteractiveViewModelChanged;

void player_InteractiveViewModelChanged(object sender, RoutedPropertyChangedEventArgs<IInteractiveViewModel> e)
    CaptionSelectionButton.ViewModel = e.NewValue;

  • Any control normally found in the control panel can be placed elsewhere in your app (including the appbar).
  • Even the entire control panel or the timeline can be moved outside the control
  • You can even have the same button appear in more than one place.
  • The Is*Visible properties found on the media player will only hide buttons in the default UI (regardless of which theme you use). If you set these properties to false, you can still add and bind individual pieces of the controlpanel to the media player without affecting their visibility.
  • The entertainment theme only includes play/pause, timeline, rewind, fast-forward, skip previous and skip next buttons. If you want other buttons to display such as the closed captions button, we recommend you add them individually to your app bar or elsewhere on your page.
  • The entertainment theme will automatically hide everything but the play/pause button when in snapped mode.

Light and dark themes

Both themes above are also made to support light and dark themes.
To apply the light theme in JS, simply use the appropriate "-light" css file:
<link href="/Microsoft.PlayerFramework.Js/css/PlayerFramework-Entertainment-light.css" rel="stylesheet" />
<link href="/Microsoft.PlayerFramework.Js/css/PlayerFramework-light.css" rel="stylesheet">

To apply the light theme in Xaml, simply set the RequestedTheme property in your application's constructor:
Application.Current.RequestedTheme = ApplicationTheme.Light;

Last edited Dec 3, 2014 at 12:20 AM by timgreenfield, version 6