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.
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?