5

我的html看起来像这样：

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <video controls="" autoplay="" name="media">
            <source src="videoPath" type="video/mp4">
            <track label="English" kind="subtitles" srclang="en" src="subs.vtt" default>
        </video>
    </body>
</html>

因为subs.vtt是字幕文件。

如何更改附加到track元素的字幕大小？

我尝试创建一个css文件，然后给出track一个idfont-size并在css中指定它，当然将css链接到html，但大小没有改变。

我还尝试了.vtt文件本身的样式：

WEBVTT

1
00:00:43.889 --> 00:00:46.949 size:200%
<i>Introduction...</i>

它没有改变大小。

我也尝试过我在网上找到的类似的东西：

WEBVTT
<link href="style.css" rel="stylesheet" type="text/css" />
1
00:00:43.889 --> 00:00:46.949
<c vIntro><i>Introduction...</i></c>

在css中：

.vIntro{
  font-size: 5em;
}

但这也没有改变大小。

我更喜欢不接触.vtt文件的方式。

4

2 回答 2

8

更新：现在是 2021 年，距离最初的答案已经写了六年多，Shadow DOM 有了更广泛的支持，并改变了规范。

原始答案：

在支持 Shadow DOM的浏览器中，您可以设置字幕样式。它可能因浏览器而异，但在 Chrome 42（撰写本文时为当前版本）中，您可以使用以下 CSS：

video::-webkit-media-text-track-display {
  font-size: 200%;
}

鉴于那里有供应商前缀，我想其他浏览器可能需要额外的规则。再说一次，支持 Shadow DOM 的浏览器并不多。在撰写本文时，它只是 Chrome、Opera 和 Android/Chrome-for-Android。

于 2015-05-14T20:23:54.793 回答
4

这是一个古老的主题，但仍在谷歌的第一个结果中。所以这是我的答案。

对于 firefox（我不知道其他浏览器），你可以把它放在你的 css 中：

::cue {
  font-size: 1.2em;
}
于 2018-06-06T09:56:37.863 回答