xiao
724b0b2a71
Close https://github.com/shaka-project/shaka-player/issues/8519 Fixes https://github.com/shaka-project/shaka-player/issues/8475 Introduce `NativeTextDisplayer` as a replacement of `SimpleTextDisplayer`. But keep them both work. Is MSE mode, `NativeTextDisplayer` creates `<track>` elements for text streams. And listens to change events on both ends to keep them in sync. In SRC mode, `NativeTextDisplayer` would do nothing, the player uses original TextTracks instead. Advantages of `NativeTextDisplayer`: - Allow text track selection using the browser built-in UI - Allow text track manipulation using native APIs - Avoid transferring and processing cues in SRC mode --------- Co-authored-by: Álvaro Velad Galván <ladvan91@hotmail.com>
2.1 KiB
Configuring text displayer
Default displayers
Shaka Player supports two implementations of {@link shaka.extern.TextDisplayer} which can be used to render & style content subtitles.
NativeTextDisplayer
{@link shaka.text.NativeTextDisplayer} which uses browser's native cue renderer. Shaka Player creates corresponding text tracks for text streams on 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 player config.
player.configure({
textDisplayer: {
fontScaleFactor: 1.5,
},
});
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.