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' />
<title>{{ configuration['pagetitle'] }} - {{ appname }}: {{ streamname }}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.default.css') }}">
</head>
<body>
<header>
<a href="{{ url_for('frontend.start') }}"><h1>{{ configuration["pagetitle"] }}</h1></a>
<h2>{{ configuration["subtitle"] }}</h2>
</header>
<div id="videocontainer">
<h1>{{ streamname }}</h1>
<video id="player" controls>
</video>
</div>
2021-10-11 14:50:37 -04:00
<script src="{{ url_for('static', filename='hls.min.js') }}"></script>
<script>
var video = document.getElementById('video');
if (Hls.isSupported()) {
var hls = new Hls({
debug: true,
});
2021-10-11 16:14:01 -04:00
hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.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-11 16:14:01 -04:00
video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.m3u8";
2021-10-11 14:50:37 -04:00
video.addEventListener('canplay', function () {
video.play();
});
}
//url: '{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}'
2021-10-10 18:57:54 -04:00
</script>
</body>
</html>
