mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-24 17:35:10 +03:00
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>
69 lines
2.1 KiB
Markdown
69 lines
2.1 KiB
Markdown
# 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.
|
|
```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);
|
|
```
|
|
|
|
##### Font size scaling for readability
|
|
|
|
For improved readability the option to scale text size is provided via player
|
|
config.
|
|
|
|
```js
|
|
player.configure({
|
|
textDisplayer: {
|
|
fontScaleFactor: 1.5,
|
|
},
|
|
});
|
|
```
|
|
|
|
### 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.
|