javascript - 如何将视频放入画布？

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 有一个关于如何完成此操作的完整教程。

Answer 2

画布上下文方法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/