Looking for the old docs? Go here

Display

Captions

This component is used to render and display captions/subtitles.

The captions component renders and displays captions/subtitles. It will be rendered as an overlay when the player view type is video, and as a simple captions box when the type is audio.

  • See the loading text tracks guide for how to load and manage captions/subtitles.
  • Rendering is handled by the media-captions library, see the repo for more information.
  • See the media-captions motivation section for why native captions are not good enough.
  • The player will dynamically switch to native captions when custom captions cannot be displayed (e.g., iOS Safari on iPhone).

You can style cues, voices, timed cues (past/future), and regions like so:

    
    
HTMLAttributes
Ref<CaptionsInstance>

Renders and displays captions/subtitles. This will be an overlay for video and a simple captions box for audio.

import { Captions, type CaptionsProps } from "@vidstack/react";
<Captions />
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
exampleText
string
'Captions look like this.'
textDir
string
'ltr'

Previous