Display
Captions
This component is used to render and display captions/subtitles.
Usage
The <media-captions>
component renders and displays captions/subtitles. It will be rendered as an overlay when the player viewType
is video, and as a simple captions box when the type is audio.
The captions component also be placed inside the <media-outlet>
if the controls are outside of the video container:
Notes
- The Text Tracks guide covers how to add, remove, and manage text tracks.
- The player will dynamically switch to native captions when custom captions cannot be displayed (e.g., iOS Safari on iPhone).
- Rendering is handled by the
vidstack/media-captions
library, see the repo for more information. - See the motivation section for why native captions should be avoided.
- Refer to the formats section for positioning regions and cues. Also see the VTT and ASS specs.
Styling
You can style cues, voices, timed cues (past/future), and regions like so:
CSS Variables
The following snippet contains a complete list of CSS variables and their default values. Any of the variables can be set to adjust the default caption styles:
Avoiding Controls
Or, with Tailwind like so:
Component API
Props
Name | Type |
---|---|
|
'ltr' | 'rtl'
|
Events
Name | Type |
---|
Name | Description |
---|
CSS VarsLearn more about cssVars
Name | Type |
---|
CSS PartsLearn more about cssParts
Name | Description |
---|
Instance Props
Name | Type |
---|
Instance Methods
Name | Type |
---|
Previous
<-
Time