The <track> JavaScript API

Most "complex" HTML elements like forms, audio or video players, come with a JavaScript API that allows you to control them programmatically, customize them, etc.

The <track> element comes with a powerful API that is used to develop many interesting features such as:

Dynamic building of a navigation menu that shows the different chapters of the video,
Synchronization of page content with timestamps in the WebVTT file (for example: show a map next to the video, that shows the location corresponding to the video content),
Displaying of all the subtitles/captions at once as HTML in the page,
Apps for creating on the fly subtitles/captions.

Examples of use

Example #1: add a navigation menu to start playing the video at given chapters

This example shows a video with an enhanced progress bar that displays the different chapters as small "clickable" squares. Furthermore, using the JavaScript API of the <track> element, this Web site builds a navigation menu (on the right of the video):

Example #2: sync video with Google Map and Google Street View

Check this demo (only on Chrome) by Sam Dutton: it shows a video that comes with a WebVTT file that contains longitudes and latitudes. When the video plays, JavaScript functions are called at given times and get the longitude and latitude. A Google Map and a Google Street views are updated in real time.

Example #3: sync guitar tablatures and music score with a video

This example (which is in French, but that's not important) shows how we manage to render music scores in real time as the video plays.

Some JavaScript code listens to the ontimeupdate event while the video is playing. We use the currentTime property of the video to know exactly where we are in the video. Finally, we also rely on an external library to render in an HTML5 canvas the bars corresponding to the current video explanations. We render in real time guitar pro tablatures using the alphatab.net library.