Example of implementing video screenshot function using canvas and html5

I have been studying canvas during this period, and I suddenly thought of making a function that can take screenshots of videos, and then pull the pictures to make emoticons, hahahahahaha~~
Production method:
1 .Load the video on the page
When using canvas to create this screenshot function, you must first ensure that the video has been loaded on the page, so that you can operate it conveniently. If you use the following method of directly embedding the

<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>

As mentioned in my article "html5 and video", browsers support different preloading progress and load events for videos. , which will affect the playback of video and the triggering of other events. So here we use js to construct video to introduce video.
Be careful when introducing videos in this way. Multiple sources cannot be introduced, so you must first determine the browser's support for video formats.
1.1 Use the canPlayType() method of video to determine the supported format
The canPlayType() method needs to pass in a parameter, which is the format of the video.
Common values:

video/ogg;
　　　　video/mp4;
　　　　video/webm;

Or include the encoder:

　　　　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 web page: "probably" - most likely to support (only this is returned when the input value has an encoder); "maybe " - may be supported; "" - (empty 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(&#39;video/ogg&#39;)==&#39;probably&#39;||video.canPlayType(&#39;video/ogg&#39;)==&#39;maybe&#39;){<br> 　　　　
    returnType= &#39;ogg&#39;; 　　 
    <br>　　 
    }else if(video.canPlayType(&#39;video/webm&#39;)==&#39;probably&#39;||video.canPlayType(&#39;video/webm&#39;)==&#39;maybe&#39;){<br> 　　　　
    returnType= &#39;webm&#39;; 　　 <br>　　 }<br>　　 return returnType; 

}

This function can determine the format supported by the browser for video.
1.2 Use js to dynamically load video tags
After determining the supported formats of the browser, since I am using chrome, my browser supports videos in mp4 format, and then we dynamically Create a video tag.

var videoElem;

var videop;

function createVideo(){

     videoElem=document.createElement("video");//创建video

     videop=document.getElementById("videopanel");//获取video的外层容器

     videop.appendChild(videoElem);

     var vtype=videoType(videoElem);//判断浏览器支持的格式

     if(vtype==""){

        videop.innerHtml('不支持video')

    }else{

        videoElem.setAttribute('src',"text."+vtype);
    }
}

Since we want to create a screenshot function here, a simple video does not have a screenshot interface, so we need to copy it to canvas and play the video on canvas, so here we first The video is hidden (display:none).
2. Use canvas to copy the video
Now the video has been played on the browser, next we copy it to the canvas, first create the canvas, and then get the canvas context, these are not said. How to draw video on canvas, here we need to use a function. Usage of 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 width and height at the position (x, y) of the canvas;

3.drawImage(img,sx,sy,swidth,sheight,x,y, width, height): Draw a screenshot of the width and height of the img at the (sx, sy) position of the canvas at the (x, y) position. The image must be scaled to the width and height when drawn on the canvas.

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

Back to taking screenshots, we have now created a canvas on the browser - contextVideo, and then we draw the video here:

contextVideo.drawImage(videoElem,0,0);

Then we can see A picture is drawn in the canvas, but the video is constantly changing, so we need to use the setInterval function to continuously draw the picture using the video 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 freeze.

At this point we have moved the video to canvas for display. Next make a screenshot.

3. Make a screenshot to display the canvas panel

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

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

This code draws the first canvas onto the second canvas.
4. Make a screenshot button
Create a button, and then bind the click event. After clicking, the function in the previous step will be called, so that you can make a screenshot.
After the picture is cut out, you can right-click the picture to save it, and then import it into PS to create an emoticon package.

The above is the content of the example of video screenshot function implemented by canvas and html5. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!