Merge pull request #115 from voldyman/overlay

Made video muted by default and added overlay to ask the user to unmute

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%;
 }
 

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);

static/main.html

@@ -35,10 +35,15 @@
 
 {{define "body"}}
 {{if .Video}}
-<video id="videoElement" controls autoplay x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline
-    webkit-playsinline>
-    Your browser is too old and doesn't support HTML5 video.
-</video>
+<div id="videoWrapper">
+    <div id="videoOverlay">
+        <img src="/static/img/mute-icon.png" />
+    </div>
+    <video id="videoElement" x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline webkit-playsinline
+        autoplay muted controls>
+        Your browser is too old and doesn't support HTML5 video.
+    </video>
+</div>
 {{end}}
 
 {{if .Chat}}