CANVAS and HTML5 Implementation of Video Screenshot Function Examples

During this time, I have been studying Canvas. Suddenly I want to make a function that can be used to take a screenshot, and then pull the picture to make an emoji, hahahahahaha ~~

Making method:

When using Canvas to make this screenshot function, we must first ensure that the page has been loaded and completed, so that it can easily operate it. If you use the <Video> label directly below:

 <Video Loop Controls ID = Testmp4 Width = 500 Height = 400> <Source SRC = Test.mp4 Type = Video/MP4> <Source SRC = Test.webm Type/Webm> <Sour CE SRC = TEST.OGG TYPE = VIDEO /ogg> </video>

In my "HTML5 and Video", the browser supports the pre -loaded Progress and LOAD events of the video, which will affect Video's playback and other events. So we use JS to construct Video to introduce videos.

In this way, you should pay attention to the introduction of videos. You cannot introduce multiple sources, so you must first judge the browser's support for the video format.

CanplayType () method needs to pass a parameter, this parameter is the format of Video,

Commonly used value: Video/OGG;

video/mp4;

video/webm;

Or include encoders:

video/ogg; codecs = theora, vorbis

video/mp4; codecs = avc1.4d401e, mp4a.40.2

video/webm; codesc = vp8.0, vorbis

Return value: indicates the support level of the webpage: Probably -is most likely to support (only return this when the input value is with the encoder); Maybe -may support; - (empty string) does not support;

 function videotype (video) {var return = ''; if (video.canplayType ('video/mp4') == 'Probably' || video.CanplayType ('Video/MP4 ') ==' Maybe ') {RETURNTYPE = 'mp4';} else if (video.canplayType ('video/ogg') == 'Probably' || video.canplayType ('video/ogg') == 'Maybe') {<br> Retunty PE = 'OGG' ; <br>} Else if (video.canplayType ('video/webm') == 'Probably' || video.canplayType ('video/webm') == 'Maybe') {<br> Retuntyp e = 'webm' ; <br>} <br> Return RETURNTYPE;}

This function can determine the format of the browser's support for Video.

After judging the support format of the browser here, because I use Chrome, my browser supports MP4 format videos, and then we dynamically create a Video tag.

 var videoElem; var videodiv; function createvideo () {videoElem = Document.createElement (video); // Create video videodiv = Document.GetelementByid (VIDE opnel); // Get Video's outer container videodiv.appndchild (VideoElem); var vtype = VideoType (VideoElem); // Determine the format of the browser support if (vtype ==) {videodiv.innerhtml ('not support video')} else {videoelem.Setattribute ('SRC', Text.+ vtype);}}

Since we want to make a screenshot function here, the simple Video does not have the interface of screenshots, so we need to copy it to Canvas and broadcast this video on Canvas, so here we first hide Video to hide (Display: None).

Now Video has been played on the browser. Next, we copy it to Canvas, first build Canvas, and then get the canvas Context. How to draw Video on Canvas, here we need to use a function. DrawImage function usage

1. DrawImage (IMG, X, Y): Draw a IMG in the position of the canvas (x, y);

2. DrawImage (IMG, X, Y, Width, Height): Draw a width wide IMG with a high height, height;

3.DrawImage (IMG, SX, SY, SWIDTHT, SHEIGHT, X, Y, Width, Height, Height): Draw a IMG (SX, SY) position in the canvas (x, y) position of SWIDTH width, sheight high, sheight Screenshot, draw on the canvas to width and height high.

The above is the usage of DrawImage. This function is very powerful.

Back to the screenshot, we have now created the canvas on the browser-ContextVideo, and then we will draw the video here:

 contextVideo.drawimage (VideoElem, 0,0);

Then we can see a picture in Canvas, but the video is constantly changing, so we need to use the SetInterval function to continue to draw as the source.

 SetInterval (Function () {<br> ContextVideo, DrawImage (VideoElem, 0,0); <br>}, 100)

The size of the time interval here will affect whether the video playback will be card.

At this point we moved Video to Canvas. Next make a screenshot.

Here we need to draw a Canvas canvas on the page-Contextimg, and then use the DrawImage method to take a screenshot again.

 Contextimg.DrawImage (Canvasvideo, 0,0, Canvasvideo.Width, Canvasvideo.height);

This code draws the first Canvas to the second Canvas.

Make a button, and then bind the click event. After clicking, call the previous function, so that you can make a screenshot.

When the graph is cut, the right button can be saved, and then poured into the PS to make emoticons.

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.