Custom Captions

To provide a consistent user-interface and abide by FCC regulations, the Video Center player now provides a custom implementation of closed captions. The default captions style can be set in the <org>.js configuration file and native captions can be implemented as well. The end-user can customize the display of their own browsers’ captions to meet with FCC regulations. The following screenshot shows the customization options:

Example

The following codeblock shows an example of caption style configurations:

    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;
        }`,

};

To move captions out of the way of the custom scrubber we apply a CSS rule. The bump function defines how the rule is used and returns 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 must 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. The Video Center player supports 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"
  }