首頁 > web前端 > H5教程 > 主體

利用HTML5 從影片中擷取靜止影像實例程式碼

零下一度
發布: 2017-05-04 15:21:32
原創
1608 人瀏覽過

一個簡單的例子展示瞭如何從影片中捕捉靜止影像。下面來看看

假設你有下面的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(&#39;2d&#39;)
              .drawImage($video, 0, 0, canvas.width, canvas.height);
 
        var img = document.createElement("img");
        img.src = canvas.toDataURL();
        $output.prepend(img);
    };
    $(initialize);           
}());
登入後複製

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

3. php.cn原始html5影片教學

#

以上是利用HTML5 從影片中擷取靜止影像實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板