Large Video to Canvas with RequestAnimationFrame

by joquery

HTML

<canvas id="leCanvas"></canvas>

<video id="leVideo" src="http://stream.flowplayer.org/bauhaus.webm" muted controls></video>

CSS

#leCanvas {
    background: lime;
}

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 canvas = document.getElementById("leCanvas"),
    context = canvas.getContext("2d"),
    
    leVideo = document.getElementById("leVideo"),
    videoIsRunning = true;

leVideo.onplaying = function() { 
    drawVideo();
    videoIsRunning = true;
};
leVideo.onended = function() { 
    videoIsRunning = false;
}


var drawVideo = function() {
    if (videoIsRunning) {
        context.drawImage(leVideo, 0, 0, canvas.width, canvas.height);
        window.requestAnimFrame(drawVideo);
    }  
};