2021-10-10 18:57:54 -04:00
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
2021-10-12 15:11:19 -04:00
<title>{{ configuration['pagetitle'] }} - {{ appname }}: {{ stream }}</title>
2021-10-10 18:57:54 -04:00
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.default.css') }}">
</head>
<body>
2021-10-12 15:36:58 -04:00
<script src="{{ url_for('static', filename='hls.min.js') }}"></script>
2021-10-10 18:57:54 -04:00
<header>
<a href="{{ url_for('frontend.start') }}"><h1>{{ configuration["pagetitle"] }}</h1></a>
<h2>{{ configuration["subtitle"] }}</h2>
</header>
2021-10-12 15:36:58 -04:00
2021-10-10 18:57:54 -04:00
<div id="videocontainer">
2021-10-12 15:36:58 -04:00
<h1>{{ stream }}</h1>
2021-10-12 15:46:27 -04:00
<video height="1080" id="player" controls>
2021-10-10 18:57:54 -04:00
</video>
</div>
2021-10-11 14:50:37 -04:00
<script>
2021-10-12 15:46:27 -04:00
var video = document.getElementById('player');
2021-10-11 14:50:37 -04:00
if (Hls.isSupported()) {
var hls = new Hls({
debug: true,
});
2021-10-12 15:11:19 -04:00
hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ stream }}.m3u8");
2021-10-11 14:50:37 -04:00
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.muted = true;
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
2021-10-12 15:11:19 -04:00
video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ stream }}.m3u8";
2021-10-11 14:50:37 -04:00
video.addEventListener('canplay', function () {
video.play();
});
}
2021-10-10 18:57:54 -04:00
</script>
</body>
</html>
