This paper illustrates the method of JS+HTML5 realization of video screenshot. Share to everyone for your reference. Specifically as follows:
1. HTML section:
<video id= "video" controls= "Controls" >
<source src= ". mp4"/>
</video>
<button id= " Capture ">Capture</button>
<div id=" Output "></div>
2. Click the button to trigger the following code:
(function () {
"use 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);
} ());
I hope this article will help you with your JavaScript programming.