Bits of Freedom
Bits of Freedom

Tinkerer and thinker on everything free and open. Exploring possibilities and engaging with new opportunities to instigate change.

Jonas Öberg
Author

Jonas is a dad, husband, tinkerer, thinker and traveler. He's passionate about the future and bringing people together, from all fields of free and open.

Share


My Newsletters


If you're interested in what Commons Machinery, Elog.io, or myself are up to, I'd love for you to be part of my notification lists. It's pretty low volume, a few messages per month, depending on which notifications you sign up for. Thanks for taking an interest!

Read more & subscribe
Bits of Freedom

The woes of WebVTT

Jonas ÖbergJonas Öberg
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.

Having a healthy distrust of too much client side JavaScript on our web pages, we were delighted to get an opportunity to try WebVTT, a standard for displaying subtitles together with a video with the web browser's native support. The standard has been around since ~2011 and most browsers do support it today.

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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?
    • Firefox sucks. I'm sorry Mozillians, but from everything I've read, it seems Firefox ignored the browser language when selecting a subtitle and instead picks the default subtitle. It also does not allow you to change which subtitle is used, instead relying on the web page including some JavaScript and CSS to style it's own menu.

So much for standards :-)


Jonas Öberg
Author

Jonas Öberg

Jonas is a dad, husband, tinkerer, thinker and traveler. He's passionate about the future and bringing people together, from all fields of free and open.