HTML5字幕能用css定位吗？
HTML5字幕能用css定位吗？
提问于 2017-07-06 05:23:18
我正在使用一个自定义的HTML5应用程序在本地网络上播放视频，现在我增加了字幕支持。
我有大约500个.vtt字幕从.srt转换而来。在我从.srt转换它们之后，我注意到它们就显示在屏幕的底部，我希望它们有一个小的margin-bottom。
我能够用css伪元素：：提示的字幕样式，但只适用于字体大小、颜色、背景。似乎不支持任何保证金，填充或定位规则。
在编写脚本修改所有.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>回答 4
Stack Overflow用户
回答已采纳
发布于 2019-12-05 08:10:49
这不是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;Stack Overflow用户
发布于 2019-03-26 11:26:15
您可以使用textTrack.activeCues.text从单个提示中提取文本，并将其显示在div中并设置div的位置。
Stack Overflow用户
发布于 2017-07-06 05:39:12
您可以将行高给出：：线索，但问题是如果字幕进入多行，那么行之间的差距就会增大。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44940370
复制相关文章
相似问题
腾讯云开发者
