Home > Article > Web Front-end > 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
Draw mask (rectangle)
Set mask style (provide API)
Mask movement
Mask scaling
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!