Styling Captions for FCC Compliance

It is possible to change the styling of the captions using the captions configuration block. This is primarily relevant in the context of accessibility requirements, such as those mandated by the FCC in the United States.

Example

Here is an example setup of a player with large, red captions on a semitransparent background:

 

And here is the embed code associated with this setup:

var playerInstance = jwplayer("myElement");
playerInstance.setup({
        file: "/assets/sintel.mp4",
        image: "/assets/sintel.jpg",
        tracks: [{ 
            file: "/assets/captions.vtt"
        }]
    }],
    captions: {
        color: '#FF0000',
        fontSize: 24,
        backgroundOpacity: 50
    }
});

Properties

Here is an overview of all captions styling properties that can be set:

color
Can be any hexadecimal color value, the default is FFFFFF.
fontSize
By default, the captions are displayed using a font size that fits 80 characters per line. Use this option to override this selection with a specific fontsize in pixels (e.g. 20). Note the captions are still scaled up during fullscreen playback. When rendering content with native track elements(Chrome+VTT, Chrome+embedded 608 captions, Safari), this style will not be applied since fonts will scale based on player size
fontFamily
By default, the font family is Arial, Sans-serif. Use this option to override that and change the font family.
fontOpacity
By default the fontOpacity is 100. This option will accept a numerical value of 0-100.
backgroundColor
This is the highlight color of the text. All HEX color values are accepted.
backgroundOpacity
By default the opacity is 100. This option will accept a numerical value of 0-100 to adjust the opacity of the background text highlight.
edgeStyle
The edge style is an option to put emphasis around text. The available options are: none, dropshadow, raised, depressed, uniform.
windowColor
This is the background color of the overall window the captions reside in. All HEX color values are accepted.
windowOpacity
By default the opacity is 100. This option will accept a numerical value of 0-100 to adjust the opacity of the window.

WebVTT Cue Styling

JW Player supports WebVTT cue positioning and inline styling in all browsers. 

  • <b>: to make text bold.
  • <i>: to make text italic.
  • <u>: to underline text.
  • <font size="123">: to change the text fontsize.
  • <font color="ffcc00">: to change the text color.

Here is an example VTT file with a few cues containing inline styles:

WEBVTT

00:00:08.000 --> 00:00:10.000
<b>Nothing</b> is going on.

00:00:10.500 --> 00:00:12.500
<font color="#3333CC">Violet, <i>please</i>!</font>
- I am <font size="20" color="#FF0000"><u>not</u></font> your babe!

Note these styles can be used in SRT but they might not all work as SRT is an older captions format and is not optimized for the web. DFXP-specific styling functionality is not supported though.

Did you find this article helpful?

Please log in to rate this article.