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, 0); setTimeout(loop, 1000 / 30); // drawing at 30fps        }    })();}, 0);

我猜上面的代码是自我解释，如果下面不加注释，我将尝试解释上面的几行代码

编辑 ：

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var video = document.getElementById('video');// set canvas size = video size when knownvideo.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, 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>