<video id="video" src="tetris.(mp4, ogg, webm ...)" controls></video>

<canvas id="canvas" width="154" height="104"></canvas>

var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';

ctx.fillRect(104, 0, 50, 50);

ctx.fillRect(0, 52, 50, 50);

ctx.fillRect(52, 52, 50, 50);

ctx.fillRect(104, 52, 50, 50);

ctx.drawImage(document.getElementById('video'), 0, 0);

for(var y = 0; y < 18; y++){for(var x = 0; x < 10; x++){ /* draw tile */ }}

setInterval(processFrame, 100);

var px = ctx.getImageData(21, 21, 1, 1).data; if(px[2] == 248){ /* skip */ }

-(webkit, moz, o)-transform: scaleX(...) scaleX(...) skewX(...) skewY(...);