Subtitles not showing using WebVTT

Question

So I'm trying to add subtitles to a html5 video and found WebVTT. I've done some research on it and have even copied some example code to see if that'll work and yet I have no luck.

The subtitles just simply don't show up on the video.

Here's the HTML.

<video id="video"  class="video" controls>
              <source src="solar.mp4" type="video/mp4">
              <source src="client2.ogv" type="video/ogv">
              <source src="solar.webm" type="video/webm">
              <source src="solar.flv" type="video/flv">

              <track label="English Captions" kind="captions" srclang="en" src="english-subtitles.vtt">
        </video>

and the test VTT file.

WEBVTT

1
00:00:13,00 --> 00:00:16,000
Man did you see that awesome thing like last week -

2
00:00:16,100 --> 00:00:20,100
- and i said wow a lot of people are starting to talk about this.

Answer 1

It doesn't work locally, you need to run it on a server.

Answer 2

I had the same problem you were having.

The problem is that Chrome has a security feature that does not allow files to run local files in Chrome.

The solution is to run Chrome with the allow local access flag. The link gives instructions for each OS.

Answer 3

You use the incorrect time-stamp format. There should a . (dot), after the second value.

It should be like this: 00:00:00.000 --> 00:00:10.000

Answer 4

Browsers do not support that feature locally

Except Mozilla Firefox 66.0.2