ghostream/web/template/player.html

105 lines
3.3 KiB
HTML
Raw Normal View History

2020-10-11 08:54:10 +00:00
{{define "player"}}
<div class="container">
<div class="col-video">
<!-- Video -->
2020-10-18 16:25:18 +00:00
<video id="viewer" poster="{{.Cfg.PlayerPoster}}" muted controls autoplay></video>
2020-10-11 08:54:10 +00:00
<!-- Links and settings under video -->
<div class="controls">
2020-11-09 12:48:44 +00:00
<!-- <span class="control-quality">
2020-10-11 08:54:10 +00:00
<select id="quality">
2020-10-22 16:41:14 +00:00
<option value="source">Source</option>
<option value="720p">720p</option>
<option value="480p">480p</option>
<option value="240p">240p</option>
2020-10-11 08:54:10 +00:00
</select>
2020-11-09 12:48:44 +00:00
</span> -->
2020-10-11 08:54:10 +00:00
<code class="control-srt-link">srt://{{.Cfg.Hostname}}:{{.Cfg.SRTServerPort}}?streamid={{.Path}}</code>
<span class="control-viewers" id="connected-people">0</span>
<svg class="control-indicator" id="connectionIndicator" fill="#dc3545" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<rect width="4" height="5" x="1" y="10" rx="1"/>
<rect width="4" height="9" x="6" y="6" rx="1"/>
<rect width="4" height="14" x="11" y="1" rx="1"/>
</svg>
{{if .WidgetURL}}<a class="control-chat" id="sideWidgetToggle" href="#" title="Cacher/Afficher le chat">»</a>{{end}}
</div>
</div>
{{if .WidgetURL}}
<!-- Chat -->
<div class="col-chat" id="sideWidget">
<iframe src="{{.WidgetURL}}"
title="Chat" sandbox="allow-scripts allow-forms allow-same-origin"></iframe>
</div>
{{end}}
</div>
2020-11-09 12:48:44 +00:00
<!-- <script type="module">
2020-10-21 20:43:01 +00:00
import { initViewerPage } from "/static/js/viewer.js";
2020-10-20 19:59:07 +00:00
// Some variables that need to be fixed by web page
const viewersCounterRefreshPeriod = Number("{{.Cfg.ViewersCounterRefreshPeriod}}");
const stream = "{{.Path}}";
2020-10-11 08:54:10 +00:00
const stunServers = [
{{range $id, $value := .Cfg.STUNServers}}
2020-10-20 19:45:26 +00:00
"{{$value}}",
2020-10-11 08:54:10 +00:00
{{end}}
]
2020-10-20 19:59:07 +00:00
initViewerPage(stream, stunServers, viewersCounterRefreshPeriod)
2020-11-09 12:48:44 +00:00
</script> -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="/static/ovenplayer/ovenplayer.js"></script>
<script>
{{if .WidgetURL}}
// Toggle chat
const chatToggle = document.getElementById("sideWidgetToggle")
chatToggle.addEventListener("click", function () {
const chatCol = document.getElementById("sideWidget")
if (chatCol.style.display === "none") {
chatCol.style.display = "block"
chatToggle.textContent = "»"
} else {
chatCol.style.display = "none"
chatToggle.textContent = "«"
}
})
{{end}}
// Create player
2020-11-09 13:41:44 +00:00
player = OvenPlayer.create("viewer", {
2020-11-09 12:48:44 +00:00
title: "Parlons-Maths",
image: "{{.Cfg.PlayerPoster}}",
autoStart: true,
mute: false,
expandFullScreenUI: true,
sources: [
{
"file": "wss://" + window.location.host + "/app/{{.Path}}",
"type": "webrtc",
"label": " WebRTC - Source"
},
{
"type": "hls",
"file": "https://" + window.location.host + "/app/{{.Path}}_bypass/playlist.m3u8",
"label": " HLS"
}
]
});
player.on("error", function(error){
if (error.code === 501) {
// Change message
const errorMsg = document.getElementsByClassName("op-message-text")[0]
errorMsg.textContent = "Le stream semble inactif. Cette page se rafraîchit toutes les 30 secondes."
// Reload in 5s
setTimeout(function () {
player.load()
}, 30000)
} else {
console.log(error);
}
});
2020-10-11 08:54:10 +00:00
</script>
2020-10-20 19:45:26 +00:00
{{end}}