canvas的視訊遮罩插件實例分享

為一個影片添加一個覆蓋物，從而阻擋影片某個區域，在影片的某一時間段，例如第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

實現的功能點

1. #畫遮罩（矩形）

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

3. 遮罩移動

4. #遮罩縮放

5. canvas上滑鼠樣式變換

封裝的API

當滑鼠處於某個小矩形內部時滑鼠樣式，預設為'move'。可以設定為'pointer'之類的。  ##bRectsStrokeStyle顏色值矩形邊界上的小矩形的顏色，預設為'#0000ff'bSideLength#number矩形邊界上小矩形的邊長值，預設為63、遮罩時間相關性 # masksTime 每個遮罩的開始顯示時間和結束顯示時間，一個遮罩對應一個矩形

名稱	值類型	說明
#1、矩形相關設定
fillStyle	顏色值	#矩形填滿色, 預設為'#eeeeee'
strokeStyle	顏色值	#矩形邊界線顏色, 預設為'#0000ff'
	## inRectCursor	字串
	2、矩形邊界上的八個小矩形相關設定

masksTime範例：

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

最後

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

相關推薦：

jQuery實作可相容IE6的遮罩功能實例分享

如何阻止遮罩層後頁面捲動的實例

JS實作滑鼠放到圖片上產生遮罩效果的程式碼案例

以上是canvas的視訊遮罩插件實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！