forked from mozilla/popcorn-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
255 lines (234 loc) · 10.2 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video Demo Using popcorn.js</title>
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../../popcorn.js"></script>
<script src="../../modules/parser/popcorn.parser.js"></script>
<script src="../../plugins/webpage/popcorn.webpage.js"></script>
<script src="../../plugins/googlemap/popcorn.googlemap.js"></script>
<script src="../../plugins/footnote/popcorn.footnote.js"></script>
<script src="../../plugins/subtitle/popcorn.subtitle.js"></script>
<script src="../../plugins/tagthisperson/popcorn.tagthisperson.js"></script>
<script src="../../plugins/wikipedia/popcorn.wikipedia.js"></script>
<script src="../../plugins/flickr/popcorn.flickr.js"></script>
<script src="../../plugins/attribution/popcorn.attribution.js"></script>
<script src="../../plugins/lastfm/popcorn.lastfm.js"></script>
<script src="../../modules/timeline-sources/popcorn.timeline-sources.js"></script>
<script src="popcorn.applyclass.js"></script>
<script src="../../parsers/parserXML/popcorn.parserXML.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
//Show hide the contents
$(".collapse").click(function () {
$(this).next(".content").slideToggle("fast");
});
//Swap class names
$(".collapse").toggle(function () {
$(this).addClass("expand");
}, function () {
$(this).removeClass("expand");
});
$(".collapse").toggle(function () {
$("span", this).text('Expand');
}, function () {
$("span", this).text('Collapse');
});
$('section').hover(function() {
$(this).addClass('hover')
}, function() {
$(this).removeClass('hover')
})
setInterval(function() {
$('section.hover').each(function() {
if ($(this).attr('hoveron')) {
if ($('video')[0].currentTime-$(this).attr('hoveron')>1) {
$(this).removeAttr('hoveron').removeClass('hover');
}
}
})
}, 500);
$('.clickhere').click(function(){
$('.popup').fadeIn();
$('.pop-overlay').fadeIn()
});
$('.pop-overlay').click(function(){
$('.pop-overlay').fadeOut();
$('.popup').fadeOut();
});
$('.close_btn').click(function(){
$('.pop-overlay').fadeOut();
$('.popup').fadeOut();
});
});
</script>
</head>
<body>
<!-- Start First Container Div -->
<div class="container-top">
<!-- Start Second Container Div -->
<div class="container-bot">
<!-- Start Wrapper Div -->
<div class="wrapper">
<!-- Start Header -->
<header id="global-header">
<a href="http://www.drumbeat.org/" class="logo"><img src="images/drumbeat_logo.png" alt="drumbeat_logo" width="255" height="87" /></a>
<!-- Start Login/Signup -->
<!--nav id="login">
<ul>
<li><a href="#">log in</a></li>
<li><a href="#">sign up</a></li>
</ul>
</nav-->
<!-- End Login/Signup -->
<!-- Start Primary Links -->
<nav id="demo-info">
<ul>
<li><a href="#" onClick="javascript:void();" class="clickhere green"><img src="images/video_icon.png" alt="" width="18" height="14" />watch a video and learn more about this demo</a></li>
</ul>
</nav>
<!-- End Primary Links -->
</header>
<!-- End Header -->
<!-- Start Contents -->
<div id="contents">
<!-- Start Left Contents -->
<div class="left-content">
<!-- Start Video Div -->
<div id="videoContainer" class="video-div">
<video id="webmademovies" width="530" height="299" data-timeline-sources="xml/webMadeMovies.xml" controls loop>
<source src="http://videos.mozilla.org/serv/webmademovies/wmmjuly6.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="http://videos.mozilla.org/serv/webmademovies/wmmjuly6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<div id="overlaydiv" style="position:absolute;top:1px;left:1px"></div>
<!-- Start Video Info -->
<div class="video-info">
<!-- Start Choose Language -->
<div class="choose-language">
<h2>Choose your language</h2>
<select id="language">
<option value="zh">Chinese</option>
<option value="en" selected="selected">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="es">Spanish</option>
</select>
<div id="credit">
with help from
<br />
<a href="http://google.com/translate">Google Translate</a> and <a href="http://jquery.com">
jQuery</a><br />
<input type="checkbox" id="accessibility" checked="checked" />All subtitles (accessibility)
</div>
</div>
<!-- End Choose Language -->
<!-- Start Foot Notes -->
<div class="foot-notes">
<h2>This video's footnotes</h2>
<p id="footnotediv"></p>
</div>
<!-- End Foot Notes -->
</div>
<!-- End Video Info -->
</div>
<!-- End Video Div -->
<div>
<section>
<a href="#" class="collapse"><span>Collapse</span></a>
<div id="iframes" class="content"><div class="overlay"></div><div class="inactive"></div></div>
</section>
</div>
<h1>
<span>In this video: <strong id="inthisvideo"></strong></span>
</h1>
<!-- Start Column B -->
<div class="columna">
<section>
<h3><img src="images/logo_flickr.png" alt="Flickr Images" width="53" height="16" />
<span> </span></h3>
<a href="#" class="collapse"><span>Collapse</span></a>
<div id="personalflickr" class="content"><div class="overlay"></div><div class="inactive"></div></div>
</section>
</div>
<!-- End Column B -->
</div>
<!-- End Left Contents -->
<!-- Start Right Contents -->
<div class="right-content">
<h1><span>Related to this video</span></h1>
<!-- Start Column A -->
<div class="columna">
<section>
<div id="container3" class="google-map-title">
<h4>Filmed in:</h4>
<span id="mapinfo"></span>
</div>
<div id="container2" class="google-map"></div>
</section>
</div>
<!-- End Column A -->
<!-- Start Column B -->
<div class="columnb">
<section>
<h3><img src="images/logo_wiki.png" alt="Wikipedia" width="92" height="13" /></h3>
<a href="#" class="collapse"><span>Collapse</span></a>
<div class="content" id="wikidiv"><div class="overlay"></div><div class="inactive"></div></div>
</section>
<section>
<h3><img src="images/logo_lastfm.png" alt="Lastfm" width="80" height="24" /></h3>
<a href="#" class="collapse"><span>Collapse</span></a>
<div class="content" id="lastfmdiv"><div class="overlay"></div><div class="inactive"></div></div>
</section>
</div>
<!-- End Column B -->
<h1><span>This video's copyright information</span></h1>
<section>
<div id="container5"></div>
</section>
</div>
<!-- End Right Contents -->
</div>
<!-- End Contents -->
<footer>
<div class="footer_drumbeat">
<img src="images/footer_webmade.png" alt="footer_drumbeat" width="115" height="91" />
<p>Web Made Movies is Mozilla's<br /> Open video lab<br />
<a href="http://www.drumbeat.org/webmademovies">Learn More and find the source code for this demo<span>»</span></a>
</p>
</div>
<div class="footer_drumbeat">
<img src="images/footer_drumbeat.png" alt="footer_drumbeat" width="200" height="68" /><p>Innovation on the open web,<br />powered by everybody.</p>
</div>
<div class="copyright">Portions of this content are ©2010 by individual drumbeat.org contributors. Content available under a Creative Commons license.</div>
</footer>
</div>
<!-- End Wrapper Div -->
</div>
<!-- End Second Container Div -->
</div>
<!-- End First Container Div -->
<!-- Start Popup -->
<div class="pop-overlay">
</div>
<div class="popup">
<span class="close_btn">x</span>
<div class="popup-content">
<h1>Info about this page</h1>
<p>This demo was created by Scott Downe, Anna Sobiepanek, Daniel Hodgin, Nick Cammarata, and Brett Gaylor as part of Web Made Movies. To download the source code and find out how you can contribute, click on the Web Made Movies logo at the bottom of this page.</p>
<p>
<strong>Are you having trouble getting this demo to play?</strong><br />
This video will only play in modern browsers, such as Firefox 3.5+ or Safari 3+. Unfortunately, Internet Explorer does not currently support open video codecs, so the won't work in that browser.
</p>
</div>
</div>
<!-- End Popup -->
</body>
</html>