為一個視頻添加一個覆蓋物,從而擋住視頻某地區,在視頻的某一時間段,比如第10到第20分鐘不顯示劃定的這塊地區。應用情境包括 遮擋衛視表徵圖 、 遮擋視頻右下角廣告 、 充當馬賽克等。本文主要介紹了詳解基於canvas的視頻遮罩外掛程式,詳細介紹了如何為一個視頻添加一個覆蓋物,非常具有實用價值,需要的朋友可以參考下,希望能協助到大家。
一個長視頻可能包含多個遮罩,每個遮罩有特定的顯示時間(在此時間外,隱藏該遮罩)。
前端實現視頻遮罩
有 基於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
實現的功能點
畫遮罩(矩形)
設定遮罩樣式(提供API)
遮罩移動
遮罩縮放
canvas上滑鼠樣式變換
封裝的API
名稱 |
實值型別 |
說明 |
1、矩形相關設定 |
|
|
fillStyle |
顏色值 |
矩形填充色, 預設為'#eeeeee' |
strokeStyle |
顏色值 |
矩形邊界線顏色, 預設為'#0000ff' |
inRectCursor |
字串 |
當滑鼠處於某個小矩形內部時滑鼠樣式,預設為'move'。可以設定為'pointer'之類的。 |
2、矩形邊界上的八個小矩形 相關設定 |
|
|
bRectsStrokeStyle |
顏色值 |
矩形邊界上的小矩形的顏色,預設為'#0000ff' |
bSideLength |
number |
矩形邊界上小矩形的邊長值,預設為6 |
3、遮罩時間相關 |
|
|
masksTime |
|
每個遮罩的開始顯示時間和結束顯示時間,一個遮罩對應一個矩形 |
masksTime舉例:
[{ maskId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}]
最後
這個基於原生canvas的700多行的小外掛程式,對於探索canvas的世界可能僅僅是一個開始。