使用HTML5從視頻中捕獲靜止圖像的案例

本文將為大家詳細介紹“使用HTML5從視頻中捕獲靜止圖像的案例”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“使用HTML5從視頻中捕獲靜止圖像的案例”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。

html是什么

html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。

一個簡單的例子展示了如何從視頻中捕獲靜止圖像。

假設你有下面的HTML代碼：

<video id="video" controls="controls">
    <source src=".mp4" />
</video>
 
<button id="capture">Capture</button>
 
<p id="output"></p>

然后，當用戶單擊“捕獲”按鈕，我們將當前的視頻內容寫入到一個畫布，并使用在畫布上顯示圖像。

(function() {
    "using strict";
 
    var $video, $output;
    var scale = 0.25;
 
    var initialize = function() {
        $output = $("#output");
        $video = $("#video").get(0);
        $("#capture").click(captureImage);               
    };
 
    var captureImage = function() {
        var canvas = document.createElement("canvas");
        canvas.width = $video.videoWidth * scale;
        canvas.height = $video.videoHeight * scale;
        canvas.getContext('2d')
              .drawImage($video, 0, 0, canvas.width, canvas.height);
 
        var img = document.createElement("img");
        img.src = canvas.toDataURL();
        $output.prepend(img);
    };
    $(initialize);           
}());

如果你能讀到這里，小編希望你對“使用HTML5從視頻中捕獲靜止圖像的案例”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！