Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: d8af08de0e
Fetching contributors…

Cannot retrieve contributors at this time

333 lines (312 sloc) 12.597 kb
<!DOCTYPE html>
<html>
<head>
<title>Cinux Stream</title>
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="popcorn.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/twitter/popcorn.twitter.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>
<script>
document.addEventListener('DOMContentLoaded', function () {
// popcorn events are chainable this means that you can also do:
// p.play(); or p.footnote{};
// Make a popcorn instance, passing the id of the video element.
// notice the <video id='video' ... > at the bottom of the page.
var p = Popcorn('#cinuxstreamvids')
// use the footnote plugin
// notice the <div id='footnotediv'> tag at the bottom of the page
// ------------------
//.subtitle({
// start: 22, // seconds
// end: 30, // seconds
// text: 'this is a subtitle'
//} )
// ------------------
// make the video play automatically
//.play();
}, false);
</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://conmarap.github.com/stream.html/" class="logo"><img src="images/cstream_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" />Cinux Video Stream</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="cinuxstreamvids" width="530" poster="images/poster.jpg" controls > <!-- loop --> <!--data-timeline-sources="xml/webMadeMovies.xml"-->
<source src="images/pcp.webm" 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="gr">Greek</option>
<option value="en" selected="selected">English</option>
<option value="zh">Chinese</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>Pandora Cinux promo</h2>
<p id="footnotediv">
December 30, 2011 -
Pandora Cinux promotional video
</p>
</div>
<!-- End Foot Notes -->
</div>
<!-- End Video Info -->
</div>
<!-- End Video Div -->
</div>
<!-- End Left Contents -->
<!-- Start Right Contents -->
<div class="right-content">
<!-- <h1><span>Where to find Cinux</span></h1> -->
<!-- Start Column A -->
<div class="columna">
<!-- <section>
<div id="container3" class="google-map-title">
<h4>Filmed in:</h4>
<span id="mapinfo">Patras</span>
<img src="images/map.jpg"/>
</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">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 30000,
width: 239,
height: 350,
theme: {
shell: {
background: '#ffffff',
color: '#606060'
},
tweets: {
background: '#ffffff', // d7e7f0
color: '#171c1e',
links: '#146b9d'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('CinuxLinux').start();
</script>
<!-- -->
<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/facebook_banner.jpg" alt="Facebook" width="80" height="35" /></h3>
<a href="#" class="collapse"><span>Collapse</span></a>
<div class="content" id="lastfmdiv">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=139750019419501";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!--
<div class="fb-like-box" data-href="http://www.facebook.com/cinuxlinux" data-width="240" data-height="200" data-show-faces="true" data-stream="false" data-header="true"></div>
-->
<div class="fb-like" data-href="http://www.facebook.com/cinuxlinux" data-send="true" data-layout="button_count" data-width="240" data-show-faces="true" data-font="verdana"></div><div class="overlay"></div><div class="inactive"></div></div>
</section>
<section>
<h3><img src="images/google-logo-plus.png" alt="GooglePlus"/></h3>
<a href="#" class="collapse"><span>Collapse</span></a>
<div class="content" id="wikidiv">
<script type="text/javascript">
mbgc='ffffff';ww='240';mbc='ffffff';bbc='3F79D5';bmobc='3b71c6';bbgc='2378b6';bmoc='24467b';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='a0a0a0';nc='171c1e';bc='171c1e';t='Cinux_on_';fs='16';fsb='13';bw='100';ff='4';pc='4889F0';b='s'; pid='115995459986143840660';
</script>
<script type="text/javascript" src="http://widgetsplus.com/google_plus_widget.js">
</script>
<div class="overlay">
</div>
<div class="inactive">
</div>
</div>
</section>
</div>
<!-- End Column B -->
<h1><span>For more videos...</span></h1>
<section>
<div id="container5">
<a href="http://stream.osarena.net/" target="_blank">
<img src="images/png.png" width="510"/>
</a>
</div>
</section>
</div>
<!-- End Right Contents -->
</div>
<!-- End Contents -->
<footer>
<center>
<div>
<a href="http://stream.osarena.net/" target="_blank">
<img src="images/stream-tv.png" alt="footer_drumbeat" width="115" height="91" />
</a>
<!-- <p>This web page is powered by<br /><a href="http://osarena.net/" target="_blank">OSArena</a>, the Greek Open Source Arena.<br />
<a href="http://stream.osarena.net/" target="_blank">Watch more videos about technology and Linux.<span>&raquo;</span></a>
</p> -->
</div>
<!--<div class="footer_drumbeat">
<img src="images/osarena-banner.png" alt="footer_drumbeat"/><p>Powered by everybody,<br />directed to everybody.</p>
</div>-->
<div class="copyright">&copy;2011-2012 Constantine Apostolou and Cinux. All content on this page is available under a Creative Commons license.</div>
</center>
</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>About this page</h1>
<p>
Cinux Stream is a page where videos will be uploaded and streamed. People can visit this page and watch those videos and also share them.
</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+. Internet Explorer does not support open video codecs at the moment, so I won't bother making this page work in that browser.
</p>
</div>
</div>
<!-- End Popup -->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.