PHP前端开发

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

百变鹏仔 3个月前 (10-18) #H5教程
文章标签 实例

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

假设你有下面的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);           }());