Example code for capturing still images from video using HTML5

A simple example showing how to capture a still image from a video. Let's take a look

Suppose you have the following HTML code:

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

Then, when the user clicks the "Capture" button, we write the current video content to a canvas and use Display the image on the canvas.

(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);           
}());

【Related recommendations】

1. Free h5 online video tutorial

2.HTML5 full version manual

3. php.cn original html5 video tutorial

The above is the detailed content of Example code for capturing still images from video using HTML5. For more information, please follow other related articles on the PHP Chinese website!