-
Notifications
You must be signed in to change notification settings - Fork 4
/
player.html
138 lines (121 loc) · 4.79 KB
/
player.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!-- Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { font:80% Helvetica Neue, sans-serif }
h1 { font-size:1.2em }
textarea { width:100%; height:30em }
.copyright { font-size:.8em; color:gray }
#caption_overlay { position:relative; overflow:hidden; width: 360px; height: 240px; background-color: yellow; margin: 5px; }
video { width: 360px; height: 240px; }
</style>
<script src="helpers.js"></script>
<script src="parser.js"></script>
<script src="serialize.js"></script>
<script src="dom_construction.js"></script>
</head>
<body onload="test()">
<title>Live WebVTT Renderer</title>
<h1>Live <a href="http://dev.w3.org/html5/webvtt/">WebVTT</a> Renderer</h1>
<textarea oninput="test()">WEBVTT
Kind: captions
Language: en-US
Region: id=r1 width=80% lines=4 viewportanchor=10%,90% regionanchor=0%,100% scroll=up
Region: id=bill width=50% lines=4 viewportanchor=50%,50% regionanchor=50%,50%
17
00:00:00.781 --> 00:00:05.124 region:r1
NO<00:00:48.814>W <00:00:48.847>TH<00:00:48.881>E <00:00:48.914>RO<00:00:48.947>LL<00:00:48.981>-U<00:00:49.014>P <00:00:49.048>MO<00:00:49.081>DE<00:00:49.114>.
18
00:00:02.884 --> 00:00:10.124 region:r1
TH<00:00:50.917>IS<00:00:50.950> M<00:00:50.984>OD<00:00:51.017>E <00:00:51.050>IS<00:00:51.084> N<00:00:51.117>OR<00:00:51.151>MA<00:00:51.184>LL<00:00:51.217>Y <00:00:51.251>US<00:00:51.284>ED
19
00:00:04.018 --> 00:00:10.124 region:r1
FO<00:00:52.051>R <00:00:52.084>TV<00:00:52.118> N<00:00:52.151>EW<00:00:52.184>S <00:00:52.218>PR<00:00:52.251>OG<00:00:52.285>RA<00:00:52.318>MS<00:00:52.351>.
20
00:00:06.187 --> 00:00:10.124 region:r1
CA<00:00:54.220>PT<00:00:54.253>IO<00:00:54.287>N <00:00:54.320>LI<00:00:54.353>NE<00:00:54.387>S <00:00:54.420>RO<00:00:54.454>LL<00:00:54.487> U<00:00:54.520>P
21
00:00:07.120 --> 00:00:10.124 region:r1
FR<00:00:55.655>OM<00:00:55.688> T<00:00:55.722>HE<00:00:55.755> S<00:00:55.788>CR<00:00:55.822>EE<00:00:55.855>N <00:00:55.889>BO<00:00:55.922>TT<00:00:55.955>OM
22
00:00:07.622 --> 00:00:12.124 region:r1
ON<00:00:56.822>E <00:00:56.855>LI<00:00:56.889>NE<00:00:56.922> A<00:00:56.955>T <00:00:56.989>A <00:00:57.022>TI<00:00:57.056>ME<00:00:57.089>.
</textarea>
<p>
<div id="caption_overlay">
<video id="video">
<source src="Big_Buck_Bunny_extract.mp4" type="video/mp4">
<source src="Big_Buck_Bunny_extract.webm" type="video/webm">
</video>
</div>
<button id="play">Play</button>
<span id="currentTime"></span>
<span>Seek:</span>
<input id="goTime" type="number" name="seconds"/>
<a href="javascript: submit()">Go</a>
</p>
<script>
"use strict";
var video = document.getElementById("video");
var captionOverlay = document.getElementById("caption_overlay");
var parser, parsedData, dom;
var videoWidth = 360, videoHeight = 240;
var track, i;
var test = function() {
// parse textarea
parser = new WebVTTParser();
parsedData = parser.parse(document.getElementsByTagName("textarea")[0].value);
// calculate the document fragments and their styling for each cue
dom = new WebVTT2DocumentFragment();
dom.prepareRegions(parsedData.metadatas, videoWidth, videoHeight);
dom.appendRegions(captionOverlay);
// create TextTrack objects for each cue and add them to the video
track = video.addTextTrack("metadata", "captions", "en-US");
for (i = 0; i < parsedData.cues.length; i++) {
var cue;
cue = new TextTrackCue(parsedData.cues[i].startTime, parsedData.cues[i].endTime, i);
track.addCue(cue);
cue.addEventListener("enter", captionShow, false);
cue.addEventListener("exit", captionRemove, false);
}
};
function captionShow(evt) {
var cue;
cue = parsedData.cues[this.text];
dom.captionShow(cue, this.text, videoWidth, videoHeight, captionOverlay);
}
function captionRemove(evt) {
var cue;
cue = parsedData.cues[this.text];
dom.captionRemove(cue, this.text);
}
var play = document.getElementById("play");
play.addEventListener("click", togglePlay, false);
function togglePlay(evt) {
if (video.paused == false) {
video.pause();
play.innerHTML = "play";
} else {
video.play();
play.innerHTML = "pause";
}
}
var currentTime = document.getElementById("currentTime");
video.addEventListener("timeupdate", updateCurrentTime, false);
function updateCurrentTime(evt) {
currentTime.innerHTML = video.currentTime.toFixed(2);
}
function submit() {
var goTime = document.getElementById("goTime");
video.currentTime = parseInt(goTime.value);
}
</script>
<p>You need JavaScript for this service.</p>
<p class=copyright><a href="https://github.com/silviapfeiffer/WebVTT-with-regions">Source code</a> available under CC0.
</p>
</body>
</html>