如何发布网络小说,完美世界有声小说

主頁(yè) > 知識(shí)庫(kù) > 詳解基于canvas的視頻遮罩插件

詳解基于canvas的視頻遮罩插件

為一個(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)來自己代碼完成。

插件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

名稱	值類型	說明
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í)有所幫助，也希望大家多多支持腳本之家。

標(biāo)簽：咸寧西寧淮安南京佳木斯酒泉廣西十堰

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《詳解基于canvas的視頻遮罩插件》，本文關(guān)鍵詞詳解,基于,canvas,的,視頻,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

濮阳杆衣贸易有限公司

詳解基于canvas的視頻遮罩插件