Skip to content

Commit

Permalink
Merge with upstream and do some more cleanup. (Includes a number of w…
Browse files Browse the repository at this point in the history 
…hitespace-only changes.)
  • Loading branch information
@GPHemsley
GPHemsley committed Sep 3, 2010
2 parents 1b1c44a + 8a908a1 commit d001ef2
Show file tree
Hide file tree
Showing 7 changed files with 634 additions and 404 deletions.
Binary file added demos/semantic_video/images/arro.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/semantic_video/images/video_icon.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
261 changes: 158 additions & 103 deletions demos/semantic_video/index.html
View file
Expand Up @@ -43,6 +43,21 @@
})
}, 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>
Expand All @@ -59,22 +74,18 @@
<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">
<!--nav id="login">
<ul>
<li><a href="#">log in</a></li>
<li><a href="#">sign up</a></li>
</ul>
</nav>
</nav-->
<!-- End Login/Signup -->

<!-- Start Primary Links -->
<nav id="primary-links">
<nav id="demo-info">
<ul>
<li><a title="" href="http://www.drumbeat.org/about">About</a></li>
<li><a title="" href="http://www.drumbeat.org/projects">Projects</a></li>
<li><a title="" href="http://www.drumbeat.org/people">People</a></li>
<li><a title="" href="http://www.drumbeat.org/events">Events</a></li>
<li><a title="" href="http://indofolio.com/civicrm/contribute/transact?reset=1&amp;id=3?reset=1&amp;id=3">Donate</a></li>
<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 -->
Expand All @@ -91,13 +102,40 @@
<div id="credit_inner">
</div>
</div>
<video width="530" height="299" src="http://a55.video2.blip.tv/8080004989393/Etherworks-WMMOGGVERSION204.ogv?bri=2.7&amp;brs=750" data-timeline-sources="xml/webMadeMovies.xml" controls></video>
<!-- Start Video Info -->
<div class="video-info">
<!-- Start Choose Language -->
<div class="choose-language">
<h2>Choose your language</h2>
<select id="language">
<video width="530" height="299" data-timeline-sources="xml/webMadeMovies.xml" controls>
<source src="http://webmademovies.etherworks.ca/popcorndemo/wmmjuly6.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="http://webmademovies.etherworks.ca/popcorndemo/wmmjuly6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<div id="overlaydiv" style="position:absolute;top:1px;left:1px"></div>
<script>
overlayDiv = document.getElementById("overlaydiv");
var createImage = function(src) {
var image = document.createElement('img');
image.setAttribute('src', src);
image.setAttribute('style', "display:none");
overlayDiv.appendChild(image);
return image;
};
Popcorn.VideoManager.prototype.loaded = function() {
for (var i in this.commandObjects) {
if (this.commandObjects[i].name === 'flickr' || this.commandObjects[i].name === 'footnote' || this.commandObjects[i].name === 'location' || this.commandObjects[i].name === 'twitter' || this.commandObjects[i].name === 'wiki') {
this.commandObjects[i].extension.image = createImage("images/overlay/" + this.commandObjects[i].name + ".png");
this.commandObjects[i].extension.onIn = function() {
this.image.setAttribute('style', "display:inline");
};
this.commandObjects[i].extension.onOut = function() {
this.image.setAttribute('style', "display:none");
};
}
}
};
</script>
<!-- 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>
Expand All @@ -109,115 +147,132 @@ <h2>Choose your language</h2>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="es">Spanish</option>
</select>
<div id="credit">
</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 />
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 -->
<h1>
<span>In this video: <strong id="inthisvideo"></strong></span>
</h1>
<!-- Start Column A -->
<div class="columna">
<section>
<h3><img src="images/logo_twitter.png" alt="Twitter Updates" width="80" height="19" />
<span>&nbsp;</span></h3>
<a href="#" class="collapse"><span>Collapse</span></a>
<div id="personaltwitter" class="content"><div class="overlay"></div><div class="inactive"></div></div>
</section>
<!-- 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 Column A -->
<!-- Start Column B -->
<div class="columnb">
<section>
<h3><img src="images/logo_flickr.png" alt="Flickr Images" width="53" height="16" />
<span>&nbsp;</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 -->
<!-- End Video Info -->
</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>
<!-- End Video Div -->
<h1>
<span>In this video: <strong id="inthisvideo"></strong></span>
</h1>
<!-- Start Column A -->
<div class="columna">
<section>
<h3><img src="images/logo_twitter.png" alt="Twitter Updates" width="80" height="19" />
<span>&nbsp;</span></h3>
<a href="#" class="collapse"><span>Collapse</span></a>
<div id="personaltwitter" class="content"><div class="overlay"></div><div class="inactive"></div></div>
</section>
</div>
<!-- End Column A -->

</section>
<section>
<h3><img src="images/logo_twitter.png" alt="Twitter" width="80" height="19" /></h3>
<a href="#" class="collapse"><span>Collapse</span></a>
<div id="twitter" class="content"><div class="overlay"></div><div class="inactive"></div></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_google_news.png" alt="Google News" width="74" height="33" />
</h3>
<div id="googlenewsdiv"><div class="overlay"></div><div class="inactive"></div></div>
</section>
</div>
<!-- End Column B -->
<h1><span>This video's copyright information</span></h1>
<!-- Start Column B -->
<div class="columnb">
<section>
<div id="container5"></div>
<h3><img src="images/logo_flickr.png" alt="Flickr Images" width="53" height="16" />
<span>&nbsp;</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 Right Contents -->
<!-- End Column B -->
</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="#">Learn More <span>&raquo;</span></a>
</p>
<!-- 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>
<section>
<h3><img src="images/logo_twitter.png" alt="Twitter" width="80" height="19" /></h3>
<a href="#" class="collapse"><span>Collapse</span></a>
<div id="twitter" class="content"><div class="overlay"></div><div class="inactive"></div></div>
</section>
</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>
<!-- 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_google_news.png" alt="Google News" width="74" height="33" />
</h3>
<div id="googlenewsdiv"><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>&raquo;</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 &copy;2010 by individual drumbeat.org contributors. Content available under a Creative Commons license.</div>
</footer>
</div>
<!-- End Wrapper Div -->
</div>
<!-- End First Container 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 Second Container Div -->
<!-- End Popup -->
</body>
</html>

0 comments on commit d001ef2

Please sign in to comment.