Skip to content

ReferenceText tracks

getActiveTextCues

The cues active now on the text tracks a filter or track definition matches

Import

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

getActiveTextCues returns the cues active at the current time 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, which describes when a cue is active, so it only finds cues on the tracks that feature reads.

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

Usage

In a component, useActiveTextCues re-renders when the active cues change. getActiveTextCues reads them 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 { getActiveTextCues } from '@videojs/react';
import { usePlayer } from '@videojs/react/video';

function AnswerButton() {
  const store = usePlayer();
  const answer = () => {
    const [cue] = getActiveTextCues(store, quizTrack);
    console.log(cue?.value?.question);
  };

  return <button onClick={answer}>Answer</button>;
}

API Reference

With Definition

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

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

player.store.subscribe(() => { const [question] = getActiveTextCues(player.store, quizTrack); });

Parameters

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

Return Value

readonly Cue[]

With Filter

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

The cues active now on the tracks a filter matches, from the media or the app.

Parameters

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

Return Value

readonly MediaTextCue[]