為一個視頻添加一個覆蓋物，從而擋住視頻某區(qū)域，在視頻的某一時間段，比如第10到第20分鐘不顯示劃定的這塊區(qū)域。應(yīng)用場景包括 遮擋衛(wèi)視圖標 、 遮擋視頻右下角廣告 、 充當馬賽克 等。
一個長視頻可能包含多個遮罩，每個遮罩有特定的顯示時間（在此時間外，隱藏該遮罩）。
前端實現(xiàn)視頻遮罩
有 基于div 和 基于canvas 兩種技術(shù)方案，本文是使用canvas完成的。
主要原理是在HTML的video標簽上貼上一個透明的canvas圖層，然后響應(yīng)mousedown、mousemove、mouseup事件。 由于canvas事件只是基于canvas元素，所以canvas內(nèi)部每個元素（一個矩形，一個圓等）的事件響應(yīng)要利用坐標來自己代碼完成。
插件GitHub地址
https://github.com/cunzaizhuyi/maskPlugin
演示地址
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
實現(xiàn)的功能點
- 畫遮罩（矩形）
- 設(shè)置遮罩樣式（提供API）
- 遮罩移動
- 遮罩縮放
- canvas上鼠標樣式變換
封裝的API
| 名稱 |
值類型 |
說明 |
| 1、矩形相關(guān)設(shè)置 |
|
|
| fillStyle |
顏色值 |
矩形填充色, 默認為'#eeeeee' |
| strokeStyle |
顏色值 |
矩形邊界線顏色, 默認為'#0000ff' |
| inRectCursor |
字符串 |
當鼠標處于某個小矩形內(nèi)部時鼠標樣式，默認為'move'?？梢栽O(shè)置為'pointer'之類的。 |
| 2、矩形邊界上的八個小矩形 相關(guān)設(shè)置 |
|
|
| bRectsStrokeStyle |
顏色值 |
矩形邊界上的小矩形的顏色，默認為'#0000ff' |
| bSideLength |
number |
矩形邊界上小矩形的邊長值，默認為6 |
| 3、遮罩時間相關(guān) |
|
|
| masksTime |
|
每個遮罩的開始顯示時間和結(jié)束顯示時間，一個遮罩對應(yīng)一個矩形 |
masksTime舉例：
[{
maskId: 1,
startTime: 0,
endTime: 10,
}, {maskId: 2,
startTime: 3,
endTime: 13,
}]
最后
這個基于原生canvas的700多行的小插件，對于探索canvas的世界可能僅僅是一個開始。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
