Why can the barrage on Station B not block characters? What do you think of Yuan Fang?

The emergence of bullet screen non blocking technology actually provides a better viewing experience for everyone.Students are definitely familiar with barrage, which is one of the important manifestations of community culture

The emergence of bullet screen non blocking technology actually provides a better viewing experience for everyone.

Students are definitely familiar with barrage, which is one of the important manifestations of community culture. However, with the accumulation of barrage in videos, the content, especially the character images, often cannot be clearly seen.

So, in order to optimize the overall experience of watching videos for everyone, relevant technical personnel used computer vision related technologies to designBullet Screen MaskThis feature can balance the viewing experience of barrage videos.

Image source Zhihu, edited and deleted)

After reading about the implementation principle of the B-station masked barrage, summarize it,The basic points of masked barrage are as follows:

Based on user data and some machine learning related applications, key themes of videos can be extracted;

2. The server processes the video in advance and generates corresponding mask data;

3. When playing videos on the client, load corresponding resources in real time;

4. By using some front-end technical means, mask the bullet screen.

The following article discusses a part of the principle, but not the entire barrage processing process of Station B, because the video image is dynamic. Should we refresh the image according to the video frame rate? How many slicers are required for each video?This article mainly discusses some technical means of the front-end, and my senior thinks that its operation will be more practical. Students can use it as a highlight during development.

That day, while watching the video on Bilibili, I accidentally realized that when the subTitles encountered characters, they were cut and wouldn't block them. I thought it was magical, so I decided to explore the truth.

High end effects often only require the most simple implementation method. After two busy hours, Master Chen opened F12 and suddenly became clear. One image+one attribute, directly handle it.

To confirm my idea, I decided to write a demo myself

≪! DOCTYPEHTML≫≪HTML Lang=En≫≪Head≫  ≪Meta Charset=UTF-8≫  ≪Title≫Title≪/Title≫  ≪Style≫    . video{Width:668px;Height:376px;Position:relative;-Webkit mask image:URLMask. svg);-Webkit mask size:668px 376px;}. bullet{Position:absolute;Font size:20px;}≪/Style≫≪/Head≫≪Body≫≪Div Class=Video≫  ≪Div Class=Bullet Style="left:100px; top:0;"≫Yuanfang, what do you think≪/Div≫  ≪Div Class=Bullet Style="left:200px; top:20px;"≫Are you the legendary milk spirit≪/Div≫  ≪Div Class=Bullet Style="left:300px; top:40px;"≫Hello, I'm Pangling≪/Div≫  ≪Div Class=Bullet Style="left:400px; top:60px;"≫This is the first episode, not yet Lick Spirit≪/Div≫≪/Div≫≪/Body≫≪/HTML≫Copy Code

The effect is like this

Add a red background for a clearer view

At this point, we have achieved a barrage of unobstructed characters for the same model on Bilibili. As for how this image came from, it must have been recognized and generated by AI. One image is only one or two K, and loading many images at once will not cause a significant burden.

Finally, let's take a look at this magical CSS attribute

Developer. mozilla. org/zh CN/docs/

Experimental: This is a function in an experiment

So when developing requirements, it can be used as a highlight, but it cannot be relied on as a requirement.

It also has a series of properties, if you are interested, you can try each one one one.

Disclaimer: The content of this article is sourced from the internet. The copyright of the text, images, and other materials belongs to the original author. The platform reprints the materials for the purpose of conveying more information. The content of the article is for reference and learning only, and should not be used for commercial purposes. If it infringes on your legitimate rights and interests, please contact us promptly and we will handle it as soon as possible! We respect copyright and are committed to protecting it. Thank you for sharing.(Email:[email protected])