Now this is a story all about how My life got flipped-turned upside down And I'd like to take a minute Just sit right there I'll tell you how I came to know the woes of Web-VTT.
It started with the FSFE's 15th birthday1, for which we produced an awesome video2. The FSFE has a truly amazing translators team (which you can and should join3) which quickly produced subtitles for the video in German, English, Greek, Spanish, French, Italian, Dutch, Turkish and Albanian.
As it turns out, it was not as easy as I thought to just add the WebVTT files to our HTML code. Here are the peculiarities I encountered along the way of making this work:
WebVTT files look remarkably like SRT files (another standard) and our translators first created SRT files which we then turned into VTT files. In practice, it looks as if you just need to add a "WEBVTT" header to the file and be done. But the devil is in the details: turns out that the time format is slightly different in SRT and VTT. Where a time format of "00:00:05,817" works well in SRT, the equivalent in VTT should be "00:00:05.817". See the difference? It took me a while to see it.
We're serving the video and the VTT files from a different server than our normal web server. This wasn't a problem with the video, but it turns out that browsers seem to behave differently when loading the VTT files and the fact that they were on a different server triggered cross origin requests which by default are not allowed for security reasons. Updating our download server to allow cross origin requests, and updating the HTML code to be explicit about the cross origin request solved that problem.
Not only do you need to allow cross origin requests, but the VTT files need to have exactly the right mime type (text/vtt) when served from the web server. If they don't, the subtitles will be silently but ruthlessly ignored.
As I mentioned, we have a lot of translations of the subtitles, but how do you actually get to see the different subtitles? Turns out most browsers just have a "ON" and "OFF" for subtitles. Here's what I learned:
- Internet Explorer and Safari both present the user with a menu to select between the different subtitles. All good.
- Chrome and Opera don't allow you to change the subtitle but instead makes a best-effort match between the browser language and the available subtitles. Okay, but why not let the user change too?
So much for standards :-)