How to implement video screenshot function with canvas and h5

This time I will show you how to implement the video screenshot function with canvas and h5. What are the precautions for canvas and h5 to implement the video screenshot function. The following is a practical case. Let’s take a look. take a look.

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 it can be operated 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>

I mentioned in my article "html5 and video" that browsers have different support for video preloading progress and load events, which will affect Video playback and 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 video’s 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"

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" - possibly supported; "" - ( EmptyString) 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 format supported by the browser for video.

1.2 Use js to dynamically load video tags

After judging the supported formats of the browser, since I am using chrome, I The browser supports video 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 hide the video first Drop (display:none).

2. Use canvas to copy the video

Now that the video has been played on the browser, let’s copy it to canvas. First create the canvas, and then get the canvas context, which I won’t go into. 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 it in the canvas A picture is drawn, but the video is constantly changing, so we need to use the setInterval function to continuously use the video as the source to draw the picture.

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 drawImage again Method, screenshot.

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

这段代码将第一个canvas画到了第二个canvas上。

4.制作截图按钮

制作一个按钮，然后绑定click事件，点击后就调用上一步的函数，这样就可以制作一个截图了。

当图截好后可以将图右键保存下来，然后倒入ps制作表情包了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

分页查询的使用详解

JS的日期相关函数使用详解

The above is the detailed content of How to implement video screenshot function with canvas and h5. For more information, please follow other related articles on the PHP Chinese website!