HTML5字幕可以用css定位吗？

Question

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

我有大约500个.vtt字幕从.srt转换。在我从.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>

Answer 1

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

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

Answer 2

您可以将行高提供给:: cue，但问题是如果字幕进入多行，那么行之间的间隙会增加。

Answer 3

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