简单示例中未应用 WebVTT 样式
Posted
技术标签:
【中文标题】简单示例中未应用 WebVTT 样式【英文标题】：WebVTT styling not applied in simple example 【发布时间】：2019-01-21 13:45:34 【问题描述】：我一直在尝试使用这个简单的 html 让 .vtt 字幕在视频上工作：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* video::cue
color:yellow
*/
</style>
</head>
<body>
<video 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!!!
【问题讨论】：
【参考方案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 规则来应用它们，就像您所做的那样在 <style> 标记中：
<style>
video::cue
color: red;
</style>
虽然，像::cue(b) 或::cue(#1) 这样更高级的选择器根本不可用。我真的不知道如何规避这个限制，例如，如果您只需要设置某个提示或提示的粗体部分的样式。
【讨论】：
【参考方案2】：我现在已经在 Linux 中测试了你的 vtt 文件。常见结果：颜色样式无效，粗体标签产生的文本具有更高的字体权重。第二个副标题 = “do espaço sideral”，我在这里称为 T，
Chrome/57.0 结果：文本定位，T 定位左侧，正常字体大小。
Firefox/70.0 结果：文本被定位，用较小的字体书写，在左侧
Epiphany/3.14.1：文本定位准确。 T在右侧，正常大小。
在编写新应用程序时，我发现与 JacopoStanchi 所写的相同：样式表中的“::cue”规则可以管理颜色和其他内容，请参阅 MDN 的 ::cue 设置
【讨论】：
以上是关于简单示例中未应用 WebVTT 样式的主要内容，如果未能解决你的问题，请参考以下文章