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