为什么B站中的弹幕可以不遮挡人物
上班逛B站时摸鱼时，看到了满屏的弹幕，而且还不挡脸，突然心血来潮来看看它是怎么实现的？
不难发现弹幕其实它就是有一个蒙版层div，遮挡在视频组件的上方，z-index层级设置的比较高（这里是11），video标签层级为默认值0，所以这个视频播放的页面是由多个层组成的（当然该页面还有很多其他的layout层，这里不细讲），这一点我们也可以从页面layout分层中也可以直观地看出来：
此时又有同学跳出来问。。。。。。
同学A: ”那它这个不挡脸的弹幕又是如何实现的呢？“
me：这位同学这个问题很好，我们接着看：
me：高端的食材往往需要最崴的厨子 不对… 高端的效果，往往底层原理很简单
废话不多说，我模拟了一个Demo，直接上代码。。。
// index.html文件
<head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><title>React App</title><style>.back{position: relative;width: 751px;height: 420px;-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHdpZHRoPSI3NTAuMjIyMjIyMjIyMjIyMnB4IiBzdHlsZT0idHJhbnNmb3JtOnNjYWxlKDEuMDAxLDEpOyIgaGVpZ2h0PSI0MjJweCIgdmlld0JveD0iMCAwIDMyMC4wMDAwMDAgMTgwLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwxODAuMDAwMDAwKSBzY2FsZSgwLjEwMDAwMCwtMC4xMDAwMDApIgpmaWxsPSIjMDAwMDAwIiBzdHJva2U9Im5vbmUiPgo8cGF0aCBkPSJNMCA5MDUgbDAgLTg5NSAyMzggMCAyMzggMCAyIDYzIGM1IDEzNiA0NiAzNTcgNzggNDE3IDIyIDQzIDU2IDc1IDE0NCAxMzUgOTYKNjUgMTI1IDg3IDE3OCAxMzEgMjAgMTcgNjUgNTAgOTggNzMgbDYxIDQxIDcgNzIgYzMgNDAgOSA5MSAxMiAxMTQgNSAzNyAxIDQ4Ci00MCAxMDggLTI1IDM3IC00NiA3NCAtNDYgODIgMCA4IC0xMSAxOSAtMjQgMjMgLTI4IDExIC0zNiAyOSAtMzYgODAgMCAyMCAtNgo0NSAtMTMgNTYgLTcgMTEgLTIwIDQ2IC0yNyA3OCAtMjQgMTA0IDIwIDIwMSAxMTMgMjQ4IDI4IDE1IDM3IDI2IDM3IDQ0IGwwCjI1IC01MTAgMCAtNTEwIDAgMCAtODk1eiIvPgo8cGF0aCBkPSJNMTU5MCAxNzc5IGMwIC0xMiA3IC0yNyAxNyAtMzQgOSAtNyAxOSAtMzQgMjMgLTYxIDQgLTI3IDE0IC02MyAyMSAtODEgMTAKLTI0IDEwIC00MCAyIC03MCAtMTkgLTY2IC00MyAtMTg3IC00MyAtMjE4IC0xIC0yNyAtNDcgLTIwNiAtNjQgLTI0NiAtNiAtMTMKOSAtMjMgNzMgLTQ5IDEwMSAtNDAgMTA4IC00OCA5MSAtMTAxIC0xNiAtNDYgLTEyIC01MiA1MSAtNjkgMzcgLTEwIDEyMyAtNTMKMTQ4IC03MyAyNiAtMjEgODYgLTExMSAxMTkgLTE3NSAyNiAtNTIgMzIgLTc2IDMyIC0xMjcgMCAtNTkgMyAtNjYgNDEgLTExMQoyMiAtMjcgNDcgLTYyIDU2IC03OSA5IC0xNiAzNSAtNTkgNTggLTk1IDQ5IC03NiA4MyAtMTUwIDc3IC0xNjggLTMgLTkgOTIKLTEyIDQ1MiAtMTIgbDQ1NiAwIDAgODk1IDAgODk1IC04MDUgMCAtODA1IDAgMCAtMjF6Ii8+CjwvZz4KPC9zdmc+Cg==');-webkit-mask-size: 751px 420px;background-color: brown;}.bullet{position: absolute;font-size: 20px;color: #FFFFFF;}</style></head><body><div id="root">23456789</div></body>
</html>
// App.js文件
import Img from './components/video';function App() {return <Img />;
}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 (<div className='back'>{texts.map((item,index)=>(<div key={index} className="bullet" style={{left:`${item.left}px`, top:`${item.top}px`}}>{item.text}</div>))}</div>)
}export default Img;
基本看到这，大部分同学应该都能理解了，其实原理很简单，一张蒙版图 + 一个属性（-webkit-mask-image）就搞定了，实际效果就是这样：
是不是有种那感觉了
总结：
弹幕原理：就如我上面所说，有一个单独的蒙版层div，它会设置一个比视频组件更高的层级值，这样就能显示在视频上方，这里插一句话，在移动端，大多数浏览器貌似都不支持在video标签上放其他内容，在移动端，video标签貌似已经脱离标准文档流，即使你设置再高的z-index值也是不行的，回归主题，至于弹幕不遮挡人物这种效果的实现，我的理解应该是AI算法会实时导出视频中识别到的人物，然后导出这些人物的图片，这点我们可以在network中看到会有实时的图片加载，这些图片就是我们上面要用到的蒙版图，然后再结合css中的-webkit-mask-image属性，就可以实现上述效果，该属性具体的用法可以点击这里查看
至于这一张张的蒙版图片是怎么来的，这块我也不是很清楚，应该是AI算法实时导出的吧！ 有兴趣的同学自行了解吧 hahaha。。。
相关文章：
为什么B站中的弹幕可以不遮挡人物
上班逛B站时摸鱼时，看到了满屏的弹幕，而且还不挡脸，突然心血来潮来看看它是怎么实现的？ 不难发现弹幕其实它就是有一个蒙版层div，遮挡在视频组件的上方，z-index层级设置的比较高（这里是11&…...
数据结构 第八章 查找(静态查找表)
集合 1、集合中的数据元素除了属于同一集合外,没有任何的逻辑关系 2、在集合中,每个数据元素都有一个区别于其他元素的唯一标识(键值或者关键字值) 3、集合的运算： 1 查找某一元素是否存在(内部查找、外部查找) 2 将集合中的元素按照它的唯一标识进行排序4、集合的…...
【Python基础】数据类型（元组、列表）
文章目录二. 数据类型2.1 元组 tuple2.1.1 定义特性2.1.2 拼接拷贝2.1.3 元组拆包2.1.4 元组方法 count2.2 列表 list2.2.1 基础定义2.2.2 增删操作2.2.3 连接联合2.2.4 其他常规操作2.2.5 列表推导式2.2.6 生成器表达式2.x 小结：何时使用元组或列表二. 数据类型 Py…...
你了解互联网APP搜索和推荐的背后逻辑么？
1.搜索和推荐无处不在我们习惯了百度、Google、360搜索的便捷，输入你想要搜索的关键词，立马呈现给你一批对应的结果，供你筛选。我们也经常上淘宝、京东、拼多多购物，输入想买的商品，瞬间列出一页一页的商品清单供我们选…...
Bug的级别，按照什么划分
Bug分类和定级一、bug的定义二、bug的类型三、bug的等级四、bug的优先级一、bug的定义一般是指不满足用户需求的则可以认为是bug，狭义指软件程序的漏洞或缺陷，广义指测试工程师或用户提出的软件可改进的细节、或与需求文档存在差异的功能实现等对应三个测…...
微服务项目简介
项目简介 项目模式 电商模式：市面上有5种常见的电商模式，B2B、B2C、 C2B、 C2C、O2O; 1、B2B模式 B2B (Business to Business)，是指 商家与商家建立的商业关系。如:阿里巴巴 2、B2C 模式 B2C (Business to Consumer), 就是我们经常看到的供…...
SLAM中坐标轴旋转及ros的接口解释
读完几个loam算法，满篇的坐标轴旋转，还是手写的(作者，用eigen写不好嘛。。。)，我滴天适应了好久…，今天就总结一下坐标轴旋转问题。 一、首先，我们看一下ros中关于欧拉角旋转的函数：setRPY、set…...
文件管理（9）
文件管理 0 引言 为什么要引入文件系统？ 信息管理的需要：用户面前提供一种规格化的机制，方便用户对文件的存取、提高效率。操作系统本身需要–操作系统本身也不是常驻内存的，也有大量的信息需要存于外存。 1 文件定义 文件&a…...
PyTorch学习笔记：nn.TripletMarginLoss——三元组损失
PyTorch学习笔记：nn.TripletMarginLoss——三元组损失 torch.nn.TripletMarginLoss(margin1.0, p2.0, eps1e-06, swapFalse, size_averageNone, reduceNone, reductionmean)功能：创建一个三元组损失函数(triplet loss)，用于衡量输入数据x1,x…...
冒泡排序详解
冒泡排序是初学C语言的噩梦，也是数据结构中排序的重要组成部分，本章内容我们一起探讨冒泡排序，从理论到代码实现，一步步深入了解冒泡排序。排序算法作为较简单的算法。它重复地走访过要排序的数列，一次比较两个元素&am…...
git极快上手指南超级精简版
注：本文参考https://www.liaoxuefeng.com/wiki/896043488029600 原文非常值得一读，作者学识渊博，补充了很多有意思的知识。我仅仅是拾人牙慧。 git是最先进的分布式版本控制系统。 版本控制系统——自动记录系统中文件的改动情况࿰…...
蓝桥杯-最长公共子序列（线性dp）
没有白走的路，每一步都算数🎈🎈🎈 题目描述： 已知有两个数组a,b。已知每个数组的长度。要求求出两个数组的最长公共子序列 序列 1 2 3 4 5 序列 2 3 2 1 4 5 子序列：从其中抽掉某个或多个元素而产生的新…...
GO的并发模式Context
GO的并发模式Context 文章目录GO的并发模式Context一、介绍二、Context三、context的衍生四、示例：Google Web Search4.1 server程序4.2 userip 包4.3 google 包五、使用context包中程序实体实现sync.WaitGroup同样的功能（1）使用sync.WaitGro…...
《Redis实战篇》六、秒杀优化
6、秒杀优化 6.0 压力测试 目的：测试1000个用户抢购优惠券时秒杀功能的并发性能~ ①数据库中创建1000用户 这里推荐使用开源工具：https://www.sqlfather.com/ ，导入以下配置即可一键生成模拟数据 {"dbName":"hmdp",…...
《C++ Primer Plus》第16章：string类和标准模板库（11）
其他库 C 还提供了其他一些类库，它们比本章讨论前面的例子更为专用。例如，头文件 complex 为复数提供了类模板 complex，包含用于 float、long 和 long double 的具体化。这个类提供了标准的复数运算及能够处理复数的标准函数。C11 新增的头文…...
声明和定义
前言 很多编程语言的语法中都有关于声明和定义的概念，这种概念一般会应用于函数或变量的创建和使用中，但是为什么要这么做？ 以C语言为例，一些书籍或教程会要求读者在程序文件开头写上函数和变量的声明，然后再在后面对…...
Python获取最小路径，查找元素在list中的坐标
# codingutf-8__author__ Jeff.xiedef t(li):pass获取最小路径def minPathSum(grid):if not grid:return 0m len(grid) #m列n len(grid[0]) #n行print(grid[0])print("m: ",m)print("n: ",n)#创建一个二维数组dp [[0]*n for _ in range(m)]print(dp) #这…...
数据采集协同架构，集成马扎克、西门子、海德汉、广数、凯恩帝、三菱、海德汉、兄弟、哈斯、宝元、新代、发那科、华中各类数控以及各类PLC数据采集软件
文章目录 前言一、采集协同架构是什么？可以做什么（数控、PLC配置采集）？二、使用步骤 1.打开软件，配置MQTT或者数据库（支持sqlserver、mysql等）存储转发消息规则2.配置数控系统所采集的参数、转…...
Allegro172版本如何用自带的功能实现快速在1MMBGA下方等距放置电容
Allegro172版本如何用自带的功能实现快速在1MMBGA下方等距放置电容 在做PCB设计的时候，在1MM中心间距的BGA背面放置电容，是非常常见的设计，如何快速把电容等距放在BGA下方，除了借助辅助工具外，在Allegro升级到了172版本的时候，可以借助本身自带的功能实现快速放置，以下图…...
一种简单的统计pytorch模型参数量的方法
nelememt()函数Tensor.nelement()->引自Tensor.numel()->引自torch.numel(input)三者的作用是相同的Returns the total number of elements in the inputtensor.返回当前tensor的元素数量利用上面的函数刚好可以统计模型的参数数量parameters()函数Module.parameters(rec…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
leetcodeSQL解题：3564. 季节性销售分析
leetcodeSQL解题：3564. 季节性销售分析 题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
NFT模式：数字资产确权与链游经济系统构建
NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生，我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要，而您认真负责的教学态度，让课程的每一部分都充满了实用价值。 尤其让我…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如，已知表达式3*52，依照子表达式的求值顺序，有两种可能的结果，如图9-3所示。 如果乘法先执行，结果是17。如果5…...