logo标签列表

HTML5字幕可以使用CSS定位吗？

javascriptcsshtmlvideosubtitle
7
我正在使用自定义的HTML5应用程序在本地网络上流视频，现在我正在添加字幕支持。
我有大约500个从.srt转换而来的.vtt字幕。在我将它们从.srt转换后，我注意到它们显示在屏幕底部，我想让它们有一点margin-bottom。
我能够使用css伪元素::cue对字幕进行样式设置，但只支持字体大小、颜色和背景等属性。似乎不支持任何边距、填充或定位规则。
在编写脚本修改所有.vtt文件以添加line:XX%到cues（这是我目前找到的唯一一种移动它们的方法）之前，我想知道是否有一种方法可以定位字幕，而无需修改所有.vtt文件。
如果禁用我的自定义控件并尝试默认控件。当一个字幕被显示并且我把鼠标放在视频上显示控件时，字幕会向上移动，当控件在几秒钟后自动隐藏时，该行字幕停留在那个位置。但是下一行会向下移动。这就是我想知道是否可以在不编辑.vtt文件的情况下移动它们的原因，因为显示控件会将它们向上移动，也许有一种我可以通过编程实现的方法。
因此，问题是，是否可以使用CSS或任何其他方法定位.vtt字幕，而不是修改.vtt文件？
这是我用于测试的基本代码：
<video controls autoplay>
    <source src="http://192.168.0.1/video.mp4" type="video/mp4" />
    <track src="http://192.168.0.1/subtitles.vtt" kind="subtitles" srclang="en" label="English" default />
</video>
<style>
    video::cue {
        font-size:100%;
        color:white;
    }
</style>
1
阅读文档（https://developer.mozilla.org/en-US/docs/Web/CSS/::cue），似乎至少不能使用CSS完成此操作。 - Jaromanda X
请查看此W3C webvtt-cue-line。 - Patrick Mlr
5个回答
7
这不是 CSS，但如果新访客想要使用 JS 解决问题：
const track = document.getElementsByTagName('track')[0].track;

// Position the cue at the top
track.activeCues[0].line = 0;

// Position the cue at the bottom (default)
track.activeCues[0].line = -1;

// Move the cue up 3 lines to make room for video controls
track.activeCues[0].line = -4;
2
您可以使用textTrack.activeCues[0].text从单个提示中提取文本，并在div中显示它们并设置div的位置。将其翻译成中文就是：您可以使用textTrack.activeCues[0].text从单个提示中提取文本，并在div中显示它们，然后设置div的位置。
2

我能想到的最好的解决方案（使用React+Typescript编写，原理适用于任何地方。虽然有些hacky但是很有效）。主要思路如下：

  1. 等待 track 元素的加载事件触发
  2. 获取 track 的 VTT 词幕
  3. 设置每个词幕的 line 属性
trackRef = (node: HTMLTrackElement) => {
    if (node == null) return

    node.addEventListener('load', () => {
        if (node.track.cues == null) return
        Array.from(node.track.cues).forEach((c) => {
            (c as VTTCue).line = -4
        })
    })
}

//...

<video>
    <source
        src="..."
    />
    <track
        default
        src="..."
        ref={this.trackRef}
    />
</video>
1
你可以为 ::cue 设置 line-height，但问题在于如果字幕跨越多行，则行之间的间隔会增加。
0

您可以使用在嵌入HTML页面中定义的CSS样式或直接嵌入到.vtt文件中的CSS样式来自定义.vtt字幕的外观。

VTT规范具有一些内置的对齐选项，如下所示（取自https://www.delphiki.com/webvtt/#cue-settings）：

WEBVTT FILE

1
01:23:45.678 --> 01:23:46.789 D:vertical
Hello world!

2
01:23:48.910 --> 01:23:49.101 S:50%
Hello
world!

上述方法适用于您想要与其他帧不同样式的特定字幕帧。如果您需要将样式应用于所有字幕，请参见下面有关如何从包含页面设置样式的说明。

VTT文件内的样式

WEBVTT

STYLE
::cue {
    background-color:rgba(0, 0, 0, 0.8);
    color: rgb(255, 200, 0);
    padding-bottom: 2em;
}
::cue(b) {
  color: red;
}
::cue(.myclass) {
    color: red;
}

1
00:00:00.000 --> 00:00:11.040
<b>bold</b>
<i>italic</i>
<u>underscored</u>
<c.myclass>Styled</c>

❗️请务必阅读 Mozilla VTT文档，因为VTT中有关空行的规则非常严格。 vtt验证器将帮助检测错误。

在HTML容器页面中设置样式

如果本地对齐选项不足以满足要求，则可以应用自定义样式。

/* in the HTML file embedding the video */
video::cue {
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffc800;
    padding-bottom: 2em;
}

video::cue(b) {
    color: rgb(51, 216, 18);
}


video::cue(.myclass) {
    color: red;
}

另请参阅

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接