-
Notifications
You must be signed in to change notification settings - Fork 4
/
cpc_video.html
120 lines (109 loc) · 4 KB
/
cpc_video.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
<!-- Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body { font:80% Helvetica Neue, sans-serif }
h1 { font-size:1.2em }
.copyright { font-size:.8em; color:gray }
#caption_overlay { position:relative; overflow:hidden; width: 360px; height: 240px; background-color: yellow; margin: 0px; }
video { width: 360px; height: 240px; }
.r1 { background-color: red; }
</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>CPC Caption Video Rendering</title>
<h1>CPC Caption Video Using <a href="http://dev.w3.org/html5/webvtt/">WebVTT</a></h1>
<p>
<div id="caption_overlay">
<video id="video">
<source src="cpc_video.webm" type="video/webm">
<source src="cpc_video.mp4" type="video/mp4">
</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() {
// download the caption file
var xhReq = new XMLHttpRequest();
xhReq.open("GET", "cpc_video.vtt", true);
xhReq.onreadystatechange = onResponse;
xhReq.send(null);
function onResponse() {
if (xhReq.readyState != 4) { return; }
var serverResponse = xhReq.responseText;
// parse vtt file
parser = new WebVTTParser();
parsedData = parser.parse(serverResponse);
// 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 and it needs to be run on a Web server.</p>
<p>You also need a browser that supports the TextTrack API, even if its rendering is not being used.</p>
<p>Video courtesy of <a href="http://www.cpcweb.com/">CPC captions</a> for research purposes - also <a href="http://www.youtube.com/watch?v=zEKLqMS_HuA">available on YouTube.</a></p>
<p>Note: Paint-on captions don't work with this JS library.</p>
<p class=copyright><a href="https://github.com/silviapfeiffer/WebVTT-with-regions">Source code</a> available under CC0.
</p>
</body>
</html>