在畫布上基本載入和播放視訊

畫布可用於顯示來自各種來源的視訊。此示例顯示如何將視訊作為檔案資源載入，顯示它並在螢幕播放/暫停切換上新增簡單的單擊。

此 stackoverflow 自回答問題如何使用 HTML5 canvas 標籤顯示視訊顯示以下示例程式碼。

只是一個影象

就畫布而言，視訊只是一個影象。你可以像任何影象一樣繪製它。不同的是視訊可以播放和有聲音。

獲取畫布和基本設定

// It is assumed you know how to add a canvas and correctly size it.
var canvas = document.getElementById("myCanvas"); // get the canvas from the page
var ctx = canvas.getContext("2d");
var videoContainer; // object to hold video and associated info

建立和載入視訊

var video = document.createElement("video"); // create a video element
video.src = "urlOffVideo.webm"; 
// the video will now begin to load.
// As some additional info is needed we will place the video in a
// containing object for convenience
video.autoPlay = false; // ensure that the video does not auto play
video.loop = true; // set the video to loop.
videoContainer = {  // we will add properties as needed
     video : video,
     ready : false,   
};

與影象元素不同，視訊不必完全載入以在畫布上顯示。視訊還提供了許多可用於監控視訊狀態的額外事件。

在這種情況下，我們希望知道視訊何時可以播放。oncanplay 意味著足夠的視訊已載入播放其中一些，但可能還不足以播放到最後。

video.oncanplay = readyToPlayVideo; // set the event to the play function that 
                                  // can be found below

或者你也可以使用 oncanplaythrough，它會在足夠的視訊載入時觸發，以便可以播放到最後。

video.oncanplaythrough = readyToPlayVideo; // set the event to the play function that
                                         // can be found below

僅使用其中一個 canPlay 事件而不是兩者。

can play 事件（相當於影象 onload）

function readyToPlayVideo(event){ // this is a referance to the video
    // the video may not match the canvas size so find a scale to fit
    videoContainer.scale = Math.min(
                         canvas.width / this.videoWidth, 
                         canvas.height / this.videoHeight); 
    videoContainer.ready = true;
    // the video can be played so hand it off to the display function
    requestAnimationFrame(undateCanvas);
}

顯示

視訊不會在畫布上播放。你需要為每個新幀繪製它。由於很難知道確切的幀速率以及它們何時出現，因此最好的方法是將視訊顯示為以 60fps 執行。如果幀速率較低，那麼 w 只渲染相同的幀兩次。如果幀速率更高，那麼沒有什麼可以看到額外的幀，所以我們只是忽略它們。

視訊元素只是一個影象元素，可以像任何影象一樣繪製，你可以縮放，旋轉，平移視訊，映象，淡化，剪輯和僅顯示部分，使用全域性複合模式第二次繪製它新增像閃電，螢幕等 FX。

function updateCanvas(){
    ctx.clearRect(0,0,canvas.width,canvas.height); // Though not always needed 
                                                     // you may get bad pixels from 
                                                     // previous videos so clear to be
                                                     // safe
    // only draw if loaded and ready
    if(videoContainer !== undefined && videoContainer.ready){ 
        // find the top left of the video on the canvas
        var scale = videoContainer.scale;
        var vidH = videoContainer.video.videoHeight;
        var vidW = videoContainer.video.videoWidth;
        var top = canvas.height / 2 - (vidH /2 ) * scale;
        var left = canvas.width / 2 - (vidW /2 ) * scale;
        // now just draw the video the correct size
        ctx.drawImage(videoContainer.video, left, top, vidW * scale, vidH * scale);
        if(videoContainer.video.paused){ // if not playing show the paused screen 
            drawPayIcon();
        }
    }
    // all done for display 
    // request the next frame in 1/60th of a second
    requestAnimationFrame(updateCanvas);
}

基本播放暫停控制

現在我們已經載入並顯示了視訊我們需要的是播放控制元件。我們將其作為螢幕上的單擊切換播放。播放視訊並且使用者點選視訊時，視訊會暫停。暫停時，點選恢復播放。我們將新增一個功能來使視訊變暗並繪製一個播放圖示（三角形）

function drawPayIcon(){
     ctx.fillStyle = "black";  // darken display
     ctx.globalAlpha = 0.5;
     ctx.fillRect(0,0,canvas.width,canvas.height);
     ctx.fillStyle = "#DDD"; // colour of play icon
     ctx.globalAlpha = 0.75; // partly transparent
     ctx.beginPath(); // create the path for the icon
     var size = (canvas.height / 2) * 0.5;  // the size of the icon
     ctx.moveTo(canvas.width/2 + size/2, canvas.height / 2); // start at the pointy end
     ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 + size);
     ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 - size);
     ctx.closePath();
     ctx.fill();
     ctx.globalAlpha = 1; // restore alpha
}    

現在播放暫停事件

function playPauseClick(){
     if(videoContainer !== undefined && videoContainer.ready){
          if(videoContainer.video.paused){                                 
                videoContainer.video.play();
          }else{
                videoContainer.video.pause();
          }
     }
}
// register the event
canvas.addEventListener("click",playPauseClick);

摘要

使用畫布播放視訊非常容易，實時新增效果也很容易。然而，格式有一些限制，你可以如何玩和尋找。MDN HTMLMediaElement 是獲取視訊物件的完整依據的地方。

在畫布上繪製影象後，你可以使用 ctx.getImageData 訪問其包含的畫素。或者你可以使用 canvas.toDataURL 拍攝靜止影象並下載它。 （僅當視訊來自受信任的來源且不會汙染畫布時）。

請注意，如果視訊有聲音，那麼播放它也會播放聲音。

快樂的視訊。