画布和HTML5实现的视频截图示例
它已经研究了一段时间的画布，突然奇迹想做一个截图的视频，然后拉图片做一个表情袋，哈哈哈哈哈。制作方法：
1。在页面上加载视频
当使用画布制作这个屏幕截图时，首先必须确保视频已经加载到页面上，这样就可以很容易地操作：
在我的HTML5和视频中，提到浏览器预先加载进度和加载事件支持，这会影响视频播放和其他事件触发，因此我们使用JS构建视频来引入视频。
这种方式引入视频应该注意，不能引入多个源，因此有必要首先判断浏览器对视频格式的支持。
1.1使用canplaytype（）来判断支持的视频格式的方法
的canplaytype（）方法需要一个参数传递，这是视频的格式。
共同的价值：视频/ OGG；
视频/ MP4；
WebM视频/；
或编码器：
视频/ OGG；编解码器=Theora，Vorbis
视频/ MP4；编解码器=avc1.4d401e，MP4A。40.2
视频/ WebM；codesc =vp8.0，Vorbis
返回值：表示网页的支持级别：可能——最有可能支持（当输入值用编码器返回时），可能可能；（空字符串）不支持。
功能videotype（视频）{
var类型=；
如果（video.canplaytype（'video / MP4的）= = 'probably| | video.canplaytype（'video / MP4的）= =也许）{
类型= 'mp4；
} else if（video.canplaytype（'video / OGG的）= = 'probably| | video.canplaytype（'video / OGG的）= =可能''ogg}人）{类型=；如果（video.canplaytype（'video / WebM的）= = 'probably| | video.canplaytype（'video / WebM的）= =也许）{类型= 'webm}；返回类型；
}
这个函数可以确定浏览器支持视频的格式。
1.2用js动态加载视频标签
从浏览器的支持格式来看，由于我使用了Chrome浏览器，我的浏览器支持MP4格式的视频，然后我们动态创建一个视频标签。
无功videoelem；
无功videodiv；
功能createvideo（）{
videoelem = document.createelement（视频）； / /创建视频
videodiv = document.getelementbyid（videopanel ）； / /外容器的视频
videodiv.appendchild（videoelem）；
VaR的V型= videotype（videoelem）； / / mobiledevicemodel支持的格式
如果（V = =）{
videodiv.innerhtml（不支持视频）
其他{ }
videoelem.setattribute（'src、文本。+ V型）；
}
}
因为我们必须在这里创建截图。纯视频没有截图的界面，所以我们将它复制到画布上，并在画布上播放视频，所以我们首先隐藏视频（显示：无）。
2。使用画布复制视频
现在视频正在浏览器上播放。下一步我们将它复制到画布上，首先建立了画布，然后我们把画布上下文。如何在画布上绘制视频，这里我们要使用一个函数的DrawImage函数的用法。
1.drawimage（IMG，x，y）：在画布上的位置画一个img（x，y）。
2.drawimage（IMG，X，Y，宽度，高度）：画一个宽，在画布的位置高度（x，y）高img。
3.drawimage（IMG，SX，SY，swidth，sheight，X，Y，宽度，高度）：画在位置上的条宽度（X，画布的宽度）。
以上是绘制图像的使用，功能很强大。
在截图中，我们已经创建了画布-浏览器contextvideo，然后得出视频在这里：
contextvideo.drawimage（videoelem，0,0）；
然后我们可以看到，我们画在画布上的一张图片，但视频是不断变化的，所以我们需要使用setInterval函数把视频源。
setInterval（函数（）{ contextvideo，DrawImage（videoelem，0,0）；}，100）
的时间间隔是否会影响视频播放会卡的大小。 U3000 U3000
我们在这里展示视频到画布。然后做一个截图。
三.制作一个屏幕截图来显示画布面板
在这里，我们需要绘制一个canvas画布--网页上的contextimg，然后使用drawImage方法了，截图。
contextimg.drawimage（canvasvideo，0,0，canvasvideo.width，canvasvideo。高度）；
此代码将是第一个画布到第二个画布。
4。制作截图按钮
制作一个按钮，然后绑定点击事件，然后点击最后一步，然后你可以做一个截图。
当图形被切割时，可以保存正确的键，然后将ps注入表达式包中。
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。