53 lines
1.4 KiB
HTML
53 lines
1.4 KiB
HTML
|
<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>
|