WebVTT 样式未应用于简单示例中

我一直在尝试使用这个简单的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 中尝试，颜色就不会显示。像 bolt 这样的其他东西也可以，但仍然没有像我给出的那样应用额外的样式。我不知道为什么会发生这种情况或如何解决这个问题。这是一个错误吗？顺便说一句，它在火狐中也不起作用。

字幕文件为：

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!!!

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)）根本不可用。我真的不知道如何规避这个限制，如果你只需要设置某个提示，或者例如提示的粗体部分。

我现在已经在 Linux 中测试了您的 vtt 文件。常见结果：颜色样式没有效果，粗体标签生成了字体粗细较高的文本。第二个副标题="do espaço sideral"在这里被我称为T，

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

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

顿悟/3.14.1：文本精确定位。T 在右侧，正常大小。

编写一个新的应用程序，我发现与JacopoStanchi编写的相同：样式表中的"：：cue"规则可以管理颜色和其他东西，请参阅MDN中的：：cue设置。

相关内容

最新更新

热门标签：