htmlvideocaption

WebVTT Captions Will Not Show, Even For Extremely Simple HTML Video


My ultimate goal is to have captions display by default over a video as it plays in the context of a larger design but let's set that aside for now. As I've attempted to troubleshoot this I've pared my code down to it's bare minimum and I still can not get any captions to display. Here's the entire HTML document at this point.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic HTML5 Page</title>
</head>
<body>
  <video controls src="video/content/video.mp4">
    <track default kind="captions" srclang="en" label="English" src="video/content/friday.vtt" />
  </video>
</body>
</html>

The video plays successfully in all browsers. In Firefox, the CC button appears in the control bar and English is selected, but no captions ever appear.

I started with my actual VTT file, but in an effort to eliminate points of failure with the VTT file itself I downloaded the VTT file used in Mozilla's track element documentation (the HTML is also essentially a copy of that code).

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

Here's what that looks like

WEBVTT

00:00:00.000 --> 00:00:00.999  line:80%
Hildy!

00:00:01.000 --> 00:00:01.499 line:80%
How are you?

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the <u>lord of the universe</u> in?

00:00:03.000 --> 00:00:04.299 line:80%
Yes, he's in - in a bad humor

00:00:04.300 --> 00:00:06.000 line:80%
Somebody must've stolen the crown jewels

I've scoured the documentation and Stack Exchange for potential solutions, but I have had zero success.


Solution

  • I have tried your solution verbatim and it works.

    How are you testing it?

    I am using VisualCode and the Live Server plugin and it works perfectly.

    If I try to open directly the HTML file from the explorer with Firefox, then the VTT file is not loaded because it is flagged as a security risk. This can be seen in the console, with the developer tools. Maybe this is what is happening?