为什么B站中的弹幕可以不遮挡人物

9030 2025-06-12 22:06:00

上班逛B站时摸鱼时，看到了满屏的弹幕，而且还不挡脸，突然心血来潮来看看它是怎么实现的？

不难发现弹幕其实它就是有一个蒙版层div，遮挡在视频组件的上方，z-index层级设置的比较高（这里是11），video标签层级为默认值0，所以这个视频播放的页面是由多个层组成的（当然该页面还有很多其他的layout层，这里不细讲），这一点我们也可以从页面layout分层中也可以直观地看出来：

此时又有同学跳出来问。。。。。。 同学A: ”那它这个不挡脸的弹幕又是如何实现的呢？“

me：这位同学这个问题很好，我们接着看：

me：高端的食材往往需要最崴的厨子 不对… 高端的效果，往往底层原理很简单 废话不多说，我模拟了一个Demo，直接上代码。。。

// index.html文件

name="description"

content="Web site created using create-react-app"

/>

// App.js文件

import Img from './components/video';

function App() {

return ;

}

export default App;

// Img组件

const texts=[

{left:140,top:10,text:'UP主好帅'},

{left:200,top:430,text:'你难道就是传说中的奶灵'},

{left:231,top:70,text:'你好，我是ronychen'},

{left:20,top:35,text:'喜欢唱跳rap篮球'},

{left:821,top:53,text:'HELLO WORLD'},

{left:30,top:121,text:'我是练习时长2年半的练习生'},

{left:398,top:321,text:'哈哈哈哈'},

{left:190,top:90,text:'我就蹭蹭，不进去'},

{left:170,top:200,text:'hahahahahahahahah'},

{left:240,top:490,text:'这是什么XXXX'},

{left:420,top:340,text:'元芳，你则么看？'},

]

const Img =()=>{

return (

)

}

export default Img;

基本看到这，大部分同学应该都能理解了，其实原理很简单，一张蒙版图 + 一个属性（-webkit-mask-image）就搞定了，实际效果就是这样： 是不是有种那感觉了

总结： 弹幕原理：就如我上面所说，有一个单独的蒙版层div，它会设置一个比视频组件更高的层级值，这样就能显示在视频上方，这里插一句话，在移动端，大多数浏览器貌似都不支持在video标签上放其他内容，在移动端，video标签貌似已经脱离标准文档流，即使你设置再高的z-index值也是不行的，回归主题，至于弹幕不遮挡人物这种效果的实现，我的理解应该是AI算法会实时导出视频中识别到的人物，然后导出这些人物的图片，这点我们可以在network中看到会有实时的图片加载，这些图片就是我们上面要用到的蒙版图，然后再结合css中的-webkit-mask-image属性，就可以实现上述效果，该属性具体的用法可以点击这里查看

至于这一张张的蒙版图片是怎么来的，这块我也不是很清楚，应该是AI算法实时导出的吧！ 有兴趣的同学自行了解吧 hahaha。。。