# 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](../components/time-slider.md) into chapter ranges and label the chapter at the current interaction position.

When a thumbnail track is present, `thumbnailTrackCrossOrigin` reports the media element’s CORS mode, or `null` when the media is not CORS-enabled. [Thumbnail](../components/thumbnail.md) reads it to fetch sprite sheets the same way the browser fetched the track.

## Import

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

The `liveVideoFeatures` and `videoFeatures` [feature bundles](../../guides/presets.md) include this feature.

## API Reference

### State

| Property | Type | Description |
| --- | --- | --- |
| `chaptersCues` | `MediaTextCue[]` | Cues from the first `kind="chapters"` track. |
| `thumbnailCues` | `MediaTextCue[]` | Cues from the first `kind="metadata" label="thumbnails"` track. |
| `thumbnailTrackSrc` | `string \| null` | The `<track>` element's `src` for resolving relative cue text URLs. |
| `thumbnailTrackCrossOrigin` | `'anonymous' \| 'use-credentials' \| null` | The media element's CORS mode, mapped through the CORS-settings-attribute rules, or `null` when it is not in CORS mode. Thumbnail UI fetches the sprite sheets the cues point at with this mode, since a cross-origin `<track>` only loads at all when the media element is CORS-enabled. |
| `textTrackList` | `MediaTextTrack[]` | All text tracks available on the media element. |
| `subtitlesShowing` | `boolean` | Whether captions/subtitles are currently enabled. |

### Actions

| Action | Type | Description |
| --- | --- | --- |
| `toggleSubtitles` | `(forceShow?: boolean) => boolean` | Toggle captions/subtitles visibility. Showing restores the track that was last showing, or the first caption/subtitle track when there is none. Returns the new enabled value. |
| `selectSubtitlesTrack` | `(value: string) => void` | Select a captions/subtitles track by menu value, or disable with `"off"`. |

### Selector

Pass `selectTextTrack` to [`PlayerController`](./player-controller.md) to subscribe to text track state. Returns `undefined` if the text tracks feature is not configured.

**captions-button.ts**

```ts
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);
}
```