This documentation is for an outdated version of Video.js. See documentation for the current release.

Video Tracks

Video Tracks are a function of HTML5 video for providing a selection of alternative video tracks to the user, so that they can change type of video they want to watch. Video.js makes video tracks work across all browsers. There are currently six types of tracks:

• Alternative : an alternative video representation of the main video track
• Captions : The main video track with burned in captions
• Main : the main video track
• Sign : the main video track with added sign language overlay
• Subtitles : the main video track with burned in subtitles
• Commentary : the main video track with burned in commentary

Missing Funtionality

• It is currently impossible to add VideoTracks in a non-programtic way
• Literal switching of VideoTracks for playback is not handled by video.js and must be handled by something else. video.js only stores the track representation
• There is currently no UI implementation of VideoTracks

Adding to Video.js

Right now adding video tracks in the HTML is unsupported. Video Tracks must be added programatically.

You must add video tracks programatically for the time being.

Attributes

Video Track propertites and settings

kind

One of the five track types listed above. Kind defaults to empty string if no kind is included, or an invalid kind is used.

label

The label for the track that will be show to the user, for example in a menu that list the different languages available for video tracks.

language

The two-letter code (valid BCP 47 language tag) for the language of the video track, for example "en" for English. A list of language codes is available here.

selected

If this track should be playing or not. Trying to select more than one track will cause other tracks to be deselected.

Interacting with Video Tracks

Doing something when a track becomes enabled

When a new track is enabled (other than the main track) an event is fired on the VideoTrackList called change you can listen to that event and do something with it. Here's an example:

// get the current players VideoTrackList object
let tracks = player.videoTracks();

// listen to the change event
tracks.addEventListener('change', function() {
  // get the currently selected track
  let index = tracks.selectedIndex;
  let track = tracks[index];

  // print the currently selected track
  console.log(track.label);
});

API

player.videoTracks() -> VideoTrackList

This is the main interface into the video tracks of the player. It returns an VideoTrackList which is an array like object that contains all the VideoTrack on the player.

player.videoTracks().addTrack(VideoTrack)

Add an existing VideoTrack to the players internal list of VideoTracks.

player.videoTracks().removeTrack(VideoTrack)

Remove a track from the VideoTrackList currently on the player. if no track exists this will do nothing.

player.videoTracks().selectedIndex

The current index for the selected track