video working with blackbot method

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');

var isOpera = !! window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isFirefox = typeof InstallTrigger !== 'undefined';
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
var isChrome = !! window.chrome && !isOpera;
var isIE = /*@cc_on!@*/
false || !! document.documentMode;

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

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

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

if (isChrome) {
    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();
    });
} else {
    window.addEventListener('mousemove', function (e) {
        ctx2.globalCompositeOperation = 'source-over';
        ctx2.beginPath();
        ctx2.arc(e.pageX, e.pageY, 100, 0, Math.PI * 2, false);
        ctx2.fillStyle = "rgba(255,255,255,1.0)";
        ctx2.fill();
    });
}

requestAnimationFrame(anim);


function anim() {
    requestAnimationFrame(anim);
    if (isChrome) {
        ctx2.globalCompositeOperation = 'destination-in';
        ctx2.drawImage(v, 0, 0, w, h);
        ctx.globalCompositeOperation = 'source-over';
        ctx2.drawImage(c, 0, 0, w, h);
    } else {
        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';
   ...