html5:在画布中显示视频 [英] html5: display video inside canvas
本文介绍了html5:在画布中显示视频的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以将html5视频显示为画布的一部分?
is it possible to display a html5-video as part of the canvas?
基本上与在画布上绘制图像的方式相同。
basically the same way as you draw an Image in the canvas.
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);
我猜上面的代码是自解释的,如果没有在下面放一个注释,上面几行代码
I guess the above code is self Explanatory, If not drop a comment below, I will try to explain the above few lines of code
编辑:
这里是一个在线示例,只是为了:)
演示
Edit :
here's an online example, just for you :)
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, 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>
这篇关于html5:在画布中显示视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文