AnimFrame

by giacal

HTML

<canvas id='visibile'></canvas>
<canvas id='nascosto'></canvas>
<video autoplay loop muted crossorigin="Anonymous">
<source src="http://sandropaganotti.com/wp-content/goodies/samples/sintel-trailer.mp4" type="video/mp4">
    <source src="http://sandropaganotti.com/wp-content/goodies/samples/sintel-trailer.webm" type="video/webm">
</video>
<form>        
    <input type="checkBox" name="red "  id="red"> R
    <input type="checkBox" name="green" id="green"> G
    <input type="checkBox" name="blue"  id="blue"> B
</form>

CSS

video, #nascosto{
    display: none;
}

JavaScript

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var cv = document.querySelector('canvas#visibile'),
    ct = cv.getContext('2d'),
    cn = document.querySelector('canvas#nascosto'),
    xn = cn.getContext('2d');
    vd = document.querySelector('video');

copyloop = function(){
    requestAnimFrame(copyloop);
    xn.drawImage(vd,0,0,cn.width,cn.height);
    var fg = xn.getImageData(0,0, cn.width,cn.height),
        fgd = fg.data;
    
    var redc   = document.forms[0].red.checked,
        greenc = document.forms[0].green.checked,
        bluec  = document.forms[0].blue.checked;
    
    for(var i=0; i < fgd.length; i+=4){
        /*posizione : 1=rosso, 2=verde, 3=blue*/
        fgd[i]   = redc   ? fgd[i]   : 0; 
        fgd[i+1] = greenc ? fgd[i+1] : 0; 
        fgd[i+2] = bluec  ? fgd[i+2] : 0; 
    }
    fg.data = fgd;
    ct.putImageData(fg,0,0);
}
    
    

playingVideo = function(e){
    vd.removeEventListener('playing', playingVideo, false);
    requestAnimFrame(copyloop);
}

vd.addEventListener('playing', playingVideo, false);