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.
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.
mode property to
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.
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
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:
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.
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:
Then I defined colouring styles for each of the subtitles, using the respective flag colours for the text and background.
Now each set of subtitles will appear in the video in their own specific colours!
Or will they?
Sadly, browser support for cue styles is not as good as it could be, with the following results:
- Chrome: multiple subtitles displayed, colour styling honoured
- Opera: multiple subtitles displayed, colour styling honoured
- Firefox: multiple subtitles displayed, no colours
- Brave: multiple subtitles displayed, no colours
- Vivaldi: multiple subtitles displayed, no colours
- Windows Edge: multiple subtitles displayed, no colours
- Internet Explorer 11: multiple subtitles, no colours
- Safari: does not work at all, only displays one set of subtitles
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.