Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>capture screen</title>
<body>
<video id= "video" controls= "Controls" >
<source src= "Img/test.mp4" >
</video>
<div id= "Output" ></div>
<script type= "Text/javascript" >
(function () {
var video, output;
var scale = 0.8;
var initialize = function () {
Output = document.getElementById ("Output");
Video = document.getElementById ("video");
Video.addeventlistener (' Loadeddata ', captureimage); //used to add an event handle to the specified element.
};
var captureimage = function () {
var canvas = document.createelement ("Canvas"); Create a canvas
Canvas.width = video.videowidth * scale;
Canvas.height = video.videoheight * scale;
Canvas.getcontext (' 2d '). DrawImage (video, 0, 0, canvas.width, canvas.height); GetContext: Setting the canvas environment; DrawImage: Drawing
var img = document.createelement ("img");
IMG.SRC = Canvas.todataurl ("Image/png"); Get the URL of a picture
Output.appendchild (IMG);
};
Initialize ();
})();
</script>
</body>
JS gets the first frame of the video
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
