Installation

The Caption Customization assemblies are available in the v1.3.1 vsix download and later. Newer versions of this assembly may be available in the source code repository and not yet published in the vsix so if you'd like to use the latest version, please visit the "Source Code" tab linked above.

Assemblies

The Caption Customization assemblies are used to provide user-customization to closed captions for video in the Player Framework.
Platform TTML WebVTT
Windows 8 HTML
Windows 8.1 HTML Internet Explorer 11* Internet Explorer 11*
Windows 8 Xaml TTMLCaptionSettingsPlugin WebVTTCaptionSettingsPlugin
Windows 8.1 Xaml TTMLCaptionSettingsPlugin WebVTTCaptionSettingsPlugin
Windows Phone 8 Xaml TTMLCaptionSettingsPlugin WebVTTCaptionSettingsPlugin

* Windows 8.1 HTML apps get their caption customization from the desktop Internet Explorer 11 accessibility settings in the internet options dialog.

Windows 8 and Windows 8.1

  1. Add a reference to the TTML or WebVTT Captions Plug-in to the app.
  2. Add the captions plug-in to MediaPlayer Plugin list
  3. Add the appropriate Caption Settings Plugin to the MediaPlayer Plugin list
  4. Set the optional properties of the plug-in.
A Caption Settings pane will be added to the Settings flyout in Windows when the media player initializes and will be removed from the settings pane when the page is deactivated (navigated away from).

Examples

In the TTML sample, the TTMLCaptionSettingsPlugin is added to the MediaPlayer.Plugins collection in TtmlPage.xaml.cs in the page class's constructor.
public TtmlPage()
{
     this.InitializeComponent();
     this.navigationHelper = new NavigationHelper(this);
     player.Plugins.Add(new Microsoft.PlayerFramework.TimedText.CaptionsPlugin());
     player.SelectedCaption = player.AvailableCaptions.FirstOrDefault();

     player.Plugins.Add(new Microsoft.PlayerFramework.TTML.CaptionSettings.TTMLCaptionSettingsPlugin());
}

In the WebVTT Sample, the WebVTTCaptionSettingsPlugin is added to the MediaPlayer.Plugins collection in WebVTTPage.xaml
xmlns:webvttCaptions="using:Microsoft.PlayerFramework.WebVTT.CaptionSettings"
 
<mmppf:MediaPlayer>
    <mmppf:MediaPlayer.Plugins>
         <webvtt:WebVTTPlugin/>
         <webvttCaptions:WebVTTCaptionSettingsPlugin/>
     </mmppf:MediaPlayer.Plugins>
</mmppf:MediaPlayer>

All of the plug-ins on Windows 8.1 have the same API properties and events:

Events

  • OnLoadCaptionSettings event is called when the plug-in is initialized and gives the app an opportunity to retrieve caption settings from a location other than local storage.
  • OnSaveCaptionSettings event is called when the user changes properties in the settings pane and gives the app an opportunity to save caption settings to a location other than local storage.

Properties

  • Label the label of the caption settings pane (default is "Caption Settings")
  • SettingsCommandId the internal command Id of the caption settings pane (default is "CaptionSettings")
  • SettingsCommandIndex the index that the Caption Settings will be added to the settings list (default is to be added to the end)
  • SettingsFlyoutStyle the style of the SettingsFlyout that can be used to customize the appearance of the caption settings pane. The style can be set inline or it can be referenced as a StaticResource: <Style TargetType="SettingsFlyout"/>

Windows Phone 8

  1. Add a reference to the TTML or WebVTT Captions Plug-in to the app.
  2. Add the captions plug-in to MediaPlayer Plugin list
  3. Add the appropriate Caption Settings Plugin to the MediaPlayer Plugin list
  4. Set the optional properties of the plug-in.
  5. Add UI like a settings button to call Plugin.Show() to navigate to the caption settings page.

Example

Create a reference to the Caption Settings Plugin and save it as a variable in the page. Call the Plugin.ShowSettingsPage() method to show the settings page:
namespace WP8.PlayerFramework.Test.Pages
{
    using System.Linq;
    using System.Windows;
    using Microsoft.Phone.Controls;
    using Microsoft.PlayerFramework.TTML.CaptionSettings;

    public partial class TTMLPage : PhoneApplicationPage
    {
       private TTMLCaptionSettingsPlugin plugin;

        public TTMLPage()
        {
            this.InitializeComponent();

            this.plugin = new Microsoft.PlayerFramework.TTML.CaptionSettings.TTMLCaptionSettingsPlugin();

            this.Player.Plugins.Add(this.plugin);

            this.Player.SelectedCaption = this.Player.AvailableCaptions.First();
        }
 
        private void OnCaptionSettings(object sender, System.EventArgs e)
        {
            this.plugin.ShowSettingsPage(this.NavigationService);
        }
   }
}

Font Selection

The Caption Customization plug-ins allow the user to select a generic font families. The font families in the plug-ins have been selected to best match the user interface styles of Windows and Windows Phone but developers can override those styles with application settings:
Font Family Windows 8 Windows Phone
Monospace Serif Courier New Courier New
Proportional Serif Times New Roman Times New Roman
Monospace Sans Serif Consolas Consolas
Proporational Sans Serif Tahoma Tahoma
Casual Segoe Print Comic Sans MS
Cursive Segoe Script Calibri Italic Light
Smallcaps Tahoma (with Small-caps style applied) Tahoma (with Small-caps style applied)

To override the font selection in Windows 8 and Windows 8.1:
var localSettings = Windows.Storage.ApplicationData.Current.LocalSettings;
var container = localSettings.CreateContainer(
                     "Font Families", 
                      Windows.Storage.ApplicationDataCreateDisposition.Always);

container["ProportionalSansSerif"] = "My Custom Font Name";

To override the font selection in Windows Phone:
           System.IO.IsolatedStorage.IsolatedStorageSettings.ApplicationSettings["FontFamilies.MonospaceSansSerif"] = "My Custom Font Name";

Last edited Dec 12, 2013 at 11:57 PM by mdowney, version 33

Comments

No comments yet.