在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處理程序，如果其中一個可移動對象移動，它將調用我的畫布繪製函數。