In researching an article recently I was pleased to discover that Google Chrome actually supports WebVTT and the
track element, albeit it in limited form.
I’ve written about WebVTT before and at that time, no browser had any support (I’ve updated the post since). I’m not sure when Chrome started to support this, and it isn’t enabled by default, but it’s good to finally see a web browser start to support video subtitles.
Enabling the <track> element
First of all you have to enable this functionality in Chrome via the following steps:
- Go to the configuration tools in Chrome by typing
chrome:flagsin the address bar
- Search for “Enable the <track> element” and activate it
- Restart the browser
Supported WebVTT settings
I made a quick test of the various settings that the WebVTT specification defines, and found support for the following:
- Cue italics span
- Cue bold span
- Cue underline span
- Cue voicespan (simply puts quotes around the subtitle)
Supported <track> settings
At the moment only a single instance of the
track element is supported, and it must have the
default attribute present, otherwise it will completely ignore it. As also mentioned, only subtitles are supported, so even if you leave the
kind attribute out, the contents of the WebVTT file will be rendered as subtitles regardless.
Naturally I’ve put togther a small example for you to view, but of course you need to enable the <track> element for it to work, and naturally in Chrome only.