| 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 |