-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathparser.html
118 lines (103 loc) · 4 KB
/
parser.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
<!-- Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live WebVTT Validator</title>
<style>
body { font:80% Helvetica Neue, sans-serif }
h1 { font-size:1.2em }
textarea { width:100%; height:30em }
.copyright { font-size:.8em; color:gray }
.video_viewport { width: 360px; height: 240px; background-color: yellow; margin: 5px;}
</style>
<script src="helpers.js"></script>
<script src="parser.js"></script>
<script src="serialize.js"></script>
<script src="dom_construction.js"></script>
<script>
var test = function() {
"use strict";
var video_viewport = [];
var parser, parsedData, dom, p, cue, i;
// assume video dimensions
var videoWidth = 360;
var videoHeight = 240;
// parse textarea
parser = new WebVTTParser();
parsedData = parser.parse(document.getElementsByTagName("textarea")[0].value, document.getElementById("kind").value);
// print errors and WebVTT file as parsed
printErrors(parsedData.errors, parsedData.time);
printWebVTTFile(parsedData);
// paint every cue into a "screenshot"
var screenshots = document.getElementById("screenshots");
// make sure we can still do live painting updates
// so each call to the test function needs to start without screenshots
while (screenshots.hasChildNodes()) {
screenshots.removeChild(screenshots.lastChild);
}
// create new rendering class
dom = new WebVTT2DocumentFragment();
// calculate the regions and their styling
dom.prepareRegions(parsedData.metadatas, videoWidth, videoHeight);
// add a video viewport & regions per cue to the screenshots div
for (i = 0; i < parsedData.cues.length; i++) {
video_viewport[i] = document.createElement("div");
video_viewport[i].style.position = 'relative';
video_viewport[i].style.overflow = 'hidden';
video_viewport[i].setAttribute("class", "video_viewport");
screenshots.appendChild(video_viewport[i]);
dom.cloneRegions(video_viewport[i]);
}
// calculate the document fragments and their styling for each cue
// & append into viewports
for (i = 0; i < parsedData.cues.length; i++) {
cue = parsedData.cues[i];
dom.captionShow(cue, i, videoWidth, videoHeight, video_viewport[i]);
p = document.createElement("p");
p.textContent = "Cue from " + cue.startTime + " to " + cue.endTime;
screenshots.insertBefore(p, video_viewport[i]);
}
};
onhashchange = function(e) { debug(e.newURL) };
</script>
</head>
<body onload="test();debug(location.href);">
<title>Live WebVTT Validator</title>
<h1>Live <a href="http://dev.w3.org/html5/webvtt/">WebVTT</a> Validator</h1>
<p>Add #debug to the URL to display the parsed WebVTT file.</p>
<textarea oninput="test()">WEBVTT
Kind: captions
Language: en-US
Region: id=fred width=80% lines=3 viewportanchor=10%,90% regionanchor=0%,100% scroll=up
Region: id=bill width=50% lines=4 viewportanchor=50%,50% regionanchor=50%,50%
00:00:05.940 --> 00:00:10.610 line:25%
WHEN I GET A SICK BIRD,
00:00:07.040 --> 00:00:11.700 region:fred
THAT JUST <b>STOPS</b> EVERYTHING
1
00:00:09.410 --> 00:00:12.910 region:bill position:20%
FROM MOVING FROM MY PLACE
00:00:10.610 --> 00:00:14.100 size:50%
TO ANYWHERE
ELSE OR BEYOND
</textarea>
<p>Kind:
<select id="kind" onchange="test();">
<option>subtitles/captions/descriptions</option>
<option>metadata</option>
<option>chapters</option>
</select>
</p>
<p id="status">You need JavaScript for this service.</p>
<ol></ol>
<pre hidden></pre>
<div id="screenshots"></div>
<p class=copyright><a href="https://github.com/annevk/webvtt">Source code for parser</a> available under <a href="http://creativecommons.org/publicdomain/zero/1.0/">CC0</a>.
</p>
<p class=copyright><a href="https://github.com/silviapfeiffer/WebVTT-with-regions">Source code changes</a> available under <a href="http://creativecommons.org/publicdomain/zero/1.0/">CC0</a>.
</p>
</body>
</html>