Canvas video Mask plug-in instance sharing

Add a overlay to a video to block the video in a certain period of time, such as the 10th to 20 minutes does not show the delineated area. Application scenarios include masking the satellite TV icon, masking video ads in the lower right corner, and acting as a mosaic. This article mainly introduces the detailed canvas-based video mask plug-in, details how to add a covering for a video, very practical value, the need for friends can refer to, hope to help everyone.

A long video may contain multiple masks, and each mask has a specific display time (hiding the matte outside of this time).

Front End Implementation video Matte

There are two technical solutions based on p and canvas, this article is done using canvas.

The main principle is to attach a transparent canvas layer to the video tag of the HTML and then respond to MouseDown, MouseMove, MouseUp events. Because the canvas event is based only on the canvas element, the event response of each element within the canvas (a rectangle, a circle, and so on) is done using coordinates for its own code.

Plugin GitHub Address

Https://github.com/cunzaizhuyi/maskPlugin

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

Functional points of implementation

1. Draw Matte (Rectangle)

2. Set mask style (provide API)

3. Mask move

4. Mask Scaling

5. Mouse style transformations on canvas

Encapsulated API

name	value type	Description
1, Rectangle Related Settings
FillStyle	Color values	Rectangle fill Color, default to ' #eeeeee '
Strokestyle	Color values	Rectangle boundary Color, default to ' #0000ff '
Inrectcursor	String	When the mouse is inside a small rectangle, the mouse style defaults to ' move '. can be set to ' pointer ' and the like.
2. Eight small rectangle related settings on rectangle boundary
Brectsstrokestyle	Color values	The color of the small rectangle on the rectangle boundary, which defaults to ' #0000ff '
Bsidelength	Number	The edge length value of the small rectangle on the rectangle boundary, which defaults to 6
3. Masking Time Related
Maskstime		The start of each mask shows the time and the end display time, and a mask corresponds to a rectangle

Maskstime Example:

[{    maskid:1,    starttime:0,    endtime:10,}, {maskid:2,    starttime:3,    endtime:13,}]

At last

This small plug-in of more than 700 lines based on native canvas may be just the beginning for exploring the world of canvas.