<div id="vcon"> <button id="pp">Play</button> <button id="vol">Volume: 100%</button> <button id="vd">-</button> <button id="vi">+</button> <div id="vidiv"> <figure> <video preload="none" controlsList="nodownload" id="drm" width="1280" height="720" poster="/videoposter.jpg"> </video> <figcaption>{{ .Get "alt" }}</figcaption> </figure> </div> <div id="firewall"></div> </div> <script> let firewall = document.getElementById("firewall"); let vid = document.getElementById("drm"); vid.oncontextmenu = ()=>false vid.src = atob("{{ .Get "mp4" | base64Encode}}"); let pbutton = document.getElementById("pp"); pbutton.onclick = ()=>{ if(vid.paused){ vid.play(); pbutton.textContent="Pause"; }else{ vid.pause(); pbutton.textContent="Play"; } } firewall.onclick = pbutton.onclick; let vd = document.getElementById("vd"); let vi = document.getElementById("vi"); vd.onclick = ()=>{ vid.volume = Math.max(vid.volume-.1, 0) vol.textContent = `Volume: ${Math.round(vid.volume*100)}%` } vi.onclick = ()=>{ vid.volume = Math.min(vid.volume+.1, 1) vol.textContent = `Volume: ${Math.round(vid.volume*100)}%` } </script> <style> #firewall{ position:absolute; background-color: rgb(0, 0, 0); width: 1280px; height: 720px; opacity: 0.0; } #vidiv{position:absolute;} #vcon{overflow: hidden;} </style>