Captions

ID: vCaptions | ROLE: CAPTIONS | Type: Plugin

This plugin renders and displays captions/subtitles that are set in the tracks prop. The current track is set by the currentTrackIndex and locale props. If you don't want locale changes to affect the captions, see the useLocale prop below.

Setup

Basic

import { Player, Captions } from '@vime-js/complete';

// ...

const player = new Player({

target,

props: {

plugins: [Captions],

},

});

Manager

import { Player, Captions } from '@vime-js/complete';

// ...

player

.getPluginsManager()

.addPlugin(Captions)

.then(captions => {

// ...

});

Props

useLocale

Type: boolean | Default: true

Whether locale changes should change the current track by looking for a track with a matching srclang.

crossorigin

Type: string|null | Default: null

This plugin creates a track element to load text tracks and this prop is the crossorigin attribute set on it.

cues

Type: VTTCue[] | Default: [] | Readonly: true

A list of cues (VTTCue) for the current track.

currentCueIndex

Type: int | Default: -1 | Readonly: true

The index of the current cue. If it is -1 then there are no cues.

currentCue

Type: VTTCue | Default: null | Readonly: true

The current cue (VTTCue).

activeCues

Type: VTTCue[] | Default: [] | Readonly: true

The cues (VTTCue) that are currently active. Cues are active if the currentTime is between the cues' startTime and endTime.

Store

The following props are backed by a store which you can access via the getStore method.

• cues
• currentCueIndex
• currentCue
• activeCues

const { cues } = player.vCaptions.getStore();

Methods

getStore

Return Type: object

See the store section above.

addCue

Parameters: (cue: VTTCue)

Validates and adds a new cue (VTTCue).

addCues

Parameters: (cues: VTTCue[])

Adds a list of cues (VTTCue) using addCue.

removeCue

Parameters: (cue: VTTCue|int)

Removes a cue or index from the list of cues.

removeCues

Parameters: (cues: VTTCue|int[])

Removes a list of cues using removeCue.