2

我一直在尝试使用这个简单的 HTML 让 .vtt 字幕在视频上工作：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
    /* video::cue{
      color:yellow
    } */
    </style>
  </head>
<body>

<video width="600" height="400" controls>
  <source src="./MIB2.mp4" type="video/mp4">
  <track id="textTrack" label="pt" kind="subtitles" srclang="pt" src="./MIB2.vtt" default >
</video>

</body>
</html>

我在 .vtt 文件中添加了一些颜色和样式，但它们似乎不起作用。

例如：VLC 将显示我所有的红色（来自 ），但是一旦我在 chrome 71 中尝试，颜色将不会显示。像螺栓这样的其他东西会起作用，但仍然没有像我给的那样应用额外的样式。我不知道为什么会发生这种情况或如何解决这个问题。这是一个错误吗？顺便说一句，它在Firefox中也不起作用。

字幕文件为：

WEBVTT


REGION
id:Frank
color:rgba(255,0,0,1)

STYLE
::cue(#1){
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: blue;
}
::cue(b){
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: green;
}
::cue {
  color: red;
}

1
00:00:00.500 --> 00:00:04.000
Aprendi #1 a <b>me</b> virar e <c.red.caps>você voltou</c>

2
00:00:04.100 --> 00:00:06.000 align:left size:150% region:Frank
<v.first.loud Frank>do espaço <b>sideral</b>

THIRD line
00:00:06.100 --> 00:00:10.500 align:right size:50%
e agora vejo que você está aqui no baixo astral

4
00:00:10.600 --> 00:00:14.000 align:left size:150%
eu devia me mudar e ter tomado a sua chave

5
00:00:14.100 --> 00:00:17.500 align:right size:50%
se soubesse que ia voltar para mim enfernizar

6
00:00:17.600 --> 00:00:19.500 align:left size:150%
agora vai, sai daqui

7
00:00:19.600 --> 00:00:21.500 align:right size:50%
Frank!

8
00:00:21.600 --> 00:00:24.100 align:left size:150%
ponha a cabeça para dentro

9
00:00:24.200 --> 00:00:26.500 align:right size:50%
antes que eu emprense nessa janela

10
00:00:26.600 --> 00:00:29.500 align:left size:150%
tá legal

11
00:00:29.600 --> 00:00:33.500 align:right size:50%
hhmm... hhmmm... hmmm...

12
00:00:33.600 --> 00:00:34.000 align:left size:150%
FRANK!!!
4

2 回答 2

2

WebVTT 文件中的样式在任何浏览器中都没有标准化。希望很快就会有。

参考：跳转到高级文件格式 > WebVTT：https ://support.google.com/youtube/answer/2734698?hl=en

什么时候会，我不知道是否可以只用一个STYLE关键字来做多个 CSS 块。

还有什么可能：

您可以使用非常模块化的提示设置：

00:00:00.000 --> 00:00:10.000 line:63% position:72% align:start
Hello world.

您还可以通过将 CSS 规则写入 VTT 文件之外来应用它们，就像<style>您所做的那样在标签中：

<style>
video::cue {
  color: red;
}
</style>

虽然，更高级的选择器喜欢::cue(b)或::cue(#1)根本不可用。我真的不知道如何规避这个限制，例如，如果您只需要设置某个提示或提示的粗体部分的样式。

于 2019-02-21T23:39:39.737 回答
0

我现在已经在 Linux 中测试了你的 vtt 文件。常见结果：颜色样式无效，粗体标签产生的文本具有更高的字体权重。第二个副标题 = “do espaço sideral”，我在这里称为 T，

Chrome/57.0 结果：文本已定位，T 位于左侧，字体大小正常。

Firefox/70.0 结果：文本被定位，用较小的字体书写，在左侧

Epiphany/3.14.1：文本定位准确。T在右侧，正常尺寸。

编写一个新应用程序时，我发现与 JacopoStanchi 所写的相同：样式表中的“::cue”规则可以管理颜色和其他内容，请参阅MDN的 ::cue 设置

于 2019-11-29T20:48:13.217 回答