<!DOCTYPE html>
<html>
<head>
<title>Video Masking via Canvas - RJM Programming - Thanks to https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas</title>
<style>
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-color: #3B3B3B;
background-repeat: no-repeat;
}
div {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
</style>

<script type='text/javascript'>
var xalp="0123456789abcdef";
var ln=0;
var bn=0;
var wsuff="";
var wcol="#927566";
var uprefix="video.mp4";
var usuff="";
var usuffix=location.search.split('video=')[1] ? decodeURIComponent(location.search.split('video=')[1]).split('&')[0] : "";
if (usuffix != "") {
uprefix="";
usuff="&video=" + encodeURIComponent(usuffix);
}
var omr=location.search.split('mr=')[1] ? decodeURIComponent(location.search.split('mr=')[1]).split('&')[0] : "";
if (omr != '') { setTimeout(andlater,900); wsuff=wsuff.replace('&mr=','&mXr=') + '&mr=' + omr; ln=eval(eval('' + omr) % 16); bn=eval(eval(eval('' + omr) - ln) / 16); wcol=wcol.replace('92', ('0' + xalp.substring(bn,eval(bn + 1)) + xalp.substring(ln,eval(ln + 1))).slice(-2)); }
var omg=location.search.split('mg=')[1] ? decodeURIComponent(location.search.split('mg=')[1]).split('&')[0] : "";
if (omg != '') { setTimeout(andlater,700); wsuff=wsuff.replace('&mg=','&mXg=') + '&mg=' + omg; ln=eval(eval('' + omg) % 16); bn=eval(eval(eval('' + omg) - ln) / 16); wcol=wcol.replace('7566', ('0' + xalp.substring(bn,eval(bn + 1)) + xalp.substring(ln,eval(ln + 1))).slice(-2) + '66'); }
var omb=location.search.split('mb=')[1] ? decodeURIComponent(location.search.split('mb=')[1]).split('&')[0] : "";
if (omb != '') { setTimeout(andlater,500); wsuff=wsuff.replace('&mb=','&mXb=') + '&mb=' + omb; ln=eval(eval('' + omb) % 16); bn=eval(eval(eval('' + omb) - ln) / 16); wcol=wcol.substring(0,5) + ('0' + xalp.substring(bn,eval(bn + 1)) + xalp.substring(ln,eval(ln + 1))).slice(-2); }
//alert(wcol);

function andlater() {
if (omr != '') { document.getElementById('mr').value=omr; }
if (omg != '') { document.getElementById('mg').value=omg; }
if (omb != '') { document.getElementById('mb').value=omb; }
}

function torgba(inc) {
var opa="1.0";
var i, j=0, csess="rgba(:::1.0)", alp="0123456789abcdef", factor=16;
for (i=0; i<=inc.replace('#','').length; i++) {
if (i == 1) {
csess=csess.replace('rgba(:','rgba(' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else if (i == 3) {
csess=csess.replace('::',':' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else if (i == 5) {
csess=csess.replace('::',':' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else {
j=j + (factor * alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1))));
}
csess = csess.replace(":1.0)",":" + opa + ")");
}
document.getElementById('mr').value=csess.split('(')[1].split(':')[0];
wsuff=wsuff.replace('&mr=','&mXr=') + '&mr=' + document.getElementById('mr').value;
document.getElementById('mg').value=csess.split('(')[1].split(':')[1];
wsuff=wsuff.replace('&mg=','&mXg=') + '&mg=' + document.getElementById('mg').value;
document.getElementById('mb').value=csess.split('(')[1].split(':')[2];
wsuff=wsuff.replace('&mb=','&mXb=') + '&mb=' + document.getElementById('mb').value;
if (document.URL.indexOf('?') == -1) {
location.href=document.URL + '?' + wsuff.substring(1);
} else if (document.URL.indexOf('mr=') != -1) {
location.href=document.URL.split('mr=')[0] + wsuff.substring(1);
} else {
location.href=document.URL + wsuff;
}
return csess.replace(/\:/g,',');
}


</script>


</head>

<body>
<div>
<script type='text/javascript'>
document.write("<video style='width:300px;' id='video' src='" + (location.search.split('video=')[1] ? decodeURIComponent(location.search.split('video=')[1]) : (uprefix + usuffix)) + "' controls='true'/>");
</script>
</div>
<div>
<canvas id="c1" width="120" height="192"></canvas>
<script type='text/javascript'>
document.write("<canvas style='background" + (location.search.split('bcol=')[1] ? ('-image:' + decodeURIComponent(location.search.split('bcol=')[1].split('&')[0])).replace('-image:#','-color:#') : '-color:#3B3B3B') + ";' id='c2' width='120' height='192'></canvas>");
document.write("<input data-onblur=\"location.href=document.URL.split('?')[0] + '?bcol=' + encodeURIComponent(this.value) + usuff; \" onchange=\"location.href=document.URL.split('?')[0] + '?bcol=' + encodeURIComponent(this.value) + usuff;\" type=color value='" + (location.search.split('bcol=')[1] ? (decodeURIComponent(location.search.split('bcol=')[1].split('&')[0]) + '#').split('#')[1].replace('RelativeImageURL)','#3B3B3B') : '#3B3B3B') + "' id='mycolour' title='Canvas Background Colour'></input><br><input style=width:90%; id=myrurl placeholder='../images/flowers.png#RelativeImageURL' value='' onclick=\"this.value=this.placeholder;\" onblur=\"location.href=document.URL.split('?')[0] + '?bcol=' + encodeURIComponent('URL(' + this.value + ')') + usuff; \"></input><br><input type=text id=myvurl placeholder=\"video.mp4#RelativeVideoURL\" style=\"width:90%;\" value=\"\" onclick=\"this.value=this.placeholder;\" onblur=\"if (this.value != '') { usuff='&video=' + encodeURIComponent(this.value); document.getElementById('video').src=this.value; usuffix=this.value; }\"></input><br><input type=color id='mymcol' onchange=\"torgba(this.value);\" value='" + wcol + "' title='Video Mask Colour'></input>");
document.write("<input type=hidden value=" + (location.search.split('mr=')[1] ? decodeURIComponent(location.search.split('mr=')[1]) : '146') + " id=mr></input><input type=hidden value=" + (location.search.split('mg=')[1] ? decodeURIComponent(location.search.split('mg=')[1]) : '117') + " id=mg></input><input type=hidden value=" + (location.search.split('mb=')[1] ? decodeURIComponent(location.search.split('mb=')[1]) : '101') + " id=mb></input>  <select id=mode title='Video Manipulation Mode'><option value=0>⬅ See Through ↗</option><option value=1>Grayscale</option><option value=2>Invert</option></select>");
</script>
</div>

<input type=text style="position:absolute;top:-2000px;left:-2000px;" value=""></input>

<script type="text/javascript" src="processor.js"></script>
</body>
</html>