Skip to main content
Skip table of contents

Multi-track selection

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.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.