---
title: Text tracks
description: Subtitles, captions, and chapter track state for the player store
---

import FeatureReference from "@/components/docs/api-reference/FeatureReference.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";

Manages subtitles, captions, chapters, and thumbnail tracks.

<FeatureReference feature="textTrack" />

### Selector

<FrameworkCase frameworks={["react"]}>
Pass `selectTextTrack` to <DocsLink slug="reference/use-player">`usePlayer`</DocsLink> to subscribe to text track state. Returns `undefined` if the text tracks feature is not configured.
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
Pass `selectTextTrack` to <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> to subscribe to text track state. Returns `undefined` if the text tracks feature is not configured.
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
```tsx title="CaptionsButton.tsx"
import { selectTextTrack, usePlayer } from '@videojs/react';

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

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

<FrameworkCase frameworks={["html"]}>
```ts title="captions-button.ts"
import { createPlayer, MediaElement, selectTextTrack } 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, selectTextTrack);
}
```
</FrameworkCase>
