Text tracks

Subtitles, captions, and chapter track state for the player store

Manages subtitles, captions, chapters, and thumbnail tracks.

State

State	Type	Description
`textTrackList`	`MediaTextTrack[]`	All text tracks on the media element
`subtitlesShowing`	`boolean`	Whether captions/subtitles are enabled
`chaptersCues`	`MediaTextCue[]`	Cues from the first chapters track
`thumbnailCues`	`MediaTextCue[]`	Cues from the first thumbnails track
`thumbnailTrackSrc`	`string \| null`	Track `src` for resolving relative thumbnail URLs

Actions

Action	Description
`toggleSubtitles(forceShow?)`	Toggle subtitle visibility. Pass `true`/`false` to force.

Selector

Pass selectTextTracks to PlayerController to subscribe to text track state. Returns undefined if the text tracks feature is not configured.

import { selectTextTracks, usePlayer } from '@videojs/react';

function CaptionsButton() {
  const tracks = usePlayer(selectTextTracks);
  if (!tracks) return null;

  return (
    <button onClick={() => tracks.toggleSubtitles()}>
      {tracks.subtitlesShowing ? 'Hide captions' : 'Show captions'}
    </button>
  );
}

import { createPlayer, MediaElement, selectTextTracks } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController, context } = createPlayer({ features: videoFeatures });

class CaptionsButton extends MediaElement {
  readonly #textTracks = new PlayerController(this, context, selectTextTracks);
}