Over the last few months I have received a number of requests via email for help with HTML5 video subtitles via WebVTT. Some of the questions have been very specific, whilst others refer to general enquiries that others may come across, so I decided to put them together here.
Turning subtitles on/off by default
If you want your text tracks to be turned on by default, add the
default attribute to the required
To ensure that subtitles are not turned on by default, simply don’t add the
If you have multiple tracks defined, browsers have different support with regards to which track set they will attempt to load.
Hosting WebVTT files on a different server
If you want/have to host your WebVTT files on a different server to the one where your code resides, you can often run into CORS issues, where the browser refuses to serve them because the origins are not the same. To solve this, add
crossorigin="anonymous" to the
However, it is recommended that the files reside on the same server.
Getting subtitles to work on Internet Explorer
If your video subtitles are working on all browsers except Internet Explorer, then you need to check if the MIME type is set on the server, so Internet Explorer knows how to interpret WebVTT files.
If your hosting has a control panel, then there should be some method of adding a new MIME type, in which case you need to ensure that the WebVTT file extension,
vtt, is assigned the MIME type of
Alternatively, for an Apache server, you can create a
.htaccess file in the same directory as your HTML file, that contains the line:
Microsoft Edge does not suffer from this problem.
Add subtitles toggle control for Firefox
If one of the listed text tracks contains the
default attribute, then Firefox one will display automatically, as mentioned above. But currently Firefox does not provide a control for toggling the subtitles’ display status, so you need to write your own.
For simplicity, the example below assumes only one text track is provided.
Of course this control is visible to all browsers, and not just Firefox.