video working with blackbot method

by nhulea

HTML

<!--<div id="block" style="display: block;z-index:9999;color:red;">Loading ....</div>-->
<div style="display: block;">
    <video muted="true" id="video" loop="true" autoplay="true">
        <source src="http://f7e397235b7ff71857e7-2936cacd2db585f07d4943608e0d08b7.r63.cf2.rackcdn.com/GifArt_Video_Teat_1.webmvp8.webm" type="video/webm" />
        <source src="http://f7e397235b7ff71857e7-2936cacd2db585f07d4943608e0d08b7.r63.cf2.rackcdn.com/GifArt_Video_Teat_1.theora.ogv" type="video/ogg" />
        <source src="http://f7e397235b7ff71857e7-2936cacd2db585f07d4943608e0d08b7.r63.cf2.rackcdn.com/GifArt_Video_Teat_1.mp4video.mp4" type="video/mp4" />
    </video>
</div>
<canvas id="c"></canvas>
<canvas id="c2"></canvas>
<script src="http://yastatic.net/modernizr/2.7.1/modernizr.min.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.min.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/anime.min.js"></script>

CSS

canvas {
    position:absolute;
    top:0px;
    left:0px;
}
img, video {
    width:0px;
    height:0px;
}
html {
    background-color:#fff;
}

JavaScript

var c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    canvas = document.getElementById('c2'),
    ctx2 = canvas.getContext('2d'),
    gif = document.getElementById('gif'),
    gif2 = document.getElementById('gif2'),
    v = document.getElementById('video'),
    b = document.getElementById('block');

w = window.innerWidth;
h = window.innerHeight;

c.width = w;
c.height = h;

canvas.width = w;
canvas.height = h;

//v.addEventListener('load', function () {
//alert(v);
//b.style.display = 'none';
window.addEventListener('mousemove', function (e) {
    ctx.globalCompositeOperation = 'source-over';
    ctx.beginPath();
    ctx.arc(e.pageX, e.pageY, 100, 0, Math.PI * 2, false);
    ctx.fillStyle = "rgba(255,255,255,1.0)";
    ctx.fill();
});
requestAnimationFrame(anim);
//});

function anim() {
    /*
    ctx.globalCompositeOperation = 'source-over';
    ctx.clearRect(0, 0, w, h);
    ctx2.globalCompositeOperation = 'source-atop';
    ctx2.drawImage(v, 0, 0, w, h);
    ctx2.globalCompositeOperation = 'source-over';
    ctx.drawImage(canvas, 0, 0, w, h);
    ctx.globalCompositeOperation = 'source-atop';
    */
    requestAnimationFrame(anim);
/*
    ctx2.globalCompositeOperation = 'destination-in';
    ctx2.drawImage(v, 0, 0, w, h);
    ctx.globalCompositeOperation = 'source-over';
    ctx2.drawImage(c, 0, 0, w, h);
    */
}


/*
document.addEventListener('mousedown', function (e) {
    function anim() {
        console.log('dude');
        c = document.createElement('canvas'),
        ctx = c.getContext('2d'),
        canvas = document.createElement('canvas'),
        ctx2 = canvas.getContext('2d'),
        gif2 = document.getElementById('gif2');
        ctx.globalCompositeOperation = 'source-over';
        ctx.clearRect(0, 0, w, h);
        ctx2.globalCompositeOperation = 'source-atop';
        ctx2.drawImage(gif2, 0, 0, w, h);
        ctx2.globalCompositeOperation = 'source-over';
        ctx.drawImage(canvas, 0, 0, w, h);
       ...