背景
在逛b站的时候，发现一些视频的弹幕都在视频后面，不会遮挡人像，这样看起来很舒服。于是就想着，能不能自己实现一下呢？于是就有了这篇博客。
探究源码
1、通过调试控制台发现每个video标签都覆盖了个弹幕的div，这个div有个mask-image属性。这个属相包含了一张扣出的图片。推测就是通过这个属性实现的。
推测实现
- 用户上传视频
- b站后台通过AI将每一帧都进行语义分割，将人像扣出来，然后生成一张图片。
- 将这张图片设置为mask-image属性，这样就可以实现弹幕不遮挡人像了。
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="test">
<div class="video">
<image src="./img_1.png"></image>
</div>
<div class="bpx-player-row-dm-wrap">
<p>丹佛爱死非农i阿富汗i哦21321死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2</p>
<p>丹佛爱死非农i阿富汗i哦21321死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2</p>
<p>丹佛爱死非农i阿富汗i哦21321死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2</p>
<p>丹佛爱死非农i阿富汗i哦21321死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2</p>
<p>丹佛爱死非农i阿富汗i哦21321死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2</p>
<p>丹佛爱死非农i阿富汗i哦21321死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2</p>
<p>丹佛爱死非农i阿富汗i哦21321死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2</p>
<p>丹佛爱死非农i阿富汗i哦21321死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2</p>
<p>丹佛爱死非农i阿富汗i哦21321死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2死非农i阿富汗i哦2</p>
</div>
</div>
</body>
<style>
.test{
width: 100%;
height: 100vh;
position: relative;
}
.video{
position: absolute;
width: 670px;
height: 374px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.bpx-player-row-dm-wrap{
position: absolute;
width: 670px;
height: 374px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
mask-image: url('./img_2.svg');
mask-size: cover;
}
</style>
</html>
效果图:
原图:
遮罩图:
效果图:
