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

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

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

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

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

插件GitHub地址

https://github.com/cunzaizhuyi/maskPlugin

演示地址
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html

實現(xiàn)的功能點(diǎn)

1. 畫遮罩（矩形）
2. 設(shè)置遮罩樣式（提供API）
3. 遮罩移動
4. 遮罩縮放
5. canvas上鼠標(biāo)樣式變換

封裝的API

masksTime舉例：

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

最后

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。