HTML5字幕可以用css定位吗？

Question

我正在使用自定义 HTML5 应用程序在本地网络上流式传输视频，现在我正在添加字幕支持。

我有大约 500 个从 .srt 转换而来的 .vtt 字幕。在我将它们从 .srt 转换后，我注意到它们显示在屏幕底部，我希望它们有一点 margin-bottom.

我可以使用 css 伪元素 ::cue 来设置字幕样式，但仅限于字体大小、颜色、背景。似乎不支持任何边距、填充或定位规则。

在编写脚本以修改所有 .vtt 文件以将 line:XX% 添加到提示之前（这是迄今为止我发现的唯一移动它们的方法），我想知道是否有办法定位字幕而无需修改所有 .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>

Answer 1

这个link可能有用，更改其中的行位置

http://ronallo.com/demos/webvtt-cue-settings/

Answer 2

您可以将 line-height 指定给 ::cue，但它的问题是如果字幕进入多行，则行与行之间的间隙会增加。

Answer 3

您可以使用 textTrack.activeCues[0].text 从 individual cues 中提取文本并将其显示在 div 中并设置 div.[= 的位置10=]

Answer 4

这不是 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;

Answer 5

我能想到的最好的解决方案（在 React+Typescript 中，原则应该在任何地方都有效。hacky 但有效）。主要思想是：

等待加载事件在 track 元素上触发
获取轨道的 VTT 提示
设置每个提示的行属性

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>

HTML5字幕可以用css定位吗？

Can HTML5 subtitles be positioned with css?

html

javascript

css

video

subtitle