WEBVTT FILE

1
00:00:00.000 --> 00:00:00.500 line:100% position:50%
This is a demo track to illustrate positioning features of cues.

2
00:00:00.500 --> 00:00:01.000 line:50% position:50%
Using HTML5 captions, you can position the cues anywhere.

3
00:00:01.000 --> 00:00:01.500 line:0% position:0% align:start
For example, here is a cue on the top left-corner.

4
00:00:01.500 --> 00:00:02.000 line:0% position:100% align:end
Or on the top-right corner.

5
00:00:02.000 --> 00:00:02.500 line:100% position:100% align:right
Bottom-right corner.

6
00:00:02.500 --> 00:00:03.000 line:100% position:0% align:left
And, as you might expect, the bottom-left one.

7
00:00:03.000 --> 00:00:03.500 line:50% position:50%
Cues are implicitly displayed within the viewport area.

8
00:00:03.500 --> 00:00:04.000 line:100% position:50% align:middle
And always on top of the controls, if these are visible.

9
00:00:04.000 --> 00:00:05.000 line:50% position:50%
You may even have multiple cues in the same time.

10
00:00:04.000 --> 00:00:05.000 line:0% position:0% align:start
Top-left cue.

11
00:00:04.000 --> 00:00:05.000 line:0% position:100% align:end
Top-right cue.

12
00:00:04.000 --> 00:00:05.000 line:100% position:50%
Bottom cue.

13
00:00:04.000 --> 00:00:05.000 line:25% position:100% align:end
Random cue 1.

14
00:00:04.000 --> 00:00:05.000 line:33% position:44% align:start
Random cue 2.

15
00:00:04.000 --> 00:00:05.000 line:55% position:23% align:start
Random cue 3.