Subtitles not showing using WebVTT

问题

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.

回答1:

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

回答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.

回答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

回答4:

Browsers do not support that feature locally

Except Mozilla Firefox 66.0.2

来源：https://stackoverflow.com/questions/16092609/subtitles-not-showing-using-webvtt

标签

html5-video