Multi-video

The browser SDK comes with built-in multi-video support. This could be used where multiple camera angles cover a sports event or when some content is available at different quality levels (SD/HD/UHD). Where multiple video tracks are present for a chosen piece of content, they will be added automatically to the player instance.

Taking control

Several events and API calls to are provided to enable the application to take control of video tracks. For more information, see https://html.spec.whatwg.org/multipage/media.html#videotracklist.

Get the list of video tracks

The player assumes an instance of otvplayer.

player.videoTracks(); returns a VideoTrackList of VideoTrack objects. For more information, see:

Select a video track

Selecting the desired track is done by switching the selected flag to true on the required VideoTrack item in the VideoTrackList array. A change event is fired when a track is selected. There will always be a valid video track playing at any time, even if all track selected values are set to false. Selecting a new track will disable the previous track; for example:

JS

let myvideotracks = player.videoTracks(); // assume 2 tracks, first is selected

// set up a listener for the 'change' event on the VideoTrackList object
myvideotracks.addEventListener("change", function() {
    console.log("Change event detected");
});

The SDK still handles the addition of the video tracks from the source content, so the following API methods are supplied for completeness, for if the developer requires a reason to add/remove tracks programmatically:

player.videoTracks().addTrack(VideoTrack) adds an existing VideoTrack to the players' internal list of VideoTracks. The addtrack event is fired when a track is added to a VideoTrackList.
player.videoTracks().removeTrack(VideoTrack) removes a track from the VideoTrackList currently on the player; if no track exists, it will do nothing. The removetrack event is fired when a track is removed from a VideoTrackList.

These tracks are just a representation of the actual underlying video content.

Keeping track of the changes

To help keep track of when video tracks are added or removed, three callbacks on the VideoTrackList are provided for this:

The onaddtrack handler is sent a TrackEvent object which indicates in its track property which video track has been added to the media.
The onremovetrack handler is sent a TrackEvent object which indicates in its track property which video track has been removed from the media.
The onchange handler is passed an event in the form of an Event object; the event does not provide any additional information. To determine the new state of media tracks, you will have to look at their VideoTrack.selected flags.

Three associated events: addtrack, removetrack and change may be listened for:

JS

let myVideoTracks = player.videoTracks();
myVideoTracks.onaddtrack = updateTrackCount;
myVideoTracks.onremovetrack = updateTrackCount;
myVideoTracks.onchange = updateTrackCount;

function updateTrackCount(event) {
    trackCount = myVideoTracks.length;
    // or however you want to handle this
}

myVideoTracks.addEventListener("change", event => {
    console.log(`'${event.type}' event fired`);
});