Question

从昨天开始，我试图找到一个将视频放入画布的解决方案，但它是一个具有如下特定形状的画布：http://letsdunkit.com/so/rectangle.html

我看过很多关于“drawImage”的教程，但这不是我想要的，或者我错了，我没有正确使用它。

有什么想法吗？

谢谢

Answer 1

您可以使用带有drawImage元素参数的<video>来绘制当前显示的视频帧：

<video id="myvideo" src="..."></video>
<canvas id="mycanvas"></canvas>

...

// in a <script>...
var myvideo = document.getElementById("myvideo");
var mycanvas = document.getElementById("mycanvas");

myvideo.play();

// assuming video is loaded (otherwise it won't have any frames to be drawn yet)
mycanvas.getContet("2d").drawImage(myvideo);

如果您播放视频并反复拨打drawImage来电，则可以在视频播放时显示一系列图片。

O'Reilly有complete tutorial如何实现这一目标。

Answer 2

canvas上下文方法drawImage可以使用HTMLImageElement，HTMLVideoElement或HTMLCanvasElement。

以下是在画布上绘制视频帧的方法：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var myVideo = document.createElement('video');
// Video tags usually have more than one source. Not all browsers can play Ogg/Theora
myVideo.src = "http://upload.wikimedia.org/wikipedia/commons/2/2f/Mockingbird_Spring.ogv";
myVideo.autoplay = true;
myVideo.loop = true;

setInterval(function(){
    ctx.drawImage(myVideo, 0, 0, 400, 400);
}, 60);

实例：

http://jsfiddle.net/simonsarris/jF4TE/

如何将视频放入画布？

2 个答案: