THEOplayer > TextTrackStyle

TextTrackStyle interface

Inherits from EventDispatcher<TextTrackStyleEventMap>. See parent page for inherited properties and methods.

The text track style API.

Signature:

export interface TextTrackStyle extends EventDispatcher<TextTrackStyleEventMap> 

Remarks

- Available since v2.27.4.

Properties

Property Details

backgroundColor

The background color for the text track.

Signature:

backgroundColor: string | undefined;

Remarks

This targets the area directly behind the text.

Example

- red will set the background color of the text track to red.
- #ff0000 will set the background color of the text track to red.
- rgba(255,0,0,0.5) will set the background color of the text track to red, with 50% opacity.

edgeStyle

The edge style of the text, represented by a value from the following list:
- 'none'
- 'dropshadow'
- 'raised'
- 'depressed'
- 'uniform

Signature:

edgeStyle: EdgeStyle | undefined;

fontColor

The font color for the text track.

Signature:

fontColor: string | undefined;

Example

- red will set the color of the text to red.
- #ff0000 will set the color of the text to red.
- rgba(255,0,0,0.5) will set the color of the text to red, with 50% opacity.

fontFamily

The font family for the text track.

Signature:

fontFamily: string | undefined;

fontSize

The font size for the text track.

Signature:

fontSize: string | undefined;

Remarks

Can be a percentage value such as '50%', '75%', '100%', '150%' or '200%'.

marginBottom

The bottom margin of the area where subtitles are being rendered.

Signature:

marginBottom: number | undefined;

Remarks

- Available since v4.2.0
- The margin is in number of pixels.
- Useful for pushing the subtitles up, so they don't overlap with the UI.

marginLeft

The left margin of the area where subtitles are being rendered.

Signature:

marginLeft: number | undefined;

Remarks

- Available since v4.2.0
- The margin is in number of pixels.
- Useful for pushing the subtitles right, so they don't overlap with the UI.

marginRight

The right margin of the area where subtitles are being rendered.

Signature:

marginRight: number | undefined;

Remarks

- Available since v4.2.0
- The margin is in number of pixels.
- Useful for pushing the subtitles left, so they don't overlap with the UI.

marginTop

The top margin of the area where subtitles are being rendered.

Signature:

marginTop: number | undefined;

Remarks

- Available since v4.2.0
- The margin is in number of pixels.
- Useful for pushing the subtitles down, so they don't overlap with the UI.

windowColor

The window color for the text track.

Signature:

windowColor: string | undefined;

Remarks

This targets the area covering the full width of the text track.

Example

- red will set the background color of the window of the text track to red.
- #ff0000 will set the background color of the window of the text track to red.
- rgba(255,0,0,0.5) will set the background color of the window of the text track to red, with 50% opacity.