Skip to content
FrameworkStyle

useActiveTextCues

Hook to observe text cues at the current playback position

useActiveTextCues returns a fresh array of the cues active at the current playback position. It returns an empty array while the track is unavailable or no cue is active.

Import

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

Usage

Find an enabled captions or subtitles track, then render its current cue text.

import { useActiveTextCues, useActiveTextTrack } from '@videojs/react';

const captionKinds = ['captions', 'subtitles'] as const;

export function CurrentCaption() {
  const track = useActiveTextTrack(captionKinds);
  const cues = useActiveTextCues(track);

  return <output>{cues.map((cue) => cue.text).filter(Boolean).join('\n')}</output>;
}

Use useTextCues when you need the complete cue list, such as a chapter menu or transcript.

API Reference

Parameters

ParameterTypeDefaultDetails
track*TextTrackLike | null—

Return Value

TextCueLike[]