Custom Captions

In order to provide a more consistent user-interface and to abide by FCC regulations the player now provides a custom implementation of closed captions. The default style of captions can be set in the <org>.js configuration file. Also, native captions can be implemented if desired. The end-user can customize the display of their own browsers’ captions to meet with FCC regulations.

Example

    PoWaSettings.subtitles = PoWaSettings.subtitles ? PoWaSettings.subtitles : {
    // default 'bump' function
    bump: dimensions => `.powa-sub {bottom: ${ dimensions.height }px}`,

    // default
    native: false,

    // default
    subtitleStyle: config => `
        .powa-sub {
            position: absolute;
            bottom: 0;
            width: 100%;

            display: flex;
            flex-direction: column;
            align-items: center;

            pointer-events: none;
            transition: all 0.2s ease-out;

            line-height: 1.2em;
        }

        .powa-sub-torpedo {
            background: ${ config.background || 'rgba(0, 0, 0, 0.25)' };
            color: ${ config.color || 'rgb(240, 248, 255)' };
            font-family: ${ config['font-family'] || 'sans-serif' };
            font-size: ${ config['font-size'] || 'inherit' };
            text-shadow: ${ config['text-shadow'] || 'none' };

            border-radius: 3px;
            padding: 3px;
            margin: 5px;
            text-align: center;
        }`,

};

In order to move captions out of the way of the custom scrubber we apply a CSS rule. The bump function can be defined to customize how the rule that is used. It should return a CSS rule for .powa-sub that moves captions to the desired location. An event object with the height and width of custom controls is provided to the bump function when custom controls are displayed. When custom controls are hidden the CSS rule is removed from the page.

To use native captions set native: true. Native captions can not be moved out of the way of custom controls but should move out of the way of native controls.

The default style of the captions can be set by defining a subtitleStyle function. In order to honor user-customized caption settings, the function should support relaying background, color, font-family, font-size, and text-shadow, from the config object that is passed in.

Supported fonts

For subtitles, you can choose a font from a pre-defined list in the subtitle settings menu. We support the following fonts:

  monoSans: {
    name: 'Mono Sans',
    rule: "'Andale Mono', 'Lucida Console', monospace"
  },
  monoSerif: {
    name: 'Mono Serif',
    rule: "'Courier New', monospace"
  },
  propSans: {
    name: 'Sans',
    rule: 'sans-serif'
  },
  propSerif: {
    name: 'Serif',
    rule: 'serif'
  },
  comic: {
    name: 'Comic',
    rule: "'Comic Sans MS', Impact, fantasy"
  },
  fancy: {
    name: 'Fancy',
    rule: "'Monotype Corsiva', cursive"
  },
  smallCaps: {
    name: 'Small Caps',
    rule: "'Andale Mono', 'Lucida Console', monospace, sans-serif"
  }