0

我在定位 WebVTT 字幕时遇到问题。我想在视频的四个角落放置 4 个占位符，以便在视频中发布一些额外的数据。问题是，定位的行为很奇怪，我想这样做有点不合时宜，所以如果我为此完全滥用 WebVTT，请在评论中让我知道通常支持的方式。

我目前取得的成绩

在此处输入图像描述

使用视频：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”放在视频的右下角？

4

1 回答 1

0

最后我设法在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 提示框的右边缘位于屏幕的右边缘。 提示框的底边位于屏幕的底边。
于 2021-05-07T07:34:53.127 回答