22 lines
861 B
Text
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.
|