60 行
3.7 KiB
HTML
60 行
3.7 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="/static/external/video-js.css" rel="stylesheet">
|
|
<link href="/static/external/pure-min.css" rel="stylesheet">
|
|
<link href="/static/external/grids-responsive-min.css" rel="stylesheet">
|
|
<link href="/static/platform.css" rel="stylesheet">
|
|
<script src="/static/external/video.js"></script>
|
|
<script src="/static/external/videojs-contrib-hls.js"></script>
|
|
<!-- <script src="/static/external/dash.all.debug.js"></script>
|
|
<script src="/static/external/videojs-dash.js"></script>-->
|
|
<noscript><style>#videojs {display: none;}</style></noscript>
|
|
</head>
|
|
<body class="dark-theme">
|
|
<div class=pure-g>
|
|
<div class="pure-u-1 pure-u-md-2-3">
|
|
<div id="stream" class="border">
|
|
<!-- https://stackoverflow.com/questions/41014197/how-can-i-play-a-m3u8-file-video-using-the-html5-video-element -->
|
|
<video id="videojs" style="width: 100%;height: 100%;" class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{"controls": true, "autoplay": true }'>
|
|
<source src="{{ url_for('playlist', token=token) }}" type="application/x-mpegURL">
|
|
</video>
|
|
<noscript>
|
|
<video style="width: 100%;height: 100%;" controls autoplay src="{{ url_for('segments', token=token) }}">
|
|
</noscript>
|
|
</div>
|
|
<div id="stream-info-container">
|
|
<noscript><iframe class="stream-info" src="{{ url_for('stream_info', token=token, embed=1) }}"></iframe></noscript>
|
|
</div>
|
|
<div style="margin: -2.75em 0 1.5em 1.25em;"><a href="https://gitlab.com/ninya9k/onion-livestreaming" target="_blank">source code</a></div>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-3">
|
|
<div class="border">
|
|
<div class="banner" style="padding-bottom:0.5em;border-bottom:1px solid gray;padding-left: 1em;font-size:125%;">
|
|
<span>Stream chat</span>
|
|
<form target="chat" action="/chat" method="get" class="banner" style="float: right;margin: 0;width: 1em;">
|
|
<input id="token" type="hidden" name="token" value="{{ token }}">
|
|
<input type="checkbox" style="display:none;" name="debug">
|
|
<button style="font-weight: bold;background: none;border: none;margin: 0;padding: 0;cursor: pointer;" type="submit" class="">🔄</button>
|
|
</form>
|
|
</div>
|
|
<iframe id="chat" name="chat" style="transform: rotate(180deg);transform: scaleY(-1);" src="{{ url_for('chat_iframe', token=token) }}"></iframe>
|
|
<iframe style="height:6em;border-top:1px solid #434343;padding-top:0.5em;" src="{{ url_for('comment_iframe', token=token) }}"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const streamInfoContainer = document.getElementById("stream-info-container")
|
|
const streamInfoWithEmbeds = streamInfoContainer.querySelector("*");
|
|
const streamInfoNoEmbeds = document.createElement("iframe");
|
|
streamInfoNoEmbeds.id = "stream-info";
|
|
streamInfoNoEmbeds.className = "stream-info";
|
|
streamInfoNoEmbeds.src = "{{ url_for('stream_info', token=token) }}";
|
|
streamInfoContainer.replaceChild(streamInfoNoEmbeds, streamInfoWithEmbeds);
|
|
</script>
|
|
<script src="/static/platform.js"></script>
|
|
</body>
|
|
</html>
|