Unbelievable! CSS MASK implements video figure mask

#webdev #css #javascript #html

If you often watch the live broadcast of some LOL games must know that in some barrage websites when the figure and the barrage appear together, the barrage will smartly hide under the figure, looking very smart.

A simple screenshot example:

In fact, this is achieved by using the MASK property in CSS.

Simple usage of MASK

Mask has been mentioned in many articles before. This article does not explain too much the basic concept of mask. When reading down, if you are confused about the usage of some masks, you can re Go check it out.

Here is just a brief introduction to the basic usage of mask.

At its most basic, the way to use a mask is to use an image, like this:



{
    /* Image values */
    mask: url(mask.png); /* use bitmap for mask */
    mask: url(masks.svg#star); /* Use the shape in the SVG graphic to do the mask */
}

Of course, the way to use pictures will be discussed later. The way of using pictures is actually quite cumbersome, because we have to prepare the corresponding picture materials first. In addition to pictures, mask can also accept a background-like parameter, that is gradient.

Similar to the following usage:



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

So how should it be used? A very simple example, above we create a gradient from black to transparent, we apply it in practice, the code looks like this:

Here's a picture like this, superimposed with a gradient from transparent to black.



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

After applying the mask, it will look like this:

In this DEMO, you can briefly understand the basic usage of mask.

This is the most important conclusion of using mask: the element with the mask attribute added, its content will overlap the transparent part of the gradient represented by the mask, and the overlapping part will become transparent.

It is worth noting that the above gradient uses linear-gradient(90deg, transparent, #fff). The #fff color part here can actually be replaced with any color without affecting the effect.

CodePen Demo -- Basic usage using MASK

Use mask to achieve figure mask filtering

After understanding the usage of mask, next, we use mask to simply implement the example of video barrage, where the barrage encounters a figure and is automatically hidden and filtered.

First, I simply simulated a Summoner's Rift, and some basic barrages:

For convenience, a static image is used here, which represents the map of Summoner's Rift, not a real video, while the barrage is a line of <p> elements, which is consistent with the actual situation. Pseudo code looks like this:



<!-- map -->
<div class="g-map"></div>
<!-- The container that wraps all the barrage -->
<div class="g-barrage-container">
    <!-- All barrage -->
    <div class="g-barrage">6666</div>
    ...
    <div class="g-barrage">6666</div>
</div>

In order to simulate the actual situation, we use a div to add an actual figure. If we do not do any processing, it is actually the feeling of opening the barrage when we watch the video, and the figure is blocked by the video:

Note that here I added a figure, and used animation to simulate a simple movement. During the movement, the figure was blocked by the bullet screen.
Next, you can ask for the mask.

We use the mask to make a radial-gradient, so that the vicinity of the figure is transparent, and according to the animation of the figure's movement, add the same animation to the mask-position of the mask. You can end up with something like this:



.g-barrage-container {
    position: absolute;
    mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fff 100%);
    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, to identify the position of the figure, and to continuously change the mask according to the movement of the figure. We replace the mask with the background, and the principle can be understood at a glance.

Replace mask with background diagram:

The transparent part of the background, that is, the transparent part of the mask, is actually the part of the bullet screen that will be hidden and masked, and the other white parts, the bullet screen will not be hidden, which is the perfect use of the characteristics of the mask.

In fact, this technology has nothing to do with the video itself, we only need to block the position of the bullet screen according to the video calculation, and get the corresponding mask parameter. If you remove the background and moving figures, only keep the barrage and mask, like this:

It needs to be clear that when using a mask, instead of blocking the bullet screen part, use mask to specify which parts are displayed normally and which parts are transparently hidden under the bullet screen container.

Finally, the complete Demo you can click here:

CodePen Demo -- mask realizes barrage figure mask filtering

Application in real production

Of course, above we simply restored the effect of using mask to filter the bullet screen. But the actual situation is much more complicated than the above scenario, because the position of the figure hero is uncertain and changes every moment. Therefore, in the actual production environment, the parameters of the mask image are actually calculated by the back-end processing the video in real time, and then passed to the front-end, which is then rendered by the front-end.

For a live site that uses this technique, we can inspect the element and see that the mask property of the container that wraps the barrage changes all the time:

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

In this way, according to the real-time position changes of the video figures, new masks are continuously calculated, and then acted on the bullet screen container in real time to realize mask filtering.