blob: 3971674ccd6c976123a8d15975d1172b92b43111 [file] [log] [blame]
<!DOCTYPE html>
<script src="../media-file.js"></script>
<script>
var mediaFile = findMediaFile('video', '../content/test');
</script>
<style>
.container {
position: relative;
display: inline-block;
width: 320px;
height: 240px;
}
.cue {
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
}
.cue.start {
right: 50%;
text-align: end;
}
.cue.middle {
text-align: center;
}
.cue.end {
left: 50%;
text-align: start;
}
.cue > span {
font-family: sans-serif;
background: green;
color: green;
font-size: 50px;
padding: 2px;
}
</style>
<div class="container">
<video><script>document.currentScript.parentNode.src = mediaFile;</script></video>
<div class=video><div class="cue start"><span>&#x5d0;&#x5d1;&#x5d2;</span></div></div>
</div>
<div class="container">
<video><script>document.currentScript.parentNode.src = mediaFile;</script></video>
<div class=video><div class="cue middle"><span>&#x5d0;&#x5d1;&#x5d2;</span></div></div>
</div>
<div class="container">
<video><script>document.currentScript.parentNode.src = mediaFile;</script></video>
<div class=video><div class="cue end"><span>&#x5d0;&#x5d1;&#x5d2;</span></div></div>
</div>