html页面显示视频怎么写,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);

Try to play me :)