diff --git a/static/css/site.css b/static/css/site.css index 7cc40e3..47f8193 100644 --- a/static/css/site.css +++ b/static/css/site.css @@ -191,10 +191,28 @@ input[type=text] { border-bottom-right-radius: 5px; } -#videoElement { +#videoWrapper { + position: relative; + display: flex; +} + +#videoOverlay { + height: 100%; + width: 100%; + position: absolute; + background-color: rgb(0, 0, 0, 0.75); + z-index: 3; + text-align: center; + vertical-align: middle; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; +} + +#videoElement { + z-index: 1; position: relative; - top: 50%; - transform: translateY(-50%); width: 100%; } diff --git a/static/img/mute-icon.png b/static/img/mute-icon.png new file mode 100644 index 0000000..7d3d8cf Binary files /dev/null and b/static/img/mute-icon.png differ diff --git a/static/js/video.js b/static/js/video.js index c7b9add..03a3d4c 100644 --- a/static/js/video.js +++ b/static/js/video.js @@ -2,16 +2,25 @@ function initPlayer() { - if (flvjs.isSupported()) { - var videoElement = document.getElementById("videoElement"); - var flvPlayer = flvjs.createPlayer({ - type: "flv", - url: "/live" - }); - flvPlayer.attachMediaElement(videoElement); - flvPlayer.load(); - flvPlayer.play(); + if (!flvjs.isSupported()) { + console.warn('flvjs not supported'); + return; } + + let videoElement = document.querySelector("#videoElement"); + let flvPlayer = flvjs.createPlayer({ + type: "flv", + url: "/live" + }); + flvPlayer.attachMediaElement(videoElement); + flvPlayer.load(); + flvPlayer.play(); + + let overlay = document.querySelector('#videoOverlay'); + overlay.onclick = () => { + overlay.style.display = 'none'; + videoElement.muted = false; + }; } window.addEventListener("load", initPlayer); diff --git a/static/main.html b/static/main.html index 8f900b4..4a49acc 100644 --- a/static/main.html +++ b/static/main.html @@ -35,10 +35,15 @@ {{define "body"}} {{if .Video}} - +
+
+ +
+ +
{{end}} {{if .Chat}}