| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <title>WebVTT rendering, a cue's align, position, line and size properties is possible to override using the DOM APIs</title> |
| <link rel="match" href="dom_override_cue_align_position_line_size-ref.html"> |
| <style> |
| html { overflow:hidden } |
| body { margin:0 } |
| ::cue { |
| font-family: Ahem, sans-serif; |
| color: green |
| } |
| </style> |
| <script src="/common/reftest-wait.js"></script> |
| <script> |
| function updateCue() { |
| var t = document.getElementById('track'); |
| var c = t.track.cues[0]; |
| c.align = 'start'; |
| c.position = 80; |
| c.line = 0; |
| c.size = 20; |
| c.text = 'There is nothing to see here people, move on'; |
| updateRendering(); |
| } |
| function updateRendering() { |
| var v = document.getElementById('video'); |
| v.onplaying = function() { |
| this.onplaying = null; |
| this.pause(); |
| takeScreenshot(); |
| }; |
| v.play(); |
| } |
| </script> |
| <video id="video" width="1280" height="720" autoplay onplaying="this.onplaying = null; this.pause(); updateCue();"> |
| <source src="/media/white.webm" type="video/webm"> |
| <source src="/media/white.mp4" type="video/mp4"> |
| <track id="track" src="support/test.vtt"> |
| <script> |
| document.getElementsByTagName('track')[0].track.mode = 'showing'; |
| </script> |
| </video> |
| </html> |