Javascript 如何将视频放入画布？

从昨天开始，我试图找到一种解决方案，将视频放入画布，但画布的形状如下：

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

有什么想法吗

---

谢谢

您可以使用带有

元素参数的

drawImage

来绘制当前显示的视频帧：

<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);

...
//在。。。
var myvideo=document.getElementById（“myvideo”）；
var mycanvas=document.getElementById（“mycanvas”）；
myvideo.play（）；
//假设视频已加载（否则它还没有任何要绘制的帧）
mycanvas.getContet（“2d”）.drawImage（myvideo）；

如果播放视频并反复调用

drawImage

，则可以在播放视频时显示视频中的一系列图像

---

O'Reilly对如何实现这一点有自己的见解。

画布上下文方法

drawImage

可以采用HTMLImageElement、HTMLVideoElement或HtmlCanvaSeElement

以下是如何在画布上绘制视频帧：

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);

实例：

---

你说的“把视频放到画布上”是什么意思？是否要将

元素中的静态图像放入画布？此外，链接到的画布是一个完全正常的矩形；它只是画了一个平行四边形。是的，我只想在画布上播放一段视频，里面有一个元素。来吧，请至少展示一下自己的研究成果！