詳解基于canvas的視頻遮罩插件
我要評論為一個視頻添加一個覆蓋物，從而擋住視頻某區(qū)域，在視頻的某一時間段，比如第10到第20分鐘不顯示劃定的這塊區(qū)域。應(yīng)用場景包括 遮擋衛(wèi)視圖標(biāo) 、 遮擋視頻右下角廣告 、 充當(dāng)馬賽克 等。
一個長視頻可能包含多個遮罩，每個遮罩有特定的顯示時間（在此時間外，隱藏該遮罩）。
前端實(shí)現(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
實(shí)現(xiàn)的功能點(diǎn)
- 畫遮罩（矩形）
- 設(shè)置遮罩樣式（提供API）
- 遮罩移動
- 遮罩縮放
- canvas上鼠標(biāo)樣式變換
封裝的API
| 名稱 | 值類型 | 說明 |
|---|---|---|
| 1、矩形相關(guān)設(shè)置 | ||
| fillStyle | 顏色值 | 矩形填充色, 默認(rèn)為'#eeeeee' |
| strokeStyle | 顏色值 | 矩形邊界線顏色, 默認(rèn)為'#0000ff' |
| inRectCursor | 字符串 | 當(dāng)鼠標(biāo)處于某個小矩形內(nèi)部時鼠標(biāo)樣式，默認(rèn)為'move'?？梢栽O(shè)置為'pointer'之類的。 |
| 2、矩形邊界上的八個小矩形 相關(guān)設(shè)置 | ||
| bRectsStrokeStyle | 顏色值 | 矩形邊界上的小矩形的顏色，默認(rèn)為'#0000ff' |
| bSideLength | number | 矩形邊界上小矩形的邊長值，默認(rèn)為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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了HTML5模擬齒輪動畫的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2019-09-24
這篇文章主要介紹了前端canvas動畫如何轉(zhuǎn)成mp4視頻的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一2019-06-17
這篇文章主要介紹了canvas像素點(diǎn)操作之視頻綠幕摳圖的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-11
video結(jié)合canvas實(shí)現(xiàn)視頻在線截圖功能
這篇文章主要介紹了video結(jié)合canvas實(shí)現(xiàn)視頻在線截圖功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-25
這篇文章主要介紹了canvas繪制視頻封面的方法的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-05canvas與html5實(shí)現(xiàn)視頻截圖功能示例
本篇文章主要介紹了canvas與html5實(shí)現(xiàn)視頻截圖功能示例，非常具有實(shí)用價值，需要的朋友可以參考下。2016-12-15Canvas獲取視頻第一幀縮略圖的實(shí)現(xiàn)
這篇文章主要介紹了Canvas獲取視頻第一幀縮略圖的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-11-11
