-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathcaption-invest.html
113 lines (88 loc) · 3.99 KB
/
caption-invest.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<video id="video-source" width"240" height="135" controls>
<source type="video/webm" src="/video/biden2006nsa.webm" />
<source type="video/mp4" src="/video/biden2006nsa.mp4" />
</video>
<canvas id="caption-canvas" width="240" height="135" style="border:1px dashed black;"></canvas>
<canvas id="target-canvas" width="240" height="135"></canvas>
<p>
<label for="caption-text">Caption:</label> <input id="caption-text" type="text" />
<a href="javascript:;" id="update">update</a>
</p>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--
<script type="text/javascript" src="js/jquery.jplayer.js"></script>
<script type="text/javascript" src="js/jquery.scrollto.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag.js"></script>
<script type="text/javascript" src="js/popcorn.js"></script>
<script type="text/javascript" src="js/popcorn.transcript.js"></script>
<script type="text/javascript" src="js/iemobile-fix.js"></script>
<script type="text/javascript" src="js/hap.js"></script>
-->
<script type="text/javascript" src="js/seriously/seriously.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.ascii.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.bleach-bypass.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.blend.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.colorcube.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.emboss.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.fader.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.invert.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.nightvision.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.noise.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.ripple.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.scanlines.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.sepia.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.sketch.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.tvglitch.js"></script>
<script type="text/javascript" src="js/seriously/effects/seriously.vignette.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
captionTest = {
init: function() {
var s = this.seriously = new Seriously();
var canvas = this.captionCanvas = document.getElementById('caption-canvas');
this.captionContext = canvas.getContext('2d');
this.captionSource = s.source("#caption-canvas");
this.videoSource = s.source("#video-source");
this.blend = s.effect('blend');
this.blend.top = this.captionSource;
this.blend.bottom = this.videoSource;
this.canvasTarget = s.target('#target-canvas');
this.canvasTarget.source = this.blend;
s.go();
// this.setCaption('beer goggles');
},
setCaption: function(caption) {
var canvas = this.captionCanvas,
ctx = this.captionContext,
x = canvas.width/2,
y = canvas.height/2;
// Reset the canvas
canvas.width = canvas.width;
// Firefox did not like quotation marks around any of the font names. But Chrome seems to group the bold with the first 1 instead.
ctx.font = '16px bold CrimsonRoman, Georgia, Times, serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#000';
ctx.fillText(caption, x+1, y+1);
ctx.fillStyle = '#fff';
ctx.fillText(caption, x, y);
}
};
captionTest.init();
$('#caption-text').keyup(function() {
captionTest.setCaption(this.value);
// captionTest.blend.top.update();
});
$('#update').click(function() {
captionTest.blend.top.update();
});
});
</script>
</body>
</html>