Author: Cloud shortage cup pour author blog

Video mask introduction

Add a cover to a video to block a certain area of the video so that the defined area is not displayed during a certain time period of the video, such as minutes 10 to 20. Application scenarios include blocking satellite TV ICONS, blocking advertisements at the lower right corner of videos, and acting as mosaics.

A long video may contain multiple masks, each of which has a specific display time (outside this time interval, the mask is hidden).

The front end implements the video mask

There are two technical solutions based on DIV and Canvas. This paper is completed based on canvas.

The main principle is to paste a transparent canvas layer on the HTML video tag, and then respond to mousedown, Mousemove, mouseup events.

Since the Canvas event is only based on the Canvas element itself, the event response of each element inside the canvas (a rectangle, a circle, etc.) should be completed by its own code using coordinates.

Since the canvas cleans the screen every time it is repainted, it also maintains a list of painted masks.

The plugin is written using ES6 Class notation. To use it, just use new Mask (param).

Plugin GitHub address

https://github.com/cunzaizhuyi/maskPlugin

Demo address

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

Function points implemented

  • Painting mask (rectangle)
  • Fill the mask with text
  • Set mask Styles (provide APIS)
  • Mask mobile
  • Mask the zoom
  • Canvas mouse style transform

Encapsulation of the API

Encapsulates some external interfaces for invocation.

The name of the Value types instructions
1. Rectangle related Settings
fillStyle Color value Rectangle fill color, default is ‘#eeeeee’
strokeStyle Color value Rectangle border color, default is ‘# 0000FF ‘
inRectCursor string Mouse style when the mouse is inside a small rectangle. Default is ‘move’. It can be set to ‘pointer’ or something like that.
2. Set the eight small rectangles on the rectangle boundary
bRectsStrokeStyle Color value Color of small rectangle on rectangle boundary, default is ‘#0000ff’
bSideLength number The side length of a small rectangle on a rectangular boundary. Default is 6
3. Mask time is related
masksTime Each mask displays the start time and the end time, and each mask corresponds to a rectangle

MasksTime example:

[{
    maskId: 1,
    startTime: 0,
    endTime: 10,
}, {maskId: 2,
    startTime: 3,
    endTime: 13,
}]
Copy the code

Apply renderings

The last

This 700-plus-line plugin, based on the native Canvas, is probably just the beginning of exploring the canvas world.

If you have any questions about this widget, please contact us.