在html5画布中显示视频并拖放

我已经可以上传多张图片到画布上并拖放图片了。 现在我需要拖放用户上传的视频。

---

注意：用户可以同时拥有图像和视频。

您必须首先加载视频（等待其readyState为4）

然后，您可以根据需要频繁地在画布上绘制其内容，就像它是任何图像一样：

function drawMyCanvas() {
    ...

    if (videoElement.readyState==4) {
            context.drawImage(videoElement, destX, destY, destWidth, destHeight);
            if (!videoElement.paused) {
                // set timeout for a new drawing 20 ms later
                window.setTimeout(drawMyCanvas, 20);
            }

  ...

---

当我这样做时，我通常有一个循环，每20毫秒绘制一次图像，并且在mousemove上有一个处理程序，如果其中一个可移动对象移动，它将调用我的画布绘制功能。

谢谢，这是可行的，但我有一个问题，因为我有。c、 fillStyle=“白色”；c、 fillRect（001300768）；这是在我拖动图像时清除画布。视频总是以白色闪烁。如果您使用与fillRect相同的功能绘制视频帧，则不应出现闪烁（我没有）。您确定每次绘制画布时都要绘制视频吗？var loop=setInterval（function（）{c.fillStyle=“white”；c.fillRect（0，01300，768）；for（var img in images）{images[img].update（）；}，10）；in.uptade（）是我绘制图像和视频帧的地方