詳解基于canvas的視頻遮罩插件

發(fā)布時間：2018-01-04 14:48:43 作者：cunzaizhuyi

這篇文章主要介紹了詳解基于canvas的視頻遮罩插件，詳細介紹了如何為一個視頻添加一個覆蓋物，非常具有實用價值，需要的朋友可以參考下

為一個視頻添加一個覆蓋物，從而擋住視頻某區(qū)域，在視頻的某一時間段，比如第10到第20分鐘不顯示劃定的這塊區(qū)域。應用場景包括遮擋衛(wèi)視圖標、遮擋視頻右下角廣告、充當馬賽克等。

一個長視頻可能包含多個遮罩，每個遮罩有特定的顯示時間（在此時間外，隱藏該遮罩）。

前端實現(xiàn)視頻遮罩

有基于div 和基于canvas 兩種技術(shù)方案，本文是使用canvas完成的。

主要原理是在HTML的video標簽上貼上一個透明的canvas圖層，然后響應mousedown、mousemove、mouseup事件。由于canvas事件只是基于canvas元素，所以canvas內(nèi)部每個元素（一個矩形，一個圓等）的事件響應要利用坐標來自己代碼完成。

插件GitHub地址

https://github.com/cunzaizhuyi/maskPlugin

實現(xiàn)的功能點

封裝的API

名稱	值類型	說明
1、矩形相關(guān)設置
fillStyle	顏色值	矩形填充色, 默認為'#eeeeee'
strokeStyle	顏色值	矩形邊界線顏色, 默認為'#0000ff'
inRectCursor	字符串	當鼠標處于某個小矩形內(nèi)部時鼠標樣式，默認為'move'?？梢栽O置為'pointer'之類的。
2、矩形邊界上的八個小矩形相關(guān)設置
bRectsStrokeStyle	顏色值	矩形邊界上的小矩形的顏色，默認為'#0000ff'
bSideLength	number	矩形邊界上小矩形的邊長值，默認為6
3、遮罩時間相關(guān)
masksTime		每個遮罩的開始顯示時間和結(jié)束顯示時間，一個遮罩對應一個矩形

masksTime舉例：

[{
    maskId: 1,
    startTime: 0,
    endTime: 10,
}, {maskId: 2,
    startTime: 3,
    endTime: 13,
}]

最后

這個基于原生canvas的700多行的小插件，對于探索canvas的世界可能僅僅是一個開始。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片