基於canvas的視頻遮罩插件

做者：雲荒杯傾
做者博客

視頻遮罩介紹

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

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

前端實現視頻遮罩

有基於div和基於canvas兩種技術方案，本文是基於canvas完成的。

主要原理是在HTML的video標籤上貼上一個透明的canvas圖層，而後響應mousedown、mousemove、mouseup事件。

因爲canvas事件只是基於canvas元素自己，因此canvas內部每一個元素（一個矩形，一個圓等）的事件響應要利用座標來本身代碼完成。

因爲canvas每次重繪都要清屏，因此還要維護一個已畫遮罩的列表。

插件使用ES6 Class寫法完成。使用的時候，直接new Mask（param）便可。

插件GitHub地址

https://github.com/cunzaizhuyi/maskPlugin

演示地址

http://htmlpreview.github.io/？https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html

實現的功能點

• 畫遮罩（矩形）
• 給遮罩填充文本
• 設置遮罩樣式（提供API）
• 遮罩移動
• 遮罩縮放
• canvas上鼠標樣式變換

封裝的API

封裝了一些外部接口，供調用。

名稱	值類型	說明
一、矩形相關設置
fillStyle	顏色值	矩形填充色, 默認爲'#eeeeee'
strokeStyle	顏色值	矩形邊界線顏色, 默認爲'#0000ff'
inRectCursor	字符串	當鼠標處於某個小矩形內部時鼠標樣式，默認爲'move'。能夠設置爲'pointer'之類的。
二、矩形邊界上的八個小矩形 相關設置
bRectsStrokeStyle	顏色值	矩形邊界上的小矩形的顏色，默認爲'#0000ff'
bSideLength	number	矩形邊界上小矩形的邊長值，默認爲6
三、遮罩時間相關
masksTime		每一個遮罩的開始顯示時間和結束顯示時間，一個遮罩對應一個矩形

masksTime舉例：

[{
    maskId: 1,
    startTime: 0,
    endTime: 10,
}, {maskId: 2,
    startTime: 3,
    endTime: 13,
}]
複製代碼

應用效果圖

最後

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

關於這個小插件有任何疑問，歡迎你們交流。