B站弹幕不遮挡人像实现

背景

在逛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>

效果图:
原图:

遮罩图:

效果图:

posted @ 2024-02-21 14:17  菜鸟小何  阅读(55)  评论(0)  编辑  收藏  举报