Help with WebVTT

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 track element.

<video controls preload="metadata">
   <source src="video.mp4" type="video/mp4">
   <track kind="subtitles" label="English" src="subtitles-en.vtt" srclang="en" default>
</video>

To ensure that subtitles are not turned on by default, simply don’t add the default attribute.

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 video tag.

<video controls preload="metadata" crossorigin="anonymous">
   <source src="video.mp4" type="video/mp4">
   <track kind="subtitles" label="English" src="subtitles-en.vtt" srclang="en">
</video>

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 text/vtt.

Alternatively, for an Apache server, you can create a .htaccess file in the same directory as your HTML file, that contains the line:

AddType text/vtt .vtt

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.

<video id="video" controls preload="metadata">
   <source src="video.mp4" type="video/mp4">
   <track kind="subtitles" label="English" src="subtitles-en.vtt" srclang="en" default>
</video>
<button id="toggle">Subtitles: on</button>
var video = document.getElementById('video');
document.getElementById('toggle').addEventListener('click', function() {
   var trackMode = video.textTracks[0].mode;
   video.textTracks[0].mode = (trackMode == 'showing') ? 'disabled' : 'showing';
   this.innerHTML = 'Subtitles: '.concat((trackMode == 'showing') ? 'off' : 'on');
});

Of course this control is visible to all browsers, and not just Firefox.