-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
142 lines (102 loc) · 3.19 KB
/
index.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
139
140
141
142
<!DOCTYPE html>
<head>
<!-- Link to Popcorn -->
<!-- The Style -->
<link rel="stylesheet" href="css/style.css" />
<!-- Pop the Corn -->
</head>
<!-- The Body -->
<body>
<!-- The Container -->
<div id="container">
<!--Top Layer: The Chroma Keyed Video-->
<canvas id="foreground_video" class="full">
</canvas>
<!--The Source Video, Which Is Not Visible on the Page-->
<video id="source_video_for_chroma" autoplay controls>
<source src="video/wtf_greenscreen_sm.mp4" type="video/mp4">
<!-- <source src="video/wtf_greenscreen_sm.webm"> !-->
</video>
<!--Middle Layer: Background Area, Which You Can Populate with Content-->
<div id="background_area" class="full">
</div>
<!--Bottom Layer: The Background Video, Which Is Not Visible on the Page-->
<video id="background_video" class="full" autoplay controls>
<source src="video/test.mp4">
<!-- <source src="video/test.webm"> !-->
</video>
<!-- End Container -->
</div>
<!-- End Body -->
</body>
<!-- Libraries We Include -->
<script src="js/popcorn-complete.js"></script>
<script src="js/seriously.js"></script>
<script src="js/seriously.chroma.js"></script>
<!-- The Seriously Script to Make Chroma Key Work -->
<script type="text/javascript">
var seriously, // the main object that holds the entire composition
video, // a reference to the video element. It's invisible to the user.
chroma, // a chroma effect
target; // a wrapper object for our target canvas
seriously = new Seriously();
video = seriously.source('#source_video_for_chroma');
target = seriously.target('#foreground_video');
chroma = seriously.effect('chroma');
// you can mess with these values to tweak how chroma works -->
var chroma = seriously.effect('chroma');
chroma.weight = 1.32;
chroma.balance = 0;
chroma.screen = 'rgb(77, 239, 41)';
chroma.clipWhite = 0.85;
chroma.clipBlack = 0.5125;
// connect all our nodes in the right order
chroma.source = video;
target.source = chroma;
seriously.go();
</script>
<!-- The Popcorn Scripts -->
<script>
document.addEventListener("DOMContentLoaded", function () {
var pop = Popcorn("#background_video");
pop.footnote({
start:'1', // Our start time in seconds
end:'3', // Our end time in seconds
text:"Hello world!", // The text we want to display
target: "background_area",
});
pop.image({
start:'4', // Our start time in seconds
end:'9', // Our end time in seconds
src: "img/cat.jpg",
target: "background_area",
effect: "applyclass", // Apply a CSS class to the target container
/* applyclass: "flip, black, move_down", // Specify which CSS class */
});
pop.image({
start:'9.1', // Our start time in seconds
end:'12', // Our end time in seconds
src: "img/dog.jpg",
target: "background_area",
effect: "applyclass", // Apply a CSS class to the target container
/* applyclass: "flip, black, move_down", // Specify which CSS class */
});
pop.webpage({
id: "webpages-a",
start: 12.1,
end: 25,
src: "http://itp.nyu.edu/itp/",
target: "background_area",
});
pop.googlemap({
start: 25,
end: 30,
type: "ROADMAP",
target: "background_area",
lat: 43.665429,
lng: -79.403323,
zoom: 5,
});
});
</script>
</html>