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.
A long video may contain multiple masks, each mask having a specific display time (outside of which time the mask is hidden).
Front-end implementation of video maskingThere are two technical solutions based on div 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 addresshttps://github.com/cunzaizhuyi/maskPlugin
Demo address
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
Function points implemented| name | value type | illustrate |
|---|---|---|
| 1. Rectangle related settings | ||
| 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 border, 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 |
[{ maskId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}] at lastThis small plug-in with more than 700 lines based on native canvas may be just the beginning for exploring the world of canvas.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.