Skip to content

ReferenceFeatures

Text tracks

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

Manages subtitles, captions, chapters, and thumbnail tracks.

A default kind="chapters" track can also divide the time slider into chapter ranges and label the chapter at the current interaction position.

thumbnailsTrack is the first kind="metadata" track labeled thumbnails, or null when there is none. Its crossOrigin reports the media component’s CORS mode, or null when the media is not CORS-enabled. Thumbnail reads it to fetch sprite sheets the same way the browser fetched the track.

Import

import { textTrackFeature } from '@videojs/html';

The liveVideoFeatures and videoFeatures feature bundles include this feature.

API Reference

State

PropertyTypeDetails
textTrackListMediaTextTrack[]
subtitlesShowingboolean
chaptersCuesMediaTextCue[]
thumbnailsTrack{ cues: MediaTextCue[]; src: string | null; crossOrigin: 'anonymous' | 'use-credentials' | null } | null

Actions

ActionTypeDetails
toggleSubtitlesfunction
selectSubtitlesTrackfunction

Selector

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

import { createPlayer, UIElement, selectTextTrack } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

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

class CaptionsButton extends UIElement {
  readonly #textTracks = new PlayerController(this, selectTextTrack);
}