在视频的四个角定位 WebVTT 文本叠加字幕

如何解决在视频的四个角定位 WebVTT 文本叠加字幕

我在定位 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`	提示框的右边缘在屏幕的右边缘。	提示框的下边缘位于屏幕的下边缘。