blob: 0abadb47e3bd9b2f3adac470eb71236a316bc22c [file] [log] [blame]
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.