logo标签列表

如何在HTML5中改变视频字幕的字体大小？

htmlwebvtt
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”指定一个“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文件的方法。

2个回答
9
更新: 现在已经是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支持它。

4

这是一个老话题，但在谷歌搜索结果中仍排名前列。以下是我的回答。

对于Firefox浏览器（我不知道其他浏览器），您可以在CSS中添加以下内容：

::cue {
  font-size: 1.2em;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接