Skip to main content
Skip table of contents

Customization of Subtitle styling

In response to the European Accessibility Act 2025 (EAA), the CONNECT Player SDK provides the ability for customisation of the appearance of text subtitles for DASH and HLS content. This allows for enhanced readability where required by the end user through a flexible set of characteristics.

Customisation of the following styling properties is supported:

  1. font size scaling

  2. font family

  3. text color / text opacity

  4. background color / background opacity

  5. text edge color / text edge effect

The customer also can set subtitle styling with “Caption size and style“ in Android system setting. The SDK takes following priority (from High to low) for subtitle styling setting.

  1. Caption styling configuration with SDK setCaptionStyle(OTVCaptionStyle)API from Application.

  2. Caption styling setting from Android system setting.

  3. Caption styling defined in text tracks of DASH/HLS steams.

Configuration API

In order to set the new caption styling with SDK, the application should create OTVCaptionStyle object with OTVCaptionStyle.Builder and set this object to public method OTVVideoView.setCaptionStyle.

JAVA
OTVCaptionStyle captionStyle = OTVCaptionStyle.Builder()
      .setFontScale(2.0) // double font size  
      .setFontFamily("serif") // set font family to "serif"
      .setFontColor(Color.YELLOW) // text color yellow
      .setFontOpacity(128) // text half transparent
      .setEdgeType(OTVCaptionStyle.EDGE_TYPE_OUTLINE) // edge type outline
      .setEdgeColor(Color.RED) // edge color red
      .setEdgeOpacity(255) // edge no transparent
      .setBackgroundColor(Color.BLUE) // background color is blue
      .setBackgroundOpacity(255) // background no transparent
      .build();  // build a new OTVCaptionStyle object with correct configuration
      
mVideoView.setCaptionStyle(captionStyle); // set caption style to video view.

Font scale

Font size scale can be set with method setFontScale in OTVCaptionStyle.Builder. The default value is OTVCaptionStyle.UNSET.The font scale value from Android system and text tracks will be used if default value is used.

Examples:

  • a value of 2 will double the rendered size.

  • a value of 0.5 will half the size

  • a value of 1.5 will increase by 50%

  • a value of 1 will have no effect

It is recommended to integrators that a small set of values are defined and mapped to meaningful labels, for example:

  • small: 0.75

  • medium: 1.0

  • large: 1.5

  • extra large: 2.0

Furthermore it is not recommended going beyond 2.0 as the layout of the rendered subtitles may be greatly affected and readability will likely be affected.

JAVA
OTVCaptionStyle captionStyle = OTVCaptionStyle.Builder()
      .setFontScale(1.5) // increase by 50%
      .build();
mVideoView.setCaptionStyle(captionStyle);      

Font Family

Font size scale can be set with method setFontFamily or setFontTypeface in OTVCaptionStyle.Builder. if both are set, setFontTypeface method has high priority. The font family from Android system and text tracks will be used if font family is not set in the confugation.

For example, the font family name could be:

  • monospace

  • serif

  • sans-serif

  • casual

  • cursive

CODE
// Set font family with font name
OTVCaptionStyle captionStyle = OTVCaptionStyle.Builder()
      .setFontFamily("serif") 
      .build();
mVideoView.setCaptionStyle(captionStyle); 

// Set font family with type type face
OTVCaptionStyle captionStyle = OTVCaptionStyle.Builder()
      .setFontTypeface(mTypeFace) 
      .build();
mVideoView.setCaptionStyle(captionStyle); 

Text Color

Text color and opacity can be set with method setFontColor and setFontOpacityin OTVCaptionStyle.Builder. Font Opacity can not be set without setting font color. The Opacity value should be between 0 ~ 255.

For example:

  • Color.BLUE // use Android system predefined value

  • Color.Red // use Android system predefined value

  • 0xFF887766 // customer ARGB format value

JAVA
OTVCaptionStyle captionStyle = OTVCaptionStyle.Builder()
      .setFontColor(Color.WHITE) // text color white
      .setFontOpacity(128) // text half transparent
      .build();
mVideoView.setCaptionStyle(captionStyle);  

Background Color

Background color and opacity can be set with methodssetBackgroundColor and setBackgroundOpacityin OTVCaptionStyle.Builder. Background Opacity can not be set without setting background color. The Opacity value should be between 0 ~ 255.

For example:

  • Color.BLUE // use Android system predefined value

  • Color.Red // use Android system predefined value

  • 0xFF887766 // customer ARGB format value

JAVA
OTVCaptionStyle captionStyle = OTVCaptionStyle.Builder()
      .setBackgroundColor(Color.WHITE) // color white
      .setBackgroundOpacity(128) // half transparent
      .build();
mVideoView.setCaptionStyle(captionStyle); 

Edge type and color

Font edge type, edge color and opacity can be set with methods setEdgeType, setEdgeColor and setEdgeOpacity in OTVCaptionStyle.Builder. Edge Opacity can not be set without setting edge color. The Opacity value should be between 0 ~ 255.

The valid edge type:

  • OTVCaptionStyle.EDGE_TYPE_NONE // default value

  • OTVCaptionStyle.EDGE_TYPE_OUTLINE

  • OTVCaptionStyle.EDGE_TYPE_DROP_SHADOW

  • OTVCaptionStyle.EDGE_TYPE_RAISED

  • OTVCaptionStyle.EDGE_TYPE_DEPRESSED

JAVA
OTVCaptionStyle captionStyle = OTVCaptionStyle.Builder()
      .setEdgeType(OTVCaptionStyle.EDGE_TYPE_RAISED) // edge type raised.
      .setEdgeColor(Color.WHITE) // color white
      .setEdgeOpacity(128) // half transparent
      .build();
mVideoView.setCaptionStyle(captionStyle);

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.