HTML5 Video and Multiple Track Display

Normally when using using subtitles or captions with HTML5 video, even if you provide different track files in different languages, you will only want to display one set to the user at a time. However, it is possible to display multiple track files at once, should you want to. Here’s how.

All the major browsers – except Firefox – provide a menu that allows a user to choose between multiple text tracks, if they are available. These menus only allow the user to select a single track, or to turn them off. So in order to turn multiple tracks on at the same time, we need to turn to JavaScript.

<video id="video" controls preload="metadata">
   <source src="video.mp4" type="video/mp4">
   <track kind="subtitles" srclang="de" label="Deutsch" src="sintel-de.vtt" default>
   <track kind="subtitles" srclang="en" label="English" src="subtitles-en.vtt">
   <track kind="subtitles" srclang="es" label="Español" src="sintel-es.vtt">
</video>
<button id="show-all">Show all</button>

The above code specifies three sets of subtitle files, for German, English, and Spanish, of which German is marked as being the default. There is also a button that will be used to turn on all the subtitles in all three languages.

var video = document.getElementById('video');
document.getElementById('show-all').addEventListener('click', function() {
   for (var i = 0; i < video.textTracks.length; i++) {
      video.textTracks[i].mode = 'showing';
   }
});

This JavaScript defines an event listener which reacts to the click event on the “Show all” button, which goes through each of the video’s defined text tracks and makes them visible, by setting their mode property to showing.

And that’s it! The subtitles in all three languages are now displayed stacked on top of each other, in the reverse order that they are defined in the HTML.

Positioning

We will make some adjustments to the cues within each of the WebVTT files to make them more legible. First of all we will position the cues differently, depending on their language, so that German subtitles are on the left, English in the middle, and Spanish on the right. We can do this by setting a value for the cue text alignment‘s align setting. German cues will be given the value start, and Spanish cues are given a value of end. English cues will use the default of middle.

Next, we will set the cue size for each of the cues, giving each cue a value of 32% (so that they won’t overlap each other) for all cues, regardless of language.

Finally, using cue line alignment, we will set each cue’s line value to 90, which should line each cue near the bottom of the video, and keep them aligned.

Some examples of the finished definitions are given below:

00:00:18.700 --> 00:00:21.500 align:start size:32% line:90
<c.de>Diese Klinge birgt eine finstere Vergangenheit.</c>

00:00:18.700 --> 00:00:21.500 size:32% line:90
<c.en>This blade has a dark past.</c>

00:00:18.700 --> 00:00:21.500 align:end size:32% line:90
<c.es>Esta hoja tiene un pasado oscuro.</c>

Now the three subtitle sets are displayed in three columns at the bottom of the screen, although the cue length sometimes causes the alignment to vary slightly.

But the subtitles are all the same colour, so it’s not that easy to distinguish them from each other.

Styling

Thankfully it is possible to style the text track cues somewhat. Using the cue class span in the WebVTT files themselves, we can add a class to each of the cues which then allows us to style them.

So I went through each of the WebVTT files, adding a cue class span to each cue using the respective language codes as classes. For example:

<c.de>Diese Klinge birgt eine finstere Vergangenheit.</c>

<c.en>This blade has a dark past.</c>

<c.es>Esta hoja tiene un pasado oscuro.</c>

Then I defined colouring styles for each of the subtitles, using the respective flag colours for the text and background.

::cue(.de) {
   color: #000;
   background-color: #ffcc00;
}
::cue(.en) {
   color: #fff;
   background-color: #00247d;
}
::cue(.es) {
   color: #f1bf00;
   background-color: #aa151b;
}

Now each set of subtitles will appear in the video in their own specific colours!

Or will they?

Browser Support

Sadly, browser support for cue styles is not as good as it could be, with the following results:

So as it stands, only Chrome and Opera will actually honour the colour styling, but at least all the others will display multiple subtitles, except for Safari which does its own thing.

As usual, I have put together an example of this, showing how HTML5 video and multiple track display could work. As always, comments welcome.