Question

我的 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提供 ID ，并在 css中指定其font-size ，当然将 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 文件的方式。

Answer 1

在browsers that support Shadow DOM中，您可以设置字幕样式。它可能因浏览器而异，但在Chrome 42中（截至本文撰写时），您可以使用此CSS：

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

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

Answer 2

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

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

::cue {
  font-size: 1.2em;
}

如何在html5中更改视频字幕字体大小？

2 个答案: