我正在使用自定义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>
答案 0 :(得分:3)
此链接可能有用,更改其中的行位置
答案 1 :(得分:1)
您可以将行高赋予:: cue,但问题是如果字幕进入多行,则行之间的间隙会增加。
答案 2 :(得分:0)
您可以使用textTrack.activeCues [0] .text从单个提示中提取文本并将其显示在div中并设置div的位置。
答案 3 :(得分:0)
这不是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;