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

Question

我已经可以将多个图像上传到画布并拖放图像。 现在我需要拖放用户上传的视频。 请注意，用户可以同时拥有图像和视频。

Answer 1

您必须先加载视频（等待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上调用我的画布绘图函数，如果其中一个可移动对象移动了。