Canvas video mask plug-in example sharing

Add an overlay to a video to block a certain area of ​​the video. During a certain time period of the video, such as the 10th to 20th minutes, the delimited area will not be displayed. Application scenarios include blocking satellite TV icons, blocking advertisements in the lower right corner of videos, acting as mosaics, etc. This article mainly introduces the video mask plug-in based on canvas in detail, and introduces in detail how to add a cover to a video. It is of great practical value. Friends who need it can refer to it. I hope it can help everyone.

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

Front-end implementation of video masking

There are two technical solutions based on p and based on canvas. This article is completed using canvas.

The main principle is to attach a transparent canvas layer to the HTML video tag, and then respond to mousedown, mousemove, and mouseup events. Since the canvas event is only based on the canvas element, the event response of each element inside the canvas (a rectangle, a circle, etc.) must be completed by your own 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

Function points implemented

1. Draw mask (rectangle)

2. Set mask style (provide API)

3. Mask movement

4. Mask scaling

5. Mouse style transformation on canvas

Encapsulated API

Name	Value type	Description
1. Rectangle related Set
fillStyle	Color value	Rectangle fill color, default is '#eeeeee'
strokeStyle	Color value	Rectangle border line color, default is '#0000ff'
inRectCursor	String	Mouse style when the mouse is inside a small rectangle, the default is 'move'. Can be set to 'pointer' or something like that.
2. Related settings for eight small rectangles on the rectangular boundary
bRectsStrokeStyle	Color value	The color of the small rectangle on the rectangular boundary, the default is '#0000ff'
bSideLength	number	The side length value of the small rectangle on the rectangular boundary, the default is 6
3. Masking time related
masksTime		The start display time and end display time of each mask, one mask corresponds to a rectangle

masksTime example:

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

Finally

This is 700 based on native canvas A small multi-line plug-in may be just the beginning for exploring the world of canvas.

Related recommendations:

jQuery implementation of IE6-compatible masking function example sharing

How to prevent the page from scrolling after the mask layer Example

JS code example to implement the mask effect when the mouse is placed on the picture

The above is the detailed content of Canvas video mask plug-in example sharing. For more information, please follow other related articles on the PHP Chinese website!