16

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.
Purify
  • 589
  • 2
  • 11
  • 26

4 Answers4

19

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

Richard Oliver Bray
  • 1,043
  • 13
  • 20
4

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

Kristianmitk
  • 4,528
  • 5
  • 26
  • 46
Yuriy Paykov
  • 41
  • 2
3

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.

Kevin
  • 1,112
  • 2
  • 15
  • 29
1

Browsers do not support that feature locally

Except Mozilla Firefox 66.0.2

Pall Arpad
  • 1,625
  • 16
  • 20