我的最终目标是在较大设计的背景下播放视频时默认显示字幕,但我们现在先把它放在一边。当我尝试解决此问题时,我已将代码削减到最低限度,但仍然无法显示任何标题。这是此时的整个 HTML 文档。
<!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>
视频在所有浏览器中都能成功播放。在 Firefox 中,CC 按钮出现在控制栏中,并且选择了英语,但没有出现任何字幕。
我从实际的 VTT 文件开始,但为了消除 VTT 文件本身的故障点,我下载了 Mozilla 的 track 元素文档中使用的 VTT 文件(HTML 本质上也是该代码的副本)。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track
这就是它的样子
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
我已经在文档和 Stack Exchange 中搜索了潜在的解决方案,但成功率为零。
我已经逐字尝试过你的解决方案,它有效。
你如何测试它?
我正在使用 VisualCode 和 Live Server 插件,它运行得很好。
如果我尝试使用 Firefox 直接从资源管理器打开 HTML 文件,则不会加载 VTT 文件,因为它被标记为安全风险。这可以通过开发人员工具在控制台中看到。也许这就是正在发生的事情?