Skip to main content

Track Selection

fl-player library provides api to select audio/subtitle tracks, list the audio/subtitle tracks, enable or disable subtitles, captions.

It also allows user to set the preferred audio and subtitle language.


export declare enum TrackType {
AUDIO = "audio",
TEXT = "text"
}
/**
@typedef {{
type: string,
language: string,
}}
*
@description
An object describing a media track. This object should be treated as
read-only as changing any values does not have any effect. This is the
public view of an audio/video paring (variant type) or text track (text
type).
*
@property {string} type
The type of track, either <code>'Audio'</code> or <code>'text'</code>.
@property {string} language
The language of the track, or <code>'und'</code> if not given.
This is the exact value provided in the manifest; it may need to be
normalized.
*
*/
export interface TrackInfo {
type: TrackType;
language: string;
}

List Audio/Subtitle Tracks

fl-player getAllTracks() api returns a list of tracks that can be switched in the current period. If there are multiple periods, you must seek to the period in order to get variants from that period. If the player has not loaded the content, this will return an empty list.

const tracks = player.getAllTracks();
tracks.forEach(function (track) {
if (track.type === 'text') console.log('Text tracks', track);
else console.log('Audio tracks', track);
});

Enable/Disable Subtitle Track

Subtitle can be disabled by invoking the selection api without the track information. This will not affect the audio track selection.

Subtitle can be enabled by invoking the selection api with the proper text track information.

// Turn off captions/subtitle
player.selectTrack();
// selects the text track
const textTrack = { language: 'en', type: 'text' };
player.selectTrack(textTrack);

Active Audio/Subtitle Tracks

fl-player getActiveTracks() api returns a list of active tracks in the current period. If the player has not loaded content, this will return an empty list.

const tracks = player.getActiveTracks();
tracks.forEach(function (track) {
if (track.type === 'text') console.log('Active text track', track);
else console.log('Active audio track', track);
});

Select Audio/Subtitle Track

fl-player selectTrack() api selects a specific track to play from the current period. Track should come from getAllTracks. If track cannot be found in the current variant, this will be a no-op. If the player has not loaded the content, this will be a no-op.

// selects the audio track
const audioTrack = { language: 'en', type: 'audio' };
player.selectTrack(audioTrack);
// selects the text track
const textTrack = { language: 'en', type: 'text' };
player.selectTrack(textTrack);

Preferred Track Configuration

The preferred language configuration apis allows users to set the audio and text language preference during load. If a matching audio or text track is found, it will set as the active tracks.

User can use the track selection api to change the active tracks during the playback

const PREFERRED_AUDIO_LANGUAGE = 'fr';
const PREFERRED_TEXT_LANGUAGE = 'en';
const player = window.playerBuilder
.mediaElement(videoElement)
.mediaUrl(contentUrl.value)
.playbackOptions({
preferredTextLanguage: PREFERRED_TEXT_LANGUAGE,
preferredAudioLanguage: PREFERRED_AUDIO_LANGUAGE,
})
.build();