1var canvas = document.getElementById('canvas');
2var ctx = canvas.getContext('2d');
3var video = document.getElementById('video');
4
5// set canvas size = video size when known
6video.addEventListener('loadedmetadata', function() {
7 canvas.width = video.videoWidth;
8 canvas.height = video.videoHeight;
9});
10
11video.addEventListener('play', function() {
12 var $this = this; //cache
13 (function loop() {
14 if (!$this.paused && !$this.ended) {
15 ctx.drawImage($this, 0, 0);
16 setTimeout(loop, 1000 / 30); // drawing at 30fps
17 }
18 })();
19}, 0);