Newer
Older
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
<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">×</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>
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
</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',
}
}
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
}
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>