主頁 > 知識庫 > 詳解基于canvas的視頻遮罩插件

詳解基于canvas的視頻遮罩插件
熱門標簽：黃島區(qū)地圖標注 鎮(zhèn)江智能外呼系統(tǒng)有效果嗎 云南大理400電話申請官方 江蘇智能電銷機器人哪家好 電銷機器人電話用什么卡 南寧點撥外呼系統(tǒng)哪家公司做的好 成都智能外呼系統(tǒng)平臺 四川點撥外呼系統(tǒng) 當涂高德地圖標注

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

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

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

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

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

插件GitHub地址

https://github.com/cunzaizhuyi/maskPlugin

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

實現(xiàn)的功能點

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

封裝的API

名稱 值類型 說明
1、矩形相關(guān)設(shè)置    
fillStyle 顏色值 矩形填充色, 默認為'#eeeeee'
strokeStyle 顏色值 矩形邊界線顏色, 默認為'#0000ff'
inRectCursor 字符串 當鼠標處于某個小矩形內(nèi)部時鼠標樣式，默認為'move'。可以設(shè)置為'pointer'之類的。
2、矩形邊界上的八個小矩形 相關(guān)設(shè)置    
bRectsStrokeStyle 顏色值 矩形邊界上的小矩形的顏色，默認為'#0000ff'
bSideLength number 矩形邊界上小矩形的邊長值，默認為6
3、遮罩時間相關(guān)    
masksTime   每個遮罩的開始顯示時間和結(jié)束顯示時間，一個遮罩對應(yīng)一個矩形

masksTime舉例：

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

最后

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

標簽：咸寧 西寧 淮安 南京 佳木斯 酒泉 廣西 十堰

巨人網(wǎng)絡(luò)通訊聲明：本文標題《詳解基于canvas的視頻遮罩插件》，本文關(guān)鍵詞  詳解,基于,canvas,的,視頻,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《詳解基于canvas的視頻遮罩插件》相關(guān)的同類信息！
  • 本頁收集關(guān)于詳解基于canvas的視頻遮罩插件的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章