问题描述
我在定位 WebVTT 字幕时遇到问题。我想在视频的四个角放置 4 个占位符,以便与视频一起发布一些额外的数据。问题是,定位行为很奇怪,我想这样做有点骇人听闻,所以如果我为此完全滥用 WebVTT,请在评论中告诉我 generally supported 的方式是什么。
我目前取得的成果
要使用的视频:https://www.w3schools.com/html/mov_bbb.mp4
HTML:
<!DOCTYPE html>
<html>
<body>
<h1>Video test</h1>
<video width="640" height="480" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<track default src="track.vtt">
Your browser does not support the video tag.
</video>
</body>
</html>
track.vtt 文件:
WEBVTT
00:00:00.000 --> 00:00:10.000 line:0 align:left position:0% size:50%
AAAAAAAAA
00:00:00.000 --> 00:00:10.000 line:0 align:right position:100% size:50%
BBBBBBBBB
00:00:00.000 --> 00:00:10.000 line:100% align:left position:0% size:50%
CCCCCCCCC
00:00:00.000 --> 00:00:10.000 line:100% align:right position:100% size:50%
ddddddddD
我在开发工具中突出显示了 <video>
元素。
如您所见,“A”、“B”和“C”字幕放置正确,位于视频的角落。但由于某种原因,“D”未对齐并向左移动。
任何想法如何解决这个问题并将“D”放在视频的右下角?
解决方法
最后我在 https://www.speechpad.com/captions/webvtt#toc_14 上找到了一些定位参考
水平文本方向 | 垂直文本方向 | |
---|---|---|
position:0% align:start |
提示框的左边缘在屏幕的左边缘。 | 提示框的上边缘位于屏幕的上边缘。 |
position:0% align:center |
提示框的中心在屏幕的左边缘。框的左半部分在屏幕外。 | 提示框的中心位于屏幕的顶部边缘。盒子的上半部分在屏幕外。 |
position:0% align:end |
提示框的右边缘在屏幕的左边缘。整个盒子都在屏幕外。 | 提示框的下边缘位于屏幕的上边缘。整个盒子都在屏幕外。 |
position:0%,line-left align:end |
提示框的右边缘在屏幕的右边缘。 | 提示框的上边缘位于屏幕的上边缘。 |
position:50% align:start |
提示框的左边缘位于屏幕的水平中心。 | 提示框的顶部边缘位于屏幕的垂直中心。 |
position:50% align:center |
提示框的中心在屏幕的水平中心。 | 提示框的中心在屏幕的垂直中心。 |
position:50% align:end |
提示框的右边缘位于屏幕的水平中心。 | 提示框的下边缘位于屏幕的垂直中心。 |
position:100% align:start |
提示框的左边缘在屏幕的右边缘。整个盒子都在屏幕外。 | 提示框的上边缘位于屏幕的下边缘。整个盒子都在屏幕外。 |
position:100%,line-right align:start |
提示框的右边缘在屏幕的右边缘。 | 提示框的下边缘位于屏幕的下边缘。 |
position:100% align:center |
提示框的中心在屏幕的右边缘。框的右半部分在屏幕外。 | 提示框的中心在屏幕的底部边缘。盒子的下半部分在屏幕外。 |
position:100% align:end |
提示框的右边缘在屏幕的右边缘。 | 提示框的下边缘位于屏幕的下边缘。 |