Html 在视频的四个角定位WebVTT文本覆盖（字幕）_Html_Html5 Video_Webvtt_Video Subtitles

Html 在视频的四个角定位WebVTT文本覆盖（字幕）

html

Html 在视频的四个角定位WebVTT文本覆盖（字幕）,html,html5-video,webvtt,video-subtitles,Html,Html5 Video,Webvtt,Video Subtitles,我在定位WebVTT字幕时遇到问题。我想有4个占位符在四个角落的视频发布一些额外的数据随着视频。问题是，定位行为怪异，我想这是一种黑客的方式来做这件事，所以如果我完全滥用WebVTT为此，请让我在评论中知道哪种方式将是我目前取得的成绩要使用的视频： HTML: 我在开发工具中突出了元素如您所见，“A”、“B”和“C”字幕正确放置在视频的各个角落。但由于某些原因，“D”没有对齐并向左移动有没有办法解决这个问题并将“D”放在视频的右下角？最后我设法在视频上找到了一些定位参考水平文字方向

我在定位WebVTT字幕时遇到问题。我想有4个占位符在四个角落的视频发布一些额外的数据随着视频。问题是，定位行为怪异，我想这是一种黑客的方式来做这件事，所以如果我完全滥用WebVTT为此，请让我在评论中知道哪种方式将是

我目前取得的成绩

要使用的视频：

HTML:

我在开发工具中突出了

元素

如您所见，“A”、“B”和“C”字幕正确放置在视频的各个角落。但由于某些原因，“D”没有对齐并向左移动

有没有办法解决这个问题并将“D”放在视频的右下角？

最后我设法在视频上找到了一些定位参考

水平文字方向垂直文本方向

位置：0%对齐：开始

提示框的左边缘位于屏幕的左边缘。提示框的上边缘位于屏幕的上边缘。

位置：0%对齐：居中

提示框的中心位于屏幕的左边缘。框的左半部分在屏幕外。提示框的中心位于屏幕的上边缘。盒子的上半部分在屏幕外。

位置：0%对齐：结束

提示框的右边缘位于屏幕的左边缘。整个盒子都在屏幕外。提示框的下边缘位于屏幕的上边缘。整个盒子都在屏幕外。

位置：0%，行左对齐：结束

提示框的右边缘位于屏幕的右边缘。提示框的上边缘位于屏幕的上边缘。

位置：50%对齐：开始

提示框的左边缘位于屏幕的水平中心。提示框的上边缘位于屏幕的垂直中心。

位置：50%对齐：居中

提示框的中心位于屏幕的水平中心。提示框的中心位于屏幕的垂直中心。

位置：50%对齐：结束

提示框的右边缘位于屏幕的水平中心。提示框的底边位于屏幕的垂直中心。

位置：100%对齐：开始

提示框的左边缘位于屏幕的右边缘。整个盒子都在屏幕外。提示框的上边缘位于屏幕的下边缘。整个盒子都在屏幕外。

位置：100%，行右对齐：开始

提示框的右边缘位于屏幕的右边缘。提示框的底边位于屏幕的底边。

位置：100%对齐：居中

提示框的中心位于屏幕的右边缘。盒子的右半部分在屏幕外。提示框的中心位于屏幕的底部边缘。盒子的下半部分在屏幕外。

位置：100%对齐：结束

提示框的右边缘位于屏幕的右边缘。提示框的底边位于屏幕的底边。

<!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>

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