在 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 上有一个处理程序，如果其中一个可移动对象移动，它会调用我的画布绘制函数。