149 lines
5.6 KiB
HTML
149 lines
5.6 KiB
HTML
---
|
|
---
|
|
<!doctype html>
|
|
<html class="no-js" lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>{{ site.meta.title }}</title>
|
|
<!-- TODO -->
|
|
<meta name="description" content="{{ site.meta.description }}">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
<link rel="stylesheet" href="style.css">
|
|
<!-- Place favicon.ico in the root directory -->
|
|
|
|
<link rel="stylesheet" href="./video-js.min.css">
|
|
<link rel="stylesheet" href="./forest.css">
|
|
<script src="./video.js"></script>
|
|
<script src="./videojs-contrib-quality-levels.min.js"></script>
|
|
<script src="./videojs-http-source-selector.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!--[if lt IE 8]>
|
|
<p class="browserupgrade">
|
|
You are using an <strong>outdated</strong> browser. Please
|
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
|
your experience.
|
|
</p>
|
|
<![endif]-->
|
|
|
|
<header>
|
|
<img src="./logo.png"
|
|
alt="Das Logo von attac"
|
|
style="float:left;height:5em">
|
|
<h1>{{ site.header }}</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<div id="video-div">
|
|
<video-js id="video-container"
|
|
class="video-js vjs-theme-forest vjs-liveui"
|
|
controls
|
|
data-setup='{ "aspectRatio":"16:9", "autoplay":true}'
|
|
poster="{{ site.thumbnailurl }}">
|
|
<source id="video-source" src="{{ site.videosrc }}" type="application/x-mpegURL" >
|
|
<p>
|
|
Hier sollte ein Video sein. Das scheint in deinem
|
|
Browser allerdings irgendwie nicht zu funktionieren.
|
|
</p>
|
|
<p>
|
|
Alternative kannst du dir den Livestream auch
|
|
direkt ansehen (e.g. mit <pre>vlc</pre>
|
|
oder <pre>mplayer</pre>): <pre>{{ site.videosrc }}</pre>
|
|
</p>
|
|
</video-js>
|
|
</div>
|
|
<script>
|
|
var width = window.innerWidth;
|
|
var height = (width/16)*9;
|
|
var url = '{{ site.videosrc }}';
|
|
function UrlExists(url) {
|
|
var http = new XMLHttpRequest();
|
|
http.open('HEAD', url, false);
|
|
http.send();
|
|
if (http.status != 404){
|
|
console.log("stream ist online!");
|
|
var options = {
|
|
plugins: {
|
|
httpSourceSelector: {
|
|
default: 'auto'
|
|
}
|
|
}
|
|
};
|
|
var player = videojs('video-container', options);
|
|
player.httpSourceSelector();
|
|
}
|
|
else {
|
|
console.log("stream is offline!");
|
|
document.getElementById("video-div").innerHTML =
|
|
"<img src='{{ site.thumbnailurl }}' width="+width+" height="+height+"/>";}
|
|
}
|
|
|
|
try {
|
|
UrlExists(url);
|
|
} catch(exception) {
|
|
if(exception.name == 'NetworkError'){
|
|
console.log('There was a network error. -> stream is offline');
|
|
document.getElementById("video-div").innerHTML =
|
|
"<img src='{{ site.thumbnailurl }}' width="+width+" height="+height+"/>";
|
|
}
|
|
else {
|
|
var options = {
|
|
plugins: {
|
|
httpSourceSelector: {
|
|
default: 'auto'
|
|
}
|
|
}
|
|
};
|
|
var player = videojs('video-container', options);
|
|
player.httpSourceSelector();
|
|
}
|
|
}
|
|
</script>
|
|
</main>
|
|
|
|
<aside class="sidepanel">
|
|
<div id="nojshint">
|
|
<h2>Chat</h2>
|
|
<p>
|
|
Hi! Diese Seite benutzt normalerweise Javascript,
|
|
um hier einen Chat anzuzeigen, aber in Deinem Browser
|
|
funktioniert das offenbar nicht.
|
|
</p>
|
|
<p>
|
|
Alternativ kannst Du dem Chat auch mit einem
|
|
beliebigen IRC-Client beitreten:
|
|
</p>
|
|
<p style="margin-left: 1em;">
|
|
<pre>{{ site.irc.room }}</pre> <br>
|
|
auf <pre>{{ site.irc.server }}</pre>.
|
|
</p>
|
|
</div>
|
|
<iframe id="chatiframe" style="display: none" src="{{ site.irc.webchat }}">
|
|
</iframe>
|
|
<script>
|
|
chatiframe.style.display = "initial";
|
|
nojshint.style.display = "none";
|
|
</script>
|
|
</aside>
|
|
|
|
<section id="stats">
|
|
<h2>Geklatsche!</h2>
|
|
<p>[TODO: insert stats, number of viewers, etc. here / remove this]</p>
|
|
</section>
|
|
|
|
<section id="description">
|
|
<h2>{{ site.description.title }}</h2>
|
|
{{ site.description.text }}
|
|
</section>
|
|
|
|
<footer>
|
|
{{ site.footer.text }} | <a href="{{ site.footer.imprint }}">Impressum</a>
|
|
</footer>
|
|
|
|
</body>
|
|
<script src="./video.min.js"></script>
|
|
</html>
|