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

前端實現視頻遮罩

有 基于p 和 基于canvas 兩種技術方案，本文是使用canvas完成的。

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

插件GitHub地址

https://github.com/cunzaizhuyi/maskPlugin

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

實現的功能點

1. 畫遮罩（矩形）

2. 設置遮罩樣式（提供API）

3. 遮罩移動

4. 遮罩縮放

5. canvas上鼠標樣式變換

封裝的API

masksTime舉例：

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

最后

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com