mirror of https://github.com/shaka-project/shaka-player.git synced 2026-06-15 16:06:41 +03:00

Files

T

David HM Morgan 18695c6c23 feat: Text font scaling customisation ability (#8215 )

With reference to #8025, this is a partial proposal to see if this style
of extensible customisation could be favourable to the shaka-player
community:

Proposal for some accessibility options whereby an App builder can
customise subtitle/caption size, with the potential of an App offering
accessibility options for text size.

This style could be used for other text styling attributes in a similar
way, but this is just the first step.

---------

Co-authored-by: Álvaro Velad Galván <ladvan91@hotmail.com>

2025-03-06 13:44:49 +01:00

2.5 KiB

Raw Blame History

Configuring text displayer

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.

// 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);

Font size scaling for readability

For improved readability the option to scale text size is provided via CSS variable (where supported). The application must provide the following fallback setting in its CSS as a bare minimum:

:root {
  --shaka-text-font-size-scaling: 1;
}

The scale factor can be changed in JS, for example, in response to the user selecting a percentage scale factor:

const fontSizeSelectElement = document.getElementById("fontScaling");
const root = document.querySelector(":root");
root.style.setProperty(
   "--shaka-text-font-size-scaling",
   fontSizeSelectElement.value / 100
);

Text displayer configuration

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

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:

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.

2.5 KiB Raw Blame History