useTextTracks

Import

import { useTextTracks } from '@videojs/react';

useTextTracks returns the tracks in textTrackList that a filter or track definition matches, and re-renders when they change. Tracks from the media and from the app are listed alike; each track’s source says which. It returns an empty list when the player has no text track feature.

A filter picks tracks by kind, label, or language, or with a function. Each given field must match, and a list of kinds matches any kind in it. Without a filter, it returns every track. Keep a function filter’s identity across renders.

import { useTextTracks } from '@videojs/react';

function ChapterTrackPicker() {
  const tracks = useTextTracks({ kind: 'chapters' });
  if (tracks.length < 2) return null;

  return (
    <select aria-label="Chapters">
      {tracks.map((track) => (
        <option key={track.id} value={track.id}>
          {track.label || track.language}
        </option>
      ))}
    </select>
  );
}

{ kind?: TextTrackKind | readonly TextTrackKind[]; label?: string; language?: string } | ((track: MediaTextTrack) => boolean) | { kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata'; label?: string; language?: string; schema?: StandardSchemaV1 }