Track selection is accomplished through calling the OTVPlayer.selectTextTrack()
and OTVPlayer.selectAudioTrack()
methods. Available track information and confirmation of track selection can be gained through callbacks on the OTVPlayer
element.
Click here to see the example code.
CODE
<OTVPlayer ref={otvplayer => this.otvplayer.ref = otvplayer}
…
onTracksChanged={_onTracksChanged}
onTextTrackSelected={_onTextTrackSelected}
onAudioTrackSelected={_onAudioTrackSelected}
…
>
</OTVPlayer>
…
_setAudioTrack(index) {
// Something like this should be called when a user selects a new track through your UI
this.otvplayer.ref.selectAudioTrack(index);
}
_setVideoTrack(index) {
// Something like this should be called when a user selects a new track through your UI
this.otvplayer.ref.selectVideoTrack(index);
}
_onTracksChanged(data = {}) {
// This callback is triggered when new tracks are discovered, eg. when a stream has loaded
// It allows access to the various parts of track information. See the API for more info
let state = this.state;
// You will need to retain this information in order to correctly select a new track later on
// The parameter for each of the select[Audio|Video]Tracks methods is relative to these arrays
state.audioTracks = data.audioTracks;
state.textTracks = data.textTracks;
console.log('selected audio track index:' + data.selectedAudioTrack.index);
this.setState(state);
}
_onTextTrackSelected(data = {}) {
// This is triggered when a new text track has been selected
let state = this.state;
var textTrackFound = false;
for (track in state.textTracks) {
if (state.textTracks[track].index == data.index) {
console.log('selected textTrack track index:' + data.index);
state.selectedTextTrack = state.textTracks[track];
textTrackFound = true;
}
}
if (!textTrackFound) {
console.log('No selected text found. Selecting No Subtitles.');
}
this.setState(state);
}
_onAudioTrackSelected(data = {}) {
// This is triggered when a new audio track has been selected
console.log('onAudioTrackSelected');
let state = this.state;
console.log('selected audio track index:' + data.index);
var audioTrackFound = false;
for (track in state.audioTracks) {
if (state.audioTracks[track].index == data.index) {
state.selectedAudioTrack = state.audioTracks[track];
audioTrackFound = true;
}
}
if (!audioTrackFound) {
console.log('No selected audio track. Should always be one');
}
this.setState(state);
}
The app needs to listen to onTracksChanged
event when multiple audio or text tracks are found, and in the event, an array of available audio tracks and text tracks are exposed.
Audio Track
To select or change the audio track, pass index to API selectAudioTrack
(). If a valid index is passed, the audio track will be changed and onAudioTrackSelected
event will be triggered, from which the selected index is exposed. By default, the first available audio track will be selected.
Text Track
To change the subtitle track, pass index to API selectTextTrack()
. If a valid index is passed, text track will be changed and onTextTrackSelected
event will be triggered, from which the selected index is exposed.
To switch off the current text track, call selectTextTrack(-1)
. By default, no text track would be selected when a channel is played or after a channel change.