Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use MASK to achieve video on-screen character mask filtering. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

A simple example of screenshot:

In fact, this is implemented using the MASK attribute in CSS.

Introduction to the simple usage of mask

Mask has been mentioned in many articles before, and the more detailed one is the wonderful CSS MASK [1]. This article does not explain too much on the basic concepts of mask. When you read down, if you are confused about the use of some mask, you can take a look again.

Here is a brief introduction to the basic usage of mask:

Basically, the way to use mask is with the help of pictures, like this:

{/ * Image values * / mask: url (mask.png); / * use bitmaps as masks * / mask: url (masks.svg#star); / * use shapes in SVG graphics as masks * /}

Of course, we will talk about the way we use pictures later. The way to use pictures is actually more complicated, because we first have to prepare the corresponding picture material, in addition to pictures, mask can also accept a parameter similar to background, that is, gradients.

Similar to the following usage:

{mask: linear-gradient (# 000, transparent) / * use gradient as mask * /}

How exactly should it be used? A very simple example, above we created a gradual change from black to transparent, and we applied it to practice, and the code looks like this:

The following picture is superimposed with a gradient from transparent to black

{background: url (image.png); mask: linear-gradient (90deg, transparent, # fff);}

When mask is applied, it looks like this:

For this DEMO, you can simply understand the basic usage of mask.

Here is the most important conclusion of using mask: the element with the mask attribute will overlap with the gradient transparent represented by mask, and the overlap will become transparent.

It is worth noting that the above gradient uses linear-gradient (90deg, transparent, # fff), where the # fff solid color part can actually be changed to any color, without affecting the effect.

CodePen Demo-basic use of using MASK [2]

Using mask to realize character Mask filtering

After understanding the use of mask, we use mask to simply implement an example in which people are automatically hidden and filtered when they encounter characters on the video barrage.

First of all, I simply simulated a summoner canyon, as well as some basic barrage:

For convenience, a static picture is used here, showing a map of the summoner Canyon, not a real video, and a barrage.

Element, which is consistent with the actual situation. The pseudocode looks something like this:

6666... 6666

In order to simulate the actual situation, we add an actual character with a div. If nothing is done, it is actually how we feel when we watch the video and turn on the on-screen comment. The character is obscured by the video:

Notice that here I added a character Yasso and simulated a simple motion with animation, in which the character was obscured by the barrage.

Next, you can bring out the mask.

We use mask to make a radial-gradient so that there is a transparent near the character, and according to the animation of the character movement, add the same animation to the mask-position of mask. In the end, you can get the following effect:

G-barrage-container {position: absolute; mask: radial-gradient (circle at 100px 100px, transparent 60px, # fff 80px, # fff); animation: mask 10s infinite alternate;} @ keyframes mask {100% {mask-position: 85vw 0;}}

In fact, it is to add a mask attribute to the container where the barrage is placed, identify the location of the character, and constantly change the mask according to the character's movement. We replace mask with background, and we can understand the principle at a glance.

Replace mask with background schematic:

The transparent part of the background, that is, the transparent part of the mask, is actually the part of the barrage that will be hidden, while the other white parts, the barrage will not be hidden, is a perfect use of the features of mask.

In fact, this technology has nothing to do with the video itself. We only need to mask the position of the on-screen comment according to the video calculation and get the corresponding mask parameters. If you get rid of the background and sports characters and leave only the on-screen comment and mask, it goes like this:

It needs to be clear that the use of mask is not to cover the on-screen comment, but to use mask to specify which parts are displayed normally and which are hidden transparently under the on-screen comment container.

Finally, you can poke the complete Demo here:

CodePen Demo-mask to filter on-screen character Mask [3]

Application in actual production environment

Of course, the above we simply restore the use of mask to achieve the effect of bullet screen mask filtering. But the actual situation is much more complicated than the above scene, because the position of the characters and heroes is uncertain and is changing every moment. Therefore, in the actual production environment, the parameters of mask images are actually calculated by the back-end real-time processing of the video, and then transmitted to the front-end, and then rendered.

For live streaming sites that use this technology, we can review the elements and see that the mask attribute of the container wrapping the bullet screen is changing all the time:

What is returned is actually a SVG image, which looks like this:

In this way, according to the real-time position changes of the video characters, we constantly calculate the new mask, and then act on the on-screen barrage container in real time to achieve mask filtering.

This is the end of this article on "how to use MASK to achieve video on-screen character mask filtering". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.