html5：在画布中显示视频

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

video.addEventListener('play',function () {
    var $this = this; //cache
    (function loop() {
        if (!$this.paused && !$this.ended) {
            ctx.drawImage($this,0);
            setTimeout(loop,1000 / 30); // drawing at 30fps
        }
    })();
},0);

我猜上面的代码是自我解释，如果没有下面的评论，我会尝试解释上面几行代码

编辑：
这里是一个在线的例子，只是为了你:)
Demo

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

// set canvas size = video size when kNown
video.addEventListener('loadedMetadata',function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
});

video.addEventListener('play',function() {
  var $this = this; //cache
  (function loop() {
    if (!$this.paused && !$this.ended) {
      ctx.drawImage($this,0);
      setTimeout(loop,1000 / 30); // drawing at 30fps
    }
  })();
},0);

<div id="theater">
  <video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="false"></video>
  <canvas id="canvas"></canvas>
  <label>
    <br />Try to play me :)</label>
  <br />
</div>