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);
Try to play me :)