将 WebVTT 文本覆盖（字幕）定位在视频的四个角落答案

【问题标题】：Positioning WebVTT text overlay (subtitles) in four corners of the video将 WebVTT 文本覆盖（字幕）定位在视频的四个角落
【发布时间】：2021-05-07 15:34:53
【问题描述】：

我在定位 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”放在视频的右下角？

【问题讨论】：

标签： html html5-video webvtt video-subtitles

【解决方案1】：

我终于在https://www.speechpad.com/captions/webvtt#toc_14上找到了一些定位参考

	Horizontal Text Direction	Vertical Text Direction
`position:0% align:start`	Left edge of cue box is at left edge of screen.	Top edge of cue box is at top edge of screen.
`position:0% align:center`	Center of cue box is at left edge of screen. Left half of box is offscreen.	Center of cue box is at top edge of screen. Top half of box is offscreen.
`position:0% align:end`	Right edge of cue box is at left edge of screen. Entire box is offscreen.	Bottom edge of cue box is at top edge of screen. Entire box is offscreen.
`position:0%,line-left align:end`	Right edge of cue box is at right edge of screen.	Top edge of cue box is at top edge of screen.
`position:50% align:start`	Left edge of cue box is at horizontal center of screen.	Top edge of cue box is at vertical center of screen.
`position:50% align:center`	Center of cue box is at horizontal center of screen.	Center of cue box is at vertical center of screen.
`position:50% align:end`	Right edge of cue box is at horizontal center of screen.	Bottom edge of cue box is at vertical center of screen.
`position:100% align:start`	Left edge of cue box is at right edge of screen. Entire box is offscreen.	Top edge of cue box is at bottom edge of screen. Entire box is offscreen.
`position:100%,line-right align:start`	Right edge of cue box is at right edge of screen.	Bottom edge of cue box is at bottom edge of screen.
`position:100% align:center`	Center of cue box is at right edge of screen. Right half of box is offscreen.	Center of cue box is at bottom edge of screen. Bottom half of box is offscreen.
`position:100% align:end`	Right edge of cue box is at right edge of screen.	Bottom edge of cue box is at bottom edge of screen.

【讨论】：