diff --git a/docs/tutorials/text-displayer.md b/docs/tutorials/text-displayer.md index a458923573..49386df52a 100644 --- a/docs/tutorials/text-displayer.md +++ b/docs/tutorials/text-displayer.md @@ -1,15 +1,55 @@ # Configuring text displayer -Shaka Player supports two types of Text Displayer. -1) Using the browser's native API, Shaka Player creates a textTrack along - with the AUDIO or VIDEO Element. -2) Rendering the subtitles in a container in the DOM. -3) Providing a custom text displayer factory would allow a developer to make - their own custom text displayer that fits neither category. - -By default, if not configured otherwise, the player will use type 1. -To configure type 2, you have to call `setVideoContainer` function before -making `attach` call in the player. - -Note: The UI calls setVideoContainer for you if the video's controls are -disabled, so this isn't always necessary when using the UI. +### Default displayers + +Shaka Player supports two implementations of {@link shaka.extern.TextDisplayer} +which can be used to render & style content subtitles. + +#### SimpleTextDisplayer + +{@link 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 + +{@link shaka.text.UITextDisplayer} which renders subtitles inside of a DOM +container provided to shaka. +Container can be provided in 2 ways, by either a {@link shaka.Player} +constructor or a {@link shaka.Player#setVideoContainer} method. This call +is done automatically when using Shaka UI. +```js +// 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: +```js +player.configure({ + textDisplayer: {/*...*/} +}); +``` +See {@link 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 {@link shaka.extern.TextDisplayer} interface +and pass your custom displayer to shaka by calling: +```js +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 {@link shaka.ui.Overlay#setTextWatermark} +instead.