html - ビデオを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 ミリ秒ごとに画像を描画するループと、可動オブジェクトの 1 つが移動した場合にキャンバス描画関数を呼び出す mousemove のハンドラーがあります。