canvas與html5實(shí)現(xiàn)視頻截圖功能示例

這段時(shí)間一向在研究canvas，突發(fā)奇想想做一個(gè)可以截屏視頻的功能，然后把圖片拉去做表情包，哈哈哈哈哈哈~~

制作方法：

1.在頁面中加載視頻

在使用canvas制作這個(gè)截圖功能時(shí)，首先必須保證頁面上已經(jīng)加載完成了這個(gè)視頻，如許才能夠方便的對其操作。假如使用下面直接嵌入<video>標(biāo)簽的體例：

<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ù)加載progress以及l(fā)oad事件支持不同，會(huì)影響video的播放及其他事件的觸發(fā)。所以我們在這里使用js構(gòu)造video的體例來引入視頻。

這種體例引入視頻要細(xì)致，不能引入多個(gè)source，所以要先判斷欣賞器對視頻格式的支持。

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

canPlayType()方法必要傳入一個(gè)參數(shù)，這個(gè)參數(shù)就是video的格式，

常用值：video/ogg;

　　　　video/mp4;