How to implement video screenshots in Canvas and H5

This article is to share content related to canvas and h5 how to achieve video capture function. Xiaobian feels quite practical, so share it with you to do a reference. Let’s take a look at Xiaobian.

1. Loading video

When using Canvas to make this screenshot function, we must first ensure that the page has been loaded. This video is completed, so that it can be easily operated. If you use the

    In my "HTML5 and Video", the browser is different for the pre-loading of the video and the LOAD event support, which will affect the playback of VIDEO and other events. So we use JS to build video here to introduce video. 
This way is introduced to the video to note that multiple Source cannot be introduced, so it is necessary to judge the browser to support the video format.

1.1 Using VIDEO’s CANPLAYTYPE () method to determine support format

The canPlayType () method needs to pass a parameter, this parameter is VIDEO format, [ Value: VIDEO / OGG;



or include encoder:


VIDEO / MP4; CODECS = “AVC1.4D401E, MP4A.40.2”

Video / Webm; CODESC = “VP8.0, Vorbis”

Return Value: Represents support level of the webpage: “PRObably – Most likely support (only return this with encoder); “Maybe” – may support; “” – (empty string) does not support;

Function video (video) {var returntype = ‘; if (Video.canPlayType (‘ Video / MP4 ‘) ==’ probably ‘|| Video.canplayType (‘ Video / MP4 ‘) ==’ Maybe ‘) {Returntype = ‘mp4’;} else} (‘”) ==’ probably ‘|| Video.canplayType (‘ Video / Ogg ‘) ==’ Maybe ‘) {

returntype =’ og ‘

} else if (Video / Webm ‘) ==’ probably ‘|| Video.canPlayType (‘ Video / Webm ‘) ==’ Maybe ‘) { returntype =’ webm ‘
}  return returntype;} 

This function can determine the format supported by the browser to VIDEO.

1. Dynamic loading using JS Video Tag
This judgment is determined after the browser supports the format, because I use Chrome, I support the video of the MP4 format, and then we dynamically create a video label.

VAR VIDEOELEM; VAR VIDEOP; Function CreateVideo () {VideoElem =document.createElement ( “video”); // Create video videop = document.getElementById ( “videopanel”); // Get the outer container videop.appendChild video (videoElem); var vtype = videoType (videoElem); // Analyzing The browser supports format if (vtype == “) {videop.innerhtml (‘does not support video”} else {videoelem.setttribute (‘ src ‘, “text.” + Vtype);}}}}

Because we want to make a screenshot function, simple video does not have screenshots, so we have to copy it to Canvas, broadcast this video on Canvas, so let’s hide you first. Display: None.

2. Using Canvas Copy Video
   Now Video has been played on the browser, then we copy it to Canvas, first build Canvas, then get Canvas Context, these don't say it. How to draw a video on Canvas, here we have to use a function. Drawimage function usage 
1.DrawImage (IMG, X, Y): Draw an IMG in the location of the canvas (x, y);

2.DrawImage (IMG, X, Y , Width, Height: Painting a width wide in the location of the canvas (x, y), Height High IMG;

3.DrawImage (IMG, SX, SY, SWIDTH, Sheight, X, Y, Width, Height: Picture in the canvas (x, y)A screenshot of the SWIDTH width of IMG (SX, SY), a screenshot of Sheight, painted on the canvas to be scaled to Width Width and Height High.

The above is the use of DrawImage, this function is very powerful.

Back to make a screenshot, we have now created a canvas on the browser – ContextVideo, then we are here to draw a video:

ContextVideo.drawImage (VideoEleM, 0);

Then we can see a picture in Canvas, but the video is constantly changing, so we need to use the setInterval function. Videoo is drawn as a source.

SetInterval (Function () {

ContextVideo, DrawImage (VideoEleM, 0, 0);

}, 100)
   The size of the time interval here will affect whether the video playback will be card. 
We will move the Video on Canvas. Next, a screenshot is made.

3. Making screenshots showing Canvas panel
  Here we need to draw a Canvas canvas on the page, and then use the DrawImage method, screenshots. 

Contextimg.drawImage (canvasvideo, 0, 0, canvasvideo.width, canvasvideo.Height);
This code will be the first Canvas painted on the second Canvas.

4. Making a screenshot button

makes a button, then bound CLick event, click on the previous function after clicking, so you can make a screenshot. When the map is cut, you can save the figure, then pour it into the PS production expression package.

Thank you for reading! Regarding how CANVAS and H5 implements video screenshots, share it here, I hope that the above can help everyone, let everyone learn more. If you feel that the article is good, you can share it out to let more people see it!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment