資訊專欄INFORMATION COLUMN
摘要：一個長視頻可能包含多個遮罩，每個遮罩有特定的顯示時間在此時間外，隱藏該遮罩。前端實現(xiàn)視頻遮罩有基于和基于兩種技術方案，本文是使用完成的。由于事件只是基于元素，所以內(nèi)部每個元素一個矩形，一個圓等的事件響應要利用坐標來自己代碼完成。
作者：云荒杯傾
作者博客
為一個視頻添加一個覆蓋物，從而擋住視頻某區(qū)域，在視頻的某一時間段，比如第10到第20分鐘不顯示劃定的這塊區(qū)域。應用場景包括遮擋衛(wèi)視圖標、遮擋視頻右下角廣告、充當馬賽克等。
一個長視頻可能包含多個遮罩，每個遮罩有特定的顯示時間（在此時間外，隱藏該遮罩）。
前端實現(xiàn)視頻遮罩有基于div和基于canvas兩種技術方案，本文是使用canvas完成的。
主要原理是在HTML的video標簽上貼上一個透明的canvas圖層，然后響應mousedown、mousemove、mouseup事件。
由于canvas事件只是基于canvas元素，所以canvas內(nèi)部每個元素（一個矩形，一個圓等）的事件響應要利用坐標來自己代碼完成。
https://github.com/cunzaizhuy...
演示地址http://htmlpreview.github.io/？https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
實現(xiàn)的功能點畫遮罩（矩形）
設置遮罩樣式（提供API）
遮罩移動
遮罩縮放
canvas上鼠標樣式變換
封裝的API| 名稱 | 值類型 | 說明 |
|---|---|---|
| 1、矩形相關設置 | ||
| fillStyle | 顏色值 | 矩形填充色, 默認為"#eeeeee" |
| strokeStyle | 顏色值 | 矩形邊界線顏色, 默認為"#0000ff" |
| inRectCursor | 字符串 | 當鼠標處于某個小矩形內(nèi)部時鼠標樣式，默認為"move"。可以設置為"pointer"之類的。 |
| 2、矩形邊界上的八個小矩形 相關設置 | ||
| bRectsStrokeStyle | 顏色值 | 矩形邊界上的小矩形的顏色，默認為"#0000ff" |
| bSideLength | number | 矩形邊界上小矩形的邊長值，默認為6 |
| 3、遮罩時間相關 | ||
| masksTime | 每個遮罩的開始顯示時間和結束顯示時間，一個遮罩對應一個矩形 | |
masksTime舉例：
[{
maskId: 1,
startTime: 0,
endTime: 10,
}, {maskId: 2,
startTime: 3,
endTime: 13,
}]
應用效果圖
最后
這個基于原生canvas的700多行的小插件，對于探索canvas的世界可能僅僅是一個開始。
關于這個小插件有任何疑問，歡迎大家交流。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/90617.html
摘要：谷歌是通過來實現(xiàn)這個組件的，比較復雜谷歌的工具加載文件和截圖文件有興趣的同學可以看一下。高亮區(qū)域核心部分截圖搞定了，接下來就是高亮區(qū)域了。 幾乎所有的APP應用包括Web應用都需要一個意見反饋，這樣才能了解用戶對產(chǎn)品的意見和建議，以便于不斷提升完善自己的產(chǎn)品。目前的反饋組件一般有兩種，一種是打開一個反饋頁面填寫表單，另一種則是通過彈窗來完成，相比較而言第二種更加方便，而且更加容易組件化...
摘要：主要實現(xiàn)功能在畫布上跟隨鼠標的按鍵移動畫出拖拉范圍內(nèi)的矩形彈出選擇項，選對勾則將這部分矩形填上背景色，選叉號則取消本次拖拉的矩形。附業(yè)務目的視頻遮罩是一種將視頻某部分區(qū)域遮蓋的效果，可用于遮蓋電視臺圖標，廣告，鏡頭內(nèi)敏感部分等。 作者：云荒杯傾 序 本意是用這個做視頻遮罩效果，但是還是從更通用的角度來解釋事情本身吧。少摻雜一點業(yè)務目的。 主要實現(xiàn)功能 在canvas畫布上跟隨鼠標的按鍵...
摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...
閱讀 1427·2021-10-14 09:43
閱讀 1019·2021-09-10 10:51
閱讀 1479·2021-09-01 10:42
閱讀 2226·2019-08-30 15:55
閱讀 610·2019-08-30 15:55
閱讀 2374·2019-08-30 14:21
閱讀 1749·2019-08-30 13:04
閱讀 3502·2019-08-29 13:09
