Canvas and HTML5 for video screenshot function

This period of time has been studying canvas, whim want to do a screenshot of the function of the video, and then pull the picture to do the expression pack, haha haha ~ ~

Production method:

1. Loading the video in the page

When using canvas to make this feature, you must first ensure that the page has been loaded to complete the video so that it can be easily manipulated. If you use the following method of embedding <video> tags directly:

12345

<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 "HTML5 and video", the browser has different support for pre-loading progress and load events, which can affect video playback and triggering of other events. So we're using JS to construct video in this way.

The introduction of video in this way is important to note that it is not possible to introduce multiple source, so it is important to determine the browser's support for video formats.

1.1 Using Video's Canplaytype () method to determine the supported format

The Canplaytype () method needs to pass in an argument, which is the format of the video,

Common values: 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 level of support for the Web page: "Probably"-most likely supported (only this is returned when the input value is with the encoder); Maybe "-May support;" "-(empty string) not supported;

12345

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;

1

}

This function can determine the format that the browser supports for video.

1.2 Dynamically loading video tags with JS

After judging the browser's support format, since I'm using chrome, my browser supports MP4 format video, and then we dynamically create a visual tag.

1234567891011121314

var videoElem;var videoDiv;function createVideo(){     videoElem=document.createElement("video");//创建video     videoDiv=document.getElementById("videopanel");//获取video的外层容器     videoDiv.appendChild(videoElem);     var vtype=videoType(videoElem);//判断浏览器支持的格式     if(vtype==""){        videoDiv.innerHtml(‘不支持video‘)    }else{        videoElem.setAttribute(‘src‘,"text."+vtype);    }}

Because here we want to make the function, the simple video does not have the interface, so we want to copy it to the canvas, broadcast this video on the canvas, so here we first hidden video (Display:none).

2. Copy video using Canvas

Now that video is playing on the browser, we'll copy it to the canvas, start by creating a canvas, and then get the canvas context, and that's not the thing. How to draw the video on canvas, here we use a function. the use of the DrawImage function

1.drawImage (Img,x,y): Draws an img at the (x, Y) position of the canvas;

2.drawImage (Img,x,y,width,height): In the canvas (x, y) This position to draw a width width, height high img;

3.drawImage (Img,sx,sy,swidth,sheight,x,y,width,height): In the canvas (x, Y) position to draw an IMG (sx,sy) Position swidth wide, sheight high piece, Draw on the canvas to zoom to width width and height height.

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

Back to doing, we have now created the canvas--contextvideo on the browser, and then we'll draw the video here:

Contextvideo.drawimage (videoelem,0,0);

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

1	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 stuck.

Here we will move video to the canvas to show. Next production.

3. Making Display canvas panel

Here we need to draw a canvas canvas--contextimg on the page and then use the DrawImage method again.

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

This code draws the first canvas onto the second canvas.

4. Make button

Make a button, then bind the click event, click on the function to call the previous step, so you can make one.

When the picture is cut, you can save the right mouse button, and then pour the PS to make the expression pack.

5.demo and some expression packs.

Video: Demo, (turn the volume on before you open it, click on the button)

Emoticons Pack:

Canvas and HTML5 for video functions