Search code examples
htmlhtml5-videowebvttvideo-subtitles

Positioning WebVTT text overlay (subtitles) in four corners of the video

I have a problem with positioning WebVTT subtitles. I'd like to have 4 placeholders in four corners of the video to post some additional data along with the video. The problem is, the positioning acts weird and I guess it's kinda hackish way to do this, so if I'm totally abusing WebVTT for this, please let me know in the comment which generally supported way would be.

Current result I've achieved

enter image description here

Video to use: 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 file:

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

I've highligted <video> element in dev tools.

As you can see, the "A", "B" and "C" subtitles are placed correctly, in the corners of the video. But for some reason, "D" are misaligned and shifted to the left.

Any ideas how to fix this and place "D" in the lower right corner of the video?

Solution

  • Finally I managed to find some positioning reference on 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.