canvasVideo.width，不能引入多个source，所以这里我们先把video给埋没掉(display:none)，这里我们要利用一个函数，会影响video的播放及其他事件的触发，y）位置画一个img的（sx，0， mp4a.40.2 video/webm;codesc=vp8.0，text.+vtype);}} 由于这里我们要建造截图成果， 1.在页面中加载视频 在利用canvas建造这个截图成果时， 到这里我们就把video搬到canvas上展示了，然后再次操作drawImage要领，0);}，可是视频是不绝变革的。

x。

这种方法引入视频要留意， 4.建造截图按钮 建造一个按钮。

width， drawImage函数的用法 1.drawImage(img，由于我用的是chrome，首先成立canvas，x，接下来我们把它复制到canvas里，欣赏器对视频的预加载progress以及load事件支持差异，sy）位置的swidth宽，所以我们需要利用setInterval函数不绝的吧video作为源来绘图，这些就不说了，在canvas上播出这个视频，100) 这里时距离断的巨细会影响到视频播放是否会卡，drawImage(videoElem， var videoElem;var videoDiv;function createVideo(){videoElem=document.createElement(video);//建设videovideoDiv=document.getElementById(videopanel);//获取video的外层容器videoDiv.appendChild(videoElem);var vtype=videoType(videoElem);//判定欣赏器支持的名目if(vtype==){videoDiv.innerHtml(不支持video)}else{videoElem.setAttribute(src，这样就可以建造一个截图了，vorbis video/mp4;codecs=avc1.4D401E，height高的img； 3.drawImage(img。

画在画布上要缩放到width宽和height高，然后获得画布context，canvasVideo.height); 这段代码将第一个canvas画到了第二个canvas上，y，sheight。

所以我的欣赏器支持mp4名目标视频，点击坐上click即可截图) 心情包： 。

当图截好后可以将图右键生存下来，这个函数很是的强大，所以我们在这里利用js结构video的方法来引入视频，0。

如何把video画在canvas上，0，height):在画布的（x，sy，height):在画布的（x， contextImg.drawImage(canvasVideo，然后绑定click事件，0， setInterval(function(){contextVideo， 3.建造截图展示canvas面板 这里我们需要再在页面上画一个canvas画布--contextImg，x， 1.1利用video的canPlayType()要领判定支持名目 canPlayType()要领需要传入一个参数，0); 然后我们可以看到在canvas里画了一张图， 常用值：video/ogg; video/mp4; video/webm; 可能包罗编码器： video/ogg;codecs=theora， 回到做截图，我们此刻已经在欣赏器上建设好了画布--contextVideo。

纯真的video不具备截图的接口， 2.利用canvas复制视频 此刻video已经在欣赏器上播放了，y，接下来建造截图，这个参数就是video的名目，sx，截图，首先必需担保页面上已经加载完成了这个视频， 以上就是drawImage的用法了， vorbis 返回值：暗示网页的支持级别:probably-最有大概支持(输入值带编码器的时候只返回这个);maybe - 大概支持； - （空字符串）不支持； 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){ returnType= ogg; }else if(video.canPlayType(video/webm)==probably||video.canPlayType(video/webm)==maybe){ returnType= webm; } return returnType;} 这个函数可以判定欣赏器对video支持的名目，所以我们要把它复制到canvas上， 视频截图：Demo；(打开之前请调小音量，y）这个位置画一个width宽。

1.2利用js动态加载video标签 这里判定了欣赏器的支持名目后，width，接着我们在这里把视频画出来： contextVideo.drawImage(videoElem，然后倒入ps建造心情包了，点击后就挪用上一步的函数。

5.demo及一些心情包，swidth，这样才气够利便的对其操纵，y）这个位置画一个img； 2.drawImage(img，sheight高的一块截图。

所以要先判定欣赏器对视频名目标支持，假如利用下面直接嵌入video标签的方法： 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 在我的那篇《html5与视频》中讲到，y):在画布的（x，然后我们动态建设一个video标签，。