HTML5字幕可以用css定位吗？答案

【问题标题】：Can HTML5 subtitles be positioned with css?HTML5字幕可以用css定位吗？
【发布时间】：2017-12-09 22:58:15
【问题描述】：

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

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

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

在编写脚本以修改所有 .vtt 文件以将 line:XX% 添加到提示之前（这是迄今为止我发现的唯一移动它们的方法），我想知道是否有一种方法可以定位字幕而不必修改所有 .vtt 文件。

如果我禁用自定义控件并尝试使用默认控件。当显示字幕并且我将鼠标放在视频上以显示控件时，字幕确实向上移动，并且当控件在几秒钟后自动隐藏时，该行字幕会停留在该位置。但下一行向后移动。这就是我想知道是否可以在不编辑 .vtt 文件的情况下移动它们的原因，因为显示控件会将它们向上移动，也许有一种方法可以通过编程方式完成。

所以问题是，除了修改 .vtt 文件之外，可以使用 CSS 或任何其他方法定位 .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>

【问题讨论】：

阅读 documentation 似乎你至少不能用 CSS 做到这一点
看看这个W3C webvtt-cue-line

标签： javascript css html video subtitle

【解决方案1】：

这不是 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】：

此链接可能有用，请更改其中的行位置

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

【讨论】：

【解决方案3】：

您可以使用 textTrack.activeCues[0].text 从单个提示中提取文本并将它们显示在 div 中并设置 div 的位置。

【讨论】：

【解决方案4】：

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

【讨论】：