Canvas and html5 video screenshot function example, canvashtml5

Canvas and html5 video function example, canvashtml5

I have been studying canvas for some time. I want to create a function that can capture screenshots, and then pull the images to make an emoticons package ~~

Production method:

1. Load a video on the page

When using canvas to create this function, you must first ensure that the video has been loaded on the page, so that you can conveniently operate on it. If you use the following method to embed the <video> label:

<video loop controls id="testmp4" width="500" height="400" >    <source src="test.mp4" type="video/mp4">  <source src="test.webm" type="video/webm">   <source src="test.ogg" type="video/ogg"></video> 

In my article html5 and video, the browser's support for video pre-loading progress and load events is different, which will affect video playback and trigger of other events. So here we use js to construct video to introduce video.

When using this method to introduce videos, you must note that you cannot introduce multiple sources. Therefore, you must first determine the browser's support for the video format.

1.1 Use the canPlayType () method of video to determine the supported formats

The canPlayType () method requires passing in a parameter in the video format,

Common Values: video/ogg;

Video/mp4;

Video/webm;

Or include Encoder:

Video/ogg; codecs = "theora, vorbis"

Video/mp4; codecs = "avc1.4D401E, mp4a. 40.2"

Video/webm; codesc = "vp8.0, vorbis"

Returned value: indicates the support level of the webpage: "probably"-most likely supported (only this is returned when the input value has an encoder); "maybe"-possibly supported; ""-(Null String) is not supported;

function videoType(video){    var returnType='';    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> 　　　　returnType= 'ogg'; 　　 <br>　　 }else if(video.canPlayType('video/webm')=='probably'||video.canPlayType('video/webm')=='maybe'){<br> 　　　　returnType= 'webm'; 　　 <br>　　 }<br>　　 return returnType; } 

This function can determine the formats supported by the browser for video.

1.2 dynamically load video tags using js

After judging the supported formats of the browser, my browser supports videos in mp4 format because I use chrome. Then we dynamically create a video tag.

Var videoElem; var videoDiv; function createVideo () {videoElem = document. createElement ("video"); // create video videoDiv = document. getElementById ("videopanel"); // obtain the video's outer container videoDiv. appendChild (videoElem); var vtype = videoType (videoElem); // determine the format supported by the browser. if (vtype = "") {videoDiv. innerHtml ('video not supported ')} else {videoElem. setAttribute ('src', "text. "+ vtype );}}

Because we want to create a function, which is an interface not available for video, we need to copy it to the canvas and broadcast the video on the canvas, therefore, we will first hide the video (display: none ).

2. Use canvas to copy a video

Now that video has been played in the browser, copy it to the canvas. First, create a canvas and then get the canvas context. We need to use a function to draw video on the canvas. Usage of the drawImage Function

1. drawImage (img, x, y): draw an img At the position (x, y) of the canvas;

2. drawImage (img, x, y, width, height): draw an img with width and height at the position (x, y) of the canvas;

3. drawImage (img, sx, sy, swidth, sheight, x, y, width, height): draw an img (sx, sy) at the position (x, y) of the canvas) the swidth width and sheight height of the position. The width and height must be scaled to the canvas.

The above is the usage of drawImage, which is very powerful.

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

contextVideo.drawImage(videoElem,0,0);

Then we can see that a picture is drawn in the canvas, but the video is constantly changing. Therefore, we need to use the setInterval function to continuously use video as the source for drawing.

setInterval(function(){<br>    contextVideo,drawImage(videoElem,0,0);<br>},100) 

The size of the time interval will affect whether the video will be played.

Here we will move the video to the canvas for demonstration. Next we will make it.

3. Create a canvas panel

Here we need to draw a canvas -- contextImg on the page, and then use the drawImage method again ,.

contextImg.drawImage(canvasVideo,0,0,canvasVideo.width,canvasVideo.height); 

This Code draws the first canvas to the second canvas.

4. Create button

Create a button, bind the click event, and then call the function in the previous step.

Right-click the graph and save it. Then, import the graph into the PS table.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.