Detailed description of the canvas-based video mask plug-in, detailed description of the canvas mask

Detailed description of the canvas-based video mask plug-in, detailed description of the canvas mask

Adds a cover for a video to block a video area. During a certain video period, for example, the area between 10th and 20th minutes is not displayed. Application scenarios include hiding TV icons, blocking advertisements in the lower right corner of the video, and acting as mosaic.

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

Front-end video masks

There are two technical solutions based on div and canvas. This article uses canvas.

The main principle is to paste a transparent canvas layer on the HTML video tag and then respond to the mousedown, mousemove, and mouseup events. Because the canvas event is only based on the canvas element, the event response of each element inside the canvas (a rectangle, a circle, and so on) must be completed by the code using coordinates.

Plug-in GitHub address

Https://github.com/cunzaizhuyi/maskPlugin

Demo address
Http://htmlpreview.github.io /? Https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html

Implemented Functions

1. Painting mask (rectangle)
2. Set the mask style (API provided)
3. Mask Movement
4. Mask Scaling
5. Canvas mouse style Conversion

Encapsulated API

Name	Value Type	Description
1. rectangular settings
FillStyle	Color value	Fill color of the rectangle. The default value is '# eeeeeeee'
StrokeStyle	Color value	The color of the rectangle border. The default value is '# 0000ff'
InRectCursor	String	When the mouse is inside a small rectangle, the mouse style is 'move 'by default '. It can be set to 'pointer 'or the like.
2. Eight small rectangles on the rectangle Boundary
BRectsStrokeStyle	Color value	The color of the small rectangle on the rectangle boundary. The default value is '# 0000ff'
BSideLength	Number	The length of the side of a small rectangle on the boundary of a rectangle. The default value is 6.
3. Mask time
MasksTime		The Start Time and end time of each mask. A mask corresponds to a rectangle.

Example of masksTime:

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

Last

This native canvas-based 700-plus-line small plug-in may be just the beginning to explore the world of canvas.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.