我一直在尝试使用这个简单的 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 之类的东西也可以使用，但仍然没有像我给出的那样应用额外的样式。我不知道为什么会发生这种情况或如何解决这个问题。这是一个错误吗？顺便说一句，它在 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!!!
最佳答案
WebVTT 文件中的样式在任何浏览器中都尚未标准化。希望很快就会到来。
引用:跳转到高级文件格式> WebVTT:https://support.google.com/youtube/answer/2734698?hl=en
当它出现时，我不知道是否可以使用 just one STYLE keyword 执行多个 CSS block 。不过。
还有什么可能:
您可以使用cue settings非常模块化:
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)根本不可用。如果您必须仅对某个提示或提示的粗体部分进行样式化，我真的不知道如何规避此限制。
关于html - WebVTT 样式未应用于简单示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54291332/