Skip to content

ReferenceText tracks

getTextCues

Every cue on the text tracks a filter or track definition matches

Import

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

getTextCues returns every cue on the tracks a filter or track definition matches, from the media and the app alike. Cues from several tracks are merged in time order.

It reads textCues from the text cues feature, so it only finds cues on the tracks that feature reads: metadata and chapters tracks that aren’t disabled, except the thumbnails track, and the tracks a watchTextCues() filter matches.

Read through a definition, cues are typed by it. With a schema, cues whose value fails it are skipped.

Usage

In a component, useTextCues re-renders when the cues change and keeps the tracks it reads watched. getTextCues reads the cues once, such as in an event handler. Pass it a store typed with your player’s features, such as the one the preset’s usePlayer returns:

import { getTextCues } from '@videojs/react';
import { usePlayer } from '@videojs/react/video';

function LogQuestionsButton() {
  const store = usePlayer();
  const log = () => console.log(getTextCues(store, quizTrack).map((cue) => cue.value?.question));

  return <button onClick={log}>Log questions</button>;
}

API Reference

With Definition

getTextCues<Cue extends MediaTextCue>(source, track): readonly Cue[]

Every cue on the tracks a track definition matches, typed by the definition. With a schema, cues whose value fails it are skipped.

const questions = getTextCues(player.store, quizTrack);

Parameters

ParameterTypeDefaultDetails
source*{ textCues: readonly MediaTrackCues[] }—
track*object—

Return Value

readonly Cue[]

With Filter

getTextCues(source, filter?): readonly MediaTextCue[]

Every cue on the tracks a filter matches, from the media or the app.

Parameters

ParameterTypeDefaultDetails
source*{ textCues: readonly MediaTrackCues[] }—
filterobject—

Return Value

readonly MediaTextCue[]