Zorn/docs/subtitles.mdx
2024-12-01 01:44:43 -05:00

22 lines
861 B
Text

---
Title: Subtitles
Type: Document
---
import {Prism} from "@astrojs/prism"
import {Zorn} from "@minpluto/zorn"
![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`.
<Prism lang="jsx" code={`
<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.