canvas的視頻遮罩外掛程式執行個體分享

來源:互聯網
上載者:User
為一個視頻添加一個覆蓋物,從而擋住視頻某地區,在視頻的某一時間段,比如第10到第20分鐘不顯示劃定的這塊地區。應用情境包括 遮擋衛視表徵圖 、 遮擋視頻右下角廣告 、 充當馬賽克等。本文主要介紹了詳解基於canvas的視頻遮罩外掛程式,詳細介紹了如何為一個視頻添加一個覆蓋物,非常具有實用價值,需要的朋友可以參考下,希望能協助到大家。

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

前端實現視頻遮罩

有 基於p 和 基於canvas 兩種技術方案,本文是使用canvas完成的。

主要原理是在HTML的video標籤上貼上一個透明的canvas圖層,然後響應mousedown、mousemove、mouseup事件。 由於canvas事件只是基於canvas元素,所以canvas內部每個元素(一個矩形,一個圓等)的事件響應要利用座標來自己程式碼完成。

外掛程式GitHub地址

https://github.com/cunzaizhuyi/maskPlugin

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

實現的功能點

  1. 畫遮罩(矩形)

  2. 設定遮罩樣式(提供API)

  3. 遮罩移動

  4. 遮罩縮放

  5. canvas上滑鼠樣式變換

封裝的API

名稱 實值型別 說明
1、矩形相關設定
fillStyle 顏色值 矩形填充色, 預設為'#eeeeee'
strokeStyle 顏色值 矩形邊界線顏色, 預設為'#0000ff'
inRectCursor 字串 當滑鼠處於某個小矩形內部時滑鼠樣式,預設為'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的世界可能僅僅是一個開始。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.