Documentation Index
Fetch the complete documentation index at: https://mintlify.com/videojs/v10/llms.txt
Use this file to discover all available pages before exploring further.
Manages subtitles, captions, chapters, and thumbnail tracks. Required by CaptionsButton.
Import
import { textTrack, selectTextTrack } from '@videojs/react';
// or
import { textTrack, selectTextTrack } from '@videojs/html';
Usage
import { createPlayer, textTrack } from '@videojs/react';
const Player = createPlayer({
features: [textTrack],
});
import { createPlayer, textTrack } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [textTrack],
});
State
All text tracks attached to the media element.
Whether captions or subtitles are currently enabled.
Cues from the first chapters track, used for chapter navigation.
Cues from the first thumbnails track, used for seek previews.
The src attribute of the thumbnail track, used to resolve relative thumbnail URLs.
Actions
toggleSubtitles(forceShow?)
(forceShow?: boolean) => boolean
Toggle subtitle and caption visibility. Pass true to force show, false to force hide. Returns the new state.
Selector
Use selectTextTrack to subscribe to only the text track slice of state. Returns undefined if the textTrack feature is not configured.
import { selectTextTrack, usePlayer } from '@videojs/react';
function CaptionsButton() {
const tracks = usePlayer(selectTextTrack);
if (!tracks) return null;
return (
<button onClick={() => tracks.toggleSubtitles()}>
{tracks.subtitlesShowing ? 'Hide captions' : 'Show captions'}
</button>
);
}
import { createPlayer, MediaElement, selectTextTrack } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';
const { PlayerController, context } = createPlayer({ features: videoFeatures });
class CaptionsButton extends MediaElement {
readonly #textTracks = new PlayerController(this, context, selectTextTrack);
}
Required by: CaptionsButton, Thumbnail
