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

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