OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Reference for WebVTT rendering, repositioning of 9 cues that overlap comp
letely</title> | 2 <title>Reference for WebVTT rendering, repositioning of 9 cues that overlap comp
letely</title> |
3 <style> | 3 <style> |
4 .video { | 4 .video { |
5 display: inline-block; | 5 display: inline-block; |
6 width: 720px; | 6 width: 180px; |
7 height: 720px; | 7 height: 180px; |
8 outline: solid; | 8 outline: solid; |
9 position: relative | 9 position: relative; |
| 10 font-size: 9px |
10 } | 11 } |
11 #cue1 { | 12 #cue1 { |
12 position: absolute; | 13 position: absolute; |
13 top: 50%; | 14 top: 50%; |
14 left: 50%; | 15 left: 50%; |
15 right: 0; | 16 right: 0; |
16 margin-top: -18px; | 17 margin-top: -4.5px; |
17 margin-left: -18px; | 18 margin-left: -4.5px; |
18 color: #000 | 19 color: #000 |
19 } | 20 } |
20 #cue2 { | 21 #cue2 { |
21 position: absolute; | 22 position: absolute; |
22 top: 50%; | 23 top: 50%; |
23 left: 50%; | 24 left: 50%; |
24 right: 0; | 25 right: 0; |
25 margin-top: -54px; | 26 margin-top: -13.5px; |
26 margin-left: -18px; | 27 margin-left: -4.5px; |
27 color: #222 | 28 color: #222 |
28 } | 29 } |
29 #cue3 { | 30 #cue3 { |
30 position: absolute; | 31 position: absolute; |
31 top: 50%; | 32 top: 50%; |
32 left: 50%; | 33 left: 50%; |
33 right: 0; | 34 right: 0; |
34 margin-top: -18px; | 35 margin-top: -4.5px; |
35 margin-left: -54px; | 36 margin-left: -13.5px; |
36 color: #444 | 37 color: #444 |
37 } | 38 } |
38 #cue4 { | 39 #cue4 { |
39 position: absolute; | 40 position: absolute; |
40 top: 50%; | 41 top: 50%; |
41 left: 50%; | 42 left: 50%; |
42 right: 0; | 43 right: 0; |
43 margin-top: -18px; | 44 margin-top: -4.5px; |
44 margin-left: 18px; | 45 margin-left: 4.5px; |
45 color: #666 | 46 color: #666 |
46 } | 47 } |
47 #cue5 { | 48 #cue5 { |
48 position: absolute; | 49 position: absolute; |
49 top: 50%; | 50 top: 50%; |
50 left: 50%; | 51 left: 50%; |
51 right: 0; | 52 right: 0; |
52 margin-top: 18px; | 53 margin-top: 4.5px; |
53 margin-left: -18px; | 54 margin-left: -4.5px; |
54 color: #888 | 55 color: #888 |
55 } | 56 } |
56 #cue6 { | 57 #cue6 { |
57 position: absolute; | 58 position: absolute; |
58 top: 50%; | 59 top: 50%; |
59 left: 50%; | 60 left: 50%; |
60 right: 0; | 61 right: 0; |
61 margin-top: -54px; | 62 margin-top: -13.5px; |
62 margin-left: -54px; | 63 margin-left: -13.5px; |
63 color: #aaa | 64 color: #aaa |
64 } | 65 } |
65 #cue7 { | 66 #cue7 { |
66 position: absolute; | 67 position: absolute; |
67 top: 50%; | 68 top: 50%; |
68 left: 50%; | 69 left: 50%; |
69 right: 0; | 70 right: 0; |
70 margin-top: -54px; | 71 margin-top: -13.5px; |
71 margin-left: 18px; | 72 margin-left: 4.5px; |
72 color: #ccc | 73 color: #ccc |
73 } | 74 } |
74 #cue8 { | 75 #cue8 { |
75 position: absolute; | 76 position: absolute; |
76 top: 50%; | 77 top: 50%; |
77 left: 50%; | 78 left: 50%; |
78 right: 0; | 79 right: 0; |
79 margin-top: 18px; | 80 margin-top: 4.5px; |
80 margin-left: -54px; | 81 margin-left: -13.5px; |
81 color: #eee | 82 color: #eee |
82 } | 83 } |
83 #cue9 { | 84 #cue9 { |
84 position: absolute; | 85 position: absolute; |
85 top: 50%; | 86 top: 50%; |
86 left: 50%; | 87 left: 50%; |
87 right: 0; | 88 right: 0; |
88 margin-top: 18px; | 89 margin-top: 4.5px; |
89 margin-left: 18px; | 90 margin-left: 4.5px; |
90 color: green | 91 color: green |
91 } | 92 } |
92 .cue { | 93 .cue { |
93 width: 36px; | 94 width: 9px; |
94 text-align: center | 95 text-align: center |
95 } | 96 } |
96 .cue > span { | 97 .cue > span { |
97 font-family: Ahem, sans-serif; | 98 font-family: Ahem, sans-serif; |
98 background: rgba(0,0,0,0.8); | 99 background: rgba(0,0,0,0.8); |
99 font-size: 36px; | |
100 } | 100 } |
101 </style> | 101 </style> |
102 <div class="video"> | 102 <div class="video"> |
103 <span class="cue" id="cue1"><span>1</span></span> | 103 <span class="cue" id="cue1"><span>1</span></span> |
104 <span class="cue" id="cue2"><span>2</span></span> | 104 <span class="cue" id="cue2"><span>2</span></span> |
105 <span class="cue" id="cue3"><span>3</span></span> | 105 <span class="cue" id="cue3"><span>3</span></span> |
106 <span class="cue" id="cue4"><span>4</span></span> | 106 <span class="cue" id="cue4"><span>4</span></span> |
107 <span class="cue" id="cue5"><span>5</span></span> | 107 <span class="cue" id="cue5"><span>5</span></span> |
108 <span class="cue" id="cue6"><span>6</span></span> | 108 <span class="cue" id="cue6"><span>6</span></span> |
109 <span class="cue" id="cue7"><span>7</span></span> | 109 <span class="cue" id="cue7"><span>7</span></span> |
110 <span class="cue" id="cue8"><span>8</span></span> | 110 <span class="cue" id="cue8"><span>8</span></span> |
111 <span class="cue" id="cue9"><span>9</span></span> | 111 <span class="cue" id="cue9"><span>9</span></span> |
112 </div> | 112 </div> |
OLD | NEW |