MinPluto/Zorn
MinPluto/Zorn
1
0
Fork 0
Code Issues Activity

Add documentation for Subtitles

Browse source
This commit is contained in:
Korbs 2024-11-30 23:22:58 -05:00
parent 1311ab0678
commit 1f5b791b94
1 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
README.md
View file

@ -128,7 +128,7 @@ By default, these buttons are hidden. If you want to show them, just add the `Sh
<Zorn ShowBackAndForward/> <Zorn ShowBackAndForward/>
``` ```
**Settings Menu** - `SettingsMenu` **Settings Menu** - `SettingsMenu` [`<slot/>`]
<video title="Settings Menu in action on MinPluto" controls autoplay muted loop src="https://md.sudovanilla.org/videos/webm/Screencast%20from%202024-07-31%2000-44-01.webm"></video> <video title="Settings Menu in action on MinPluto" controls autoplay muted loop src="https://md.sudovanilla.org/videos/webm/Screencast%20from%202024-07-31%2000-44-01.webm"></video>
@ -211,6 +211,23 @@ If you need to add an addition attribute to either the video and/or audio source
<Zorn VideoAttributes="muted" AudioAttributes={'download="media.ogg"'}/> <Zorn VideoAttributes="muted" AudioAttributes={'download="media.ogg"'}/>
``` ```
**Subtitles** - `Subtitles` [`<slot/>`]
![Native HTML5 Subtitles (Firefox)](https://md.sudovanilla.org/images/subtitles-example-native-html5.png)
To apply subtitles to the video player, add a slot for tracks and insert HTML5 [`textTracks`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks). Make sure to set the `label` and `srclang`.
```jsx
<Zorn Subtitles>
<slot slot="subtitles">
<track kind="subtitles" src="/subtitles/English.vtt" label="English" srclang="en" />
<track kind="subtitles" src="/subtitles/Russian.vtt" label="Russian" srclang="ru" />
</slot>
</Zorn>
```
When the `Subtitles` option is enabled, a subtitles button will appear automatically in the control on the right side and a menu will be generated for you.
**Milieu** - `Milieu` **Milieu** - `Milieu`
The Milieu option is an attempt to copy YouTube's ambient player feature. Where it adds a blurry glow around the player. This uses two `<canvas/>`s behind the player to make a smooth transition when it changes. The Milieu option is an attempt to copy YouTube's ambient player feature. Where it adds a blurry glow around the player. This uses two `<canvas/>`s behind the player to make a smooth transition when it changes.