Configuring text displayer

Default displayers

Shaka Player supports two implementations of shaka.extern.TextDisplayer which can be used to render & style content subtitles.

SimpleTextDisplayer

shaka.text.SimpleTextDisplayer which uses browser's native cue renderer. Shaka Player creates a custom text track attached to the video element and provides necessary data so video element can render it. This is the default displayer when shaka UI is not used.

UITextDisplayer

shaka.text.UITextDisplayer which renders subtitles inside of a DOM container provided to shaka. Container can be provided in 2 ways, by either a shaka.Player constructor or a shaka.Player#setVideoContainer method. This call is done automatically when using Shaka UI.

// Take your custom video container element.
const container = document.getElementById('video_container');
// Attach container using player constructor.
const player = new shaka.Player(/* mediaElement= */ null, container);
// Alternatively, pass it using dedicated method.
player.setVideoContainer(container);

Text displayer configuration

Additional configuration for the text displayer can be passed by calling:

player.configure({
   textDisplayer: {/*...*/}
});

See shaka.extern.TextDisplayerConfiguration for more details.

Custom text displayer

If none of displayers is suitable for your needs, you can prepare your own. To do that you need to implement shaka.extern.TextDisplayer interface and pass your custom displayer to shaka by calling:

player.configure({
   textDisplayFactory: () => new CustomTextDisplayer(),
});

Keep in mind text displayers are used entirely for rendering subtitles related directly to the content. If you wish to display other information, i.e. stream metadata, you might consider using shaka.ui.Overlay#setTextWatermark instead.