canvas与html5实现视频截图功能示例

这段时间一向在研究canvas，突发奇想想做一个可以截屏视频的功能，然后把图片拉去做表情包，哈哈哈哈哈哈~~

制作方法：

1.在页面中加载视频

在使用canvas制作这个截图功能时，首先必须保证页面上已经加载完成了这个视频，如许才能够方便的对其操作。假如使用下面直接嵌入<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与视频》中讲到，欣赏器对视频的预加载progress以及load事件支持不同，会影响video的播放及其他事件的触发。所以我们在这里使用js构造video的体例来引入视频。

这种体例引入视频要细致，不能引入多个source，所以要先判断欣赏器对视频格式的支持。

1.1使用video的canPlayType()方法判断支持格式

canPlayType()方法必要传入一个参数，这个参数就是video的格式，

常用值：video/ogg;

　　　　video/mp4;