logo

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

Type

Description

backgroundColor

string | undefined

The background color for the text track.

edgeStyle

EdgeStyle | undefined

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

fontColor

string | undefined

The font color for the text track.

fontFamily

string | undefined

The font family for the text track.

fontSize

string | undefined

The font size for the text track.

marginBottom

number | undefined

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

marginLeft

number | undefined

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

marginRight

number | undefined

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

marginTop

number | undefined

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

windowColor

string | undefined

The window color for the text track.

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.

github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2022. All Rights Reserved.
Leuven
New York
Singapore
Barcelona