• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Because before watching videos rarely open bullet screen, so some time ago, I found that there is an intelligent defense bullet screen function, instantly feel this function is very powerful ah. Just these two days have been thinking about celebrating the mother of the motherland, no study and work, just have time to explore this black technology is how to achieve ~

  1. Mask-image is the main CSS attribute used in the front end.

This is still an experimental feature, so if you are not familiar with it, you can go to MDN to learn how to use it. When using this property,

can be assigned to

or the URL of the CSS image, with the
image as the mask layer. Such as:

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}
<div id="masked"></div>
Copy the code

Note: Use this property with browser compatibility in mind

  1. How does the player use this CSS property to implement smart blocking? Let’s explore further

And you can see that basically every frame of the video is going to return an image like this on the right, which is actually the back endalgorithmidentifiedSVG mask graphSlice. The opacity of the black part is 1, which will completely show the contents of the lower layer of the black area. The rest, with zero transparency, will completely cover the underlying content. So we’ll see that the barrage will be obscured as it passes by the character, and will show up in other places.

To the realization of this function we have been roughly groped out, interested in children’s shoes can experiment oh.