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