Rumah  >  Artikel  >  hujung hadapan web  >  利用HTML5 从视频中捕获静止图像实例代码

利用HTML5 从视频中捕获静止图像实例代码

零下一度
零下一度asal
2017-05-04 15:21:321613semak imbas

一个简单的例子展示了如何从视频中捕获静止图像。下面来看一下

假设你有下面的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视频教程

Atas ialah kandungan terperinci 利用HTML5 从视频中捕获静止图像实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn