是否可以将html5-视频显示为画布的一部分?
基本上与您在画布上绘制图像的方式相同。
context.drawVideo(vid, 0, 0);
谢谢!
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 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, 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>