Skip to main content
Skip table of contents

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 content is available at different quality levels (SD/HD/UHD).  Multiple video tracks will be automatically added to the player instance when they are present for a chosen piece of content.

Track detection is based on an AdaptationSet in the DASH .mpd for each video track that can be selected.

Taking control

Several events and API calls 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:

Selecting 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 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

Three callbacks on the VideoTrackList are provided to help keep track of when video tracks are added or removed:

  • 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: addtrackremovetrack 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`);
});

Key Per Track stream robustness

Every video track can own different key in multiple DASH video streams. It is called Key Per Track stream. The Browser SDK supports Key Per Track streams. But sometimes the license server will not return all keys for every video track according to security level and capability of device. The SDK will automatically switch to another video track if the default video track does not have a key in the license. The invalid video tracks will be removed from the player VideoTrackList at the same time and RemoveTrack event is fired. The label value of the video track (Adaptation in DASH mpd file) should be defined in order to separate different video tracks. There is a limitation on Samsung Tizen and HBBTV TV – the video track that contains the lowest bitrate representation in Key Per Track stream will be selected as the default video track due to a Samsung TV device limitation.

JavaScript errors detected

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

If this problem persists, please contact our support.