OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../media-file.js"></script> | 2 <script src="../media-file.js"></script> |
3 <script> | 3 <script> |
4 var mediaFile = findMediaFile('video', '../content/test'); | 4 var mediaFile = findMediaFile('video', '../content/test'); |
5 </script> | 5 </script> |
6 <style> | 6 <style> |
7 .container { | 7 .container { |
8 position: relative; | 8 position: relative; |
9 display: inline-block; | 9 display: inline-block; |
10 width: 320px; | 10 width: 320px; |
11 height: 240px; | 11 height: 240px; |
12 } | 12 } |
13 .cue { | 13 .cue { |
14 position: absolute; | 14 position: absolute; |
15 top: 0; | 15 top: 0; |
16 left: 0; | 16 left: 0; |
17 right: 0; | 17 right: 0; |
18 overflow: hidden; | 18 overflow: hidden; |
19 } | 19 } |
20 .cue.start { | 20 .cue.start { |
21 text-align: start; | 21 text-align: start; |
22 } | 22 } |
23 .cue.middle { | |
24 text-align: center; | |
25 } | |
26 .cue.end { | |
27 text-align: end; | |
28 } | |
29 .cue > span { | 23 .cue > span { |
30 font-family: sans-serif; | 24 font-family: sans-serif; |
31 background: green; | 25 background: green; |
32 color: green; | 26 color: green; |
33 font-size: 50px; | 27 font-size: 120px; |
34 padding: 2px; | 28 padding: 2px; |
35 } | 29 } |
36 </style> | 30 </style> |
37 <div class="container"> | 31 <div class="container"> |
38 <video><script>document.currentScript.parentNode.src = mediaFile;</script></vi
deo> | 32 <video><script>document.currentScript.parentNode.src = mediaFile;</script></vi
deo> |
39 <div class=video><div class="cue start"><span>XXX</span></div></div> | 33 <div class=video><div class="cue start"><span>XXX</span></div></div> |
40 </div> | 34 </div> |
41 <div class="container"> | |
42 <video><script>document.currentScript.parentNode.src = mediaFile;</script></vi
deo> | |
43 <div class=video><div class="cue middle"><span>XXX</span></div></div> | |
44 </div> | |
45 <div class="container"> | |
46 <video><script>document.currentScript.parentNode.src = mediaFile;</script></vi
deo> | |
47 <div class=video><div class="cue end"><span>XXX</span></div></div> | |
48 </div> | |
OLD | NEW |