Question

我一直在尝试使用以下简单的HTML在视频中使用.vtt字幕：

new peer yaml config

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

例如：VLC将显示我所有的红色（来自），但是一旦在chrome 71中尝试使用，该颜色将不会显示。其他类似螺栓的东西也可以使用，但是仍然没有像我给的那样应用任何额外的样式。我不知道为什么会这样或如何解决。这是错误吗？在firefox btw中也不起作用。

字幕文件是：

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

Answer 1

WebVTT文件中的样式仅在任何浏览器中尚未标准化。希望会很快。

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

什么时候可以，我不知道是否可以用just one STYLE keyword来做多个CSS块。

仍然可行：

您可以使用模块化的cue settings：

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

您还可以通过在VTT文件外部编写CSS规则来应用CSS规则，就像在<style>标签中一样：

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

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

Answer 2

我现在已经在Linux中测试了您的vtt文件。常见结果：颜色样式无效，粗体标签产生的文本具有更高的字体粗细。第二个字幕=“ doespaçosideral”，在这里我称为T，

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

Firefox / 70.0结果：在左侧放置文本，并用较小的字体书写

主显节/3.14.1：精确定位文本。 T在右侧，正常大小。

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

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

2 个答案: