Captions

<vega-player
  src="/video.mp4"
  captions-src="/captions/es.vtt"
  captions-label="Español"
  captions-default>
</vega-player>

Captions on from the start.

Attribute	Effect
captions-src	URL of a WebVTT file. The CC button appears automatically.
captions-label	Track label (default Subtitles).
captions-default	Shows the captions from the start.

• The CC button shows their state: underlined when on, dimmed when off. It toggles them and fires vega-player:captionschange with { enabled }.
• If the file fails to load, vega-player:captions-error fires.
• Removing captions-src removes the track and the button.
• Toggle from JavaScript with player.toggleCaptions().

A minimal WebVTT file

es.vtt

WEBVTT

00:00:01.000 --> 00:00:03.500
¿Has oído eso?

00:00:04.000 --> 00:00:07.000
[Truena a lo lejos]

00:00:07.500 --> 00:00:10.000
Viene una tormenta. Vámonos.

Captions on another domain need CORS headers, as with any <track>.

Where they appear

Just above the progress bar, at any size and in fullscreen. When the controls hide, the captions move down. To change their look, use ::part(captions):

vega-player::part(captions) { font-family: Georgia, serif; }

On iPhone’s own fullscreen the system shows the captions instead.