Skip to content
Snippets Groups Projects
Commit 5edc7fa7 authored by Fabian Marquardt's avatar Fabian Marquardt
Browse files

Should be more or less complete now :-)

parent c5af33f6
No related branches found
No related tags found
No related merge requests found
Pipeline #4024 passed
Stage: deploy
Hide whitespace changes
Inline Side-by-side
public/index.html
+ 129
− 44
View file @ 5edc7fa7
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="clappr.min.js"></script>
<script type="text/javascript" src="level-selector.min.js"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">KIF 48,0 Livestream</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Mirror
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">HLS1</a>
<a class="dropdown-item" href="#">HLS2</a>
</div>
</li>
</ul>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="clappr.min.js"></script>
<script type="text/javascript" src="level-selector.min.js"></script>
<title>KIF 48,0 Livestream</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-dark bg-primary">
<a class="navbar-brand" href="#">KIF 48,0 Livestream</a>
<span class="navbar-text mr-auto" id="streamtitle"></span>
<button class="btn btn-secondary" type="button" data-toggle="modal" data-target="#infoModal">Ext. Player/Audio Only</button>
</nav>
<!-- The player will be in here -->
<div class="container-fluid fill">
<div id="player"></div>
</div>
<!-- Info Dialog -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Externe Player und Nur-Audio-Stream</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h4>Videostream im externen Player</h4>
<p>Um diesen Stream in VLC zu öffnen, nutze die folgende Netzwerkadresse:</p>
<p><code id="urlStream">unset</code></p>
<h4>Nur-Audio-Stream</h4>
<audio controls>
<source src="https://hls1.stream.kif.rocks:8443/newname" type="audio/mpeg">
</audio>
<p>Um den Audiostream in VLC zu öffnen, nutze die folgende Netzwerkadresse:</p>
<p><code id="urlAudio">unset</code></p>
</div>
</div>
</nav>
<div class="container-fluid fill">
<div id="player"></div>
</div>
<script>
var player = new Clappr.Player({
source: "https://hls1.stream.kif.rocks/stream.m3u8",
parentId: "#player",
width: "100%",
height: "100%",
autoPlay: true,
hlsMinimumDvrSize: 0,
hlsjsConfig: {
liveSyncDurationCount: 2
},
plugins: [LevelSelector]
</div>
<!-- Player and other script stuff -->
<script>
var urlParams = new URLSearchParams(window.location.search);
var streamName = urlParams.get('stream');
var availableMirrors = ['hls1', 'hls2'];
var mirror;
if(urlParams.get('mirror')){
mirror = urlParams.get('mirror')
}
else{
mirror = availableMirrors[Math.floor(Math.random() * availableMirrors.length)];
}
var targetPlayerElement = "#player";
var posterImage = "poster.png";
var offlineContent = "<div class='offlineImg'></div>";
var streamURL = 'https://' + mirror + '.stream.kif.rocks/' + streamName + '.m3u8';
var audioURL = 'https://' + mirror + '.stream.kif.rocks:8443/' + streamName;
var isLive = false;
$('#streamtitle').html('#' + streamName + ' (Mirror: ' + mirror + ')');
$('#urlStream').html(streamURL);
$('#urlAudio').html(audioURL);
function getClapprPlayer() {
return new Clappr.Player({
source: streamURL,
autoPlay: true,
mute: true,
parentId: targetPlayerElement,
width: "100%",
height: "100%",
poster: posterImage,
mediacontrol: {seekbar: "#4a7aac", buttons: "#4a7aac"},
hlsMinimumDvrSize: 0,
hlsjsConfig: {
liveSyncDurationCount: 2
},
plugins: [LevelSelector],
levelSelectorConfig: {
title: 'Quality',
labels: {
1: 'High',
0: 'Low',
}
}
});
</script>
</body>
}
function checkLive() {
var player;
console.log("Checking stream status...");
$.ajax({
url: streamURL, //stream url
success: function(data){
if(!isLive)
{
$(targetPlayerElement).empty();
isLive = true;
player = getClapprPlayer();
console.log("Stream is running; creating player");
}
},
error: function(data){
if(isLive)
{
isLive = false;
$(targetPlayerElement).empty();
$(targetPlayerElement).html(offlineContent);
}
if(!isLive)
$(targetPlayerElement).html(offlineContent);
},
})
setTimeout(checkLive, 10000);
}
checkLive();
</script>
</body>
</html>
\ No newline at end of file
public/poster.png 0 → 100644
+ 0
− 0
View file @ 5edc7fa7
public/poster.png

868 KiB

public/poster_offline.png 0 → 100644
+ 0
− 0
View file @ 5edc7fa7
public/poster_offline.png

144 KiB

public/style.css
+ 9
− 0
View file @ 5edc7fa7
......@@ -8,4 +8,13 @@ html, body {
padding-top: 70px;
min-height: 100%;
height: 100%;
}
.offlineImg {
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-image: url("poster_offline.png");
background-color: #474747;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment