即使对于极其简单的 HTML 视频,WebVTT 字幕也不会显示

问题描述 投票:0回答:1

我的最终目标是在较大设计的背景下播放视频时默认显示字幕,但我们现在先把它放在一边。当我尝试解决此问题时,我已将代码削减到最低限度,但仍然无法显示任何标题。这是此时的整个 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 中搜索了潜在的解决方案,但成功率为零。

html video caption
1个回答
0
投票

我已经逐字尝试过你的解决方案,它有效。

你如何测试它?

我正在使用 VisualCode 和 Live Server 插件,它运行得很好。

如果我尝试使用 Firefox 直接从资源管理器打开 HTML 文件,则不会加载 VTT 文件,因为它被标记为安全风险。这可以通过开发人员工具在控制台中看到。也许这就是正在发生的事情?

© www.soinside.com 2019 - 2024. All rights reserved.