-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (124 loc) · 3.96 KB
/
index.html
1
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
46
47
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
97
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
<!doctype html>
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css" />
<ul id="stations"></ul>
<video controls autoplay webkit-playsinline style="display: none"></video>
<p>Good performance on browsers that support HLS: Safari (iOS, OS X), MS Edge, Chrome (Android)</p>
<p>Mediocre performance on browser that support MSE (polyfilled with hls.js)</p>
<hr>
<h2>WTF?</h2>
<p>No bullshit: no ads, no tracking, no plugins; only HTML5 and JS (needed for polyfilling HLS)</p>
<h2>Why no works?</h2>
<p>Some stations are geoblocked outside Germany, some streams don't have the necessary header for polyfill to work</p>
<h2>Copyright!</h2>
<p>I only provide shortcuts to the official livestreams, I do not stream any content myself</p>
<h2>Where is Pro7/RTL/etc.?</h2>
<p>They have stupid content and makes you dumb. Also, they do not provide web streams because they think their content is valuable. If you find some streams, tell me.</p>
<style>
html {
font-family: sans-serif;
}
body {
margin: .5em;
}
ol {
display: inline;
padding-left: 0;
}
ol li::before {
content: " [";
}
ol li::after {
content: "]";
}
ol li {
display: inline;
list-style-type: none;
}
video {
max-width: 100%;
}
</style>
<script>
var video = document.querySelector('video');
var canPlayHLSResult = video.canPlayType("application/x-mpegurl");
var canPlayHLS = canPlayHLSResult === "maybe" || canPlayHLSResult === "probably";
console.info("canPlay HLS: " + canPlayHLS)
var req = new XMLHttpRequest();
req.open("GET", "stations.json");
req.onreadystatechange = function (e) {
if (req.readyState === req.DONE && req.status >= 200 && req.status < 400) {
var stationsUl = document.getElementById("stations");
var stationsData = JSON.parse(req.responseText);
console.info("got stations list");
stationsData.forEach( function (station) {
var li = document.createElement("li");
li.textContent = station["name"];
var ol = document.createElement("ol");
li.appendChild(ol);
station["qualities"].forEach(function (quality) {
var li = document.createElement("li");
var a = document.createElement("a");
a.href = quality["url"];
a.textContent = quality["name"];
a.addEventListener("click", stationClicked);
li.appendChild(a);
ol.appendChild(li);
});
if (station["geoblocked"]) {
var abbr = document.createElement("abbr");
abbr.textContent = "G";
abbr.title = "Geo-geblockt, kann nicht außerhalb Deutschlands abgespielt werden";
li.appendChild(document.createTextNode(" ["));
li.appendChild(abbr);
li.appendChild(document.createTextNode("]"));
}
if (station["broken_cors"]) {
var abbr = document.createElement("abbr");
abbr.textContent = "C";
abbr.title = "Fehlende CORS-Header, Polyfill wird nicht funktionieren";
li.appendChild(document.createTextNode(" ["));
li.appendChild(abbr);
li.appendChild(document.createTextNode("]"));
}
stationsUl.appendChild(li);
});
}
}
req.send(null);
function stationClicked(e) {
e.preventDefault();
console.log("changing video to", e.currentTarget.href);
loadVideo(video, e.currentTarget.href);
}
/*
function bodyDebug(msg) {
var li = document.createElement("li");
li.textContent = msg;
document.body.appendChild(li);
}
*/
var hls = null;
function loadVideo(elm, src) {
elm.style.display = '';
if (canPlayHLS) {
elm.src = src;
elm.autoplay = true;
} else if(Hls.isSupported()) {
if (hls) {
console.info("detach and stop")
hls.detachMedia();
hls.stopLoad();
}
hls = new Hls();
hls.loadSource(src);
hls.attachMedia(elm);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
elm.play();
});
} else {
console.warn("hls.js not supported");
}
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hls.js/0.5.36/hls.js"></script>