Skip to content

Instantly share code, notes, and snippets.

@robertcedwards
Created January 15, 2013 22:26
Show Gist options
  • Save robertcedwards/4542741 to your computer and use it in GitHub Desktop.
Save robertcedwards/4542741 to your computer and use it in GitHub Desktop.
<!-- Begin Code Snippet -->
<div class='focusvid' style='position: relative; display: inline-block; text-align: left;'>
<video src='MVI_7840 - Broadband.m4v' type='video/mp4' onclick='vid_4ufrut8(event, this);' style='width: 600px; height: auto; cursor: crosshair' oncanplay='vid_4ufrut8(null, this);'></video>
<script>
function vid_4ufrut8(e, el){
var focusmap = [
[71,27,154,160,164,190,155,150,154,160,150,154,154,147,142,142,128,155,164,128],
[11,168,182,164,155,168,149,154,154,160,164,155,147,154,6,126,162,160,160,12],
[33,164,160,154,164,154,166,171,193,182,160,182,154,149,13,158,155,175,149,114],
[33,173,171,164,193,164,182,190,177,162,185,154,147,150,33,182,155,139,168,171],
[22,64,164,164,154,160,171,158,160,173,173,154,155,164,182,193,173,190,62,69],
[168,175,164,190,160,160,182,162,168,155,147,154,64,150,193,160,173,175,108,173],
[168,171,166,154,190,158,187,190,162,158,162,84,75,160,164,168,190,112,34,64],
[173,193,160,158,160,164,162,168,160,147,164,87,155,160,154,175,155,190,112,27],
[160,193,193,166,168,193,160,164,155,150,160,160,164,155,160,155,160,193,155,164],
[182,158,171,162,175,160,160,173,193,158,173,87,158,171,162,154,150,150,177,166],
[171,193,164,193,160,182,175,168,158,162,160,160,160,155,160,154,171,162,193,185],
[162,164,182,193,155,160,171,155,160,173,158,154,158,158,155,158,155,158,164,171],
[193,173,160,187,162,190,182,187,190,155,160,150,166,171,155,155,155,193,128,90],
[175,182,187,180,193,154,168,50,173,193,53,59,168,149,180,164,139,180,132,33],
[193,166,182,162,187,60,38,66,57,18,35,59,158,50,8,175,138,60,11,80],
[164,190,171,160,166,39,39,11,142,43,128,80,185,44,9,35,16,177,112,53],
[155,164,180,168,173,40,39,44,139,44,190,43,49,43,158,84,55,64,16,90],
[168,185,160,171,162,173,158,187,190,166,155,160,50,190,162,162,175,173,187,13],
[155,154,154,160,175,185,190,162,168,164,118,35,147,171,190,171,171,190,142,34],
[149,185,147,171,173,162,158,160,158,168,193,166,73,171,180,166,177,57,150,147]];
var frame = focusmap[focusmap.length/2][focusmap[focusmap.length/2].length/2]
if(e){
var x = 1.0*e.layerX; var y = 1.0*e.layerY;
var cs = window.getComputedStyle(el) || el.style;
var w = 1.0*parseInt(cs.width,10); var h = 1.0*parseInt(cs.height,10);
var pw = Math.floor(focusmap.length*x/w);
var ph = Math.floor(focusmap[pw].length*y/h);
frame = focusmap[pw][ph];
}
el.currentTime = frame*0.03333;
}
</script>
<div onclick='this.parentNode.removeChild(this);' style='position: absolute; left: 0; top: 0; right: 0; height: 36px; background: rgba(0,0,0,0.5); color: #FFF; font-family: Arial; font-size: 13px; padding: 5px; padding-left: 10px; line-height: 18px;'>This is a DOF-Changeable Image.<br/>Click anywhere to adjust the focus.<div style='position: absolute; text-align: right; top: 5px; right: 10px;'><span style='font-size: 11px;'><a style='color: #8CF; text-decoration: none;' href='http://chaoscollective.org'>The Chaos Collective</a></span><br/></div></div>
</div>
<!-- End Code Snippet -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment