-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
executable file
·94 lines (68 loc) · 1.75 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
<!DOCTYPE html>
<head>
<!-- Link to Popcorn -->
<script src="js/popcorn-complete.js"></script>
<!-- The Style -->
<link rel="stylesheet" href="css/style.css" />
<!-- Pop the Corn -->
<script>
document.addEventListener("DOMContentLoaded", function () {
var pop = Popcorn("#video");
pop.footnote({
start:'1', // Our start time in seconds
end:'6', // Our end time in seconds
text:"Hello world!", // The text we want to display
target:'box', // What DOM element we want to target on the page
});
pop.image({
start:'6.1', // Our start time in seconds
end:'9', // Our end time in seconds
src: "img/cat.jpg",
target:'box', // What DOM element we want to target on the page
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/cat.jpg",
target:'container', // What DOM element we want to target on the page
effect: "applyclass", // Apply a CSS class to the target container
/* applyclass: "flip, black, move_down", // Specify which CSS class */
});
pop.googlemap({
start: 13,
end: 19,
type: "ROADMAP",
target: "box",
lat: 43.665429,
lng: -79.403323,
zoom: 5,
});
pop.webpage({
id: "webpages-a",
start: 19.1,
end: 25,
src: "http://itp.nyu.edu/itp/",
target: "container"
});
});
</script>
</head>
<!-- The Body -->
<body>
<!-- The Container -->
<div id="container">
<!--The Video-->
<video id="video" controls>
<source src="video/test.webm">
<source src="video/test.mp4">
</video>
<!--The Content Box-->
<div id="box">
</div>
<!-- End Container -->
</div>
<!-- End Body -->
</body>
</html>