揭秘智能防挡弹幕是如何实现的

Lmuy
2,506 阅读2分钟

因为以前看视频很少开弹幕，所以前段时间才发现有一个智能防挡弹幕功能，瞬间感觉这功能好厉害啊。正好这两天一直想着为祖国母亲庆生，无心学习和工作，刚好有时间来探索一下这个黑科技是如何实现的~ 1.前端主要用到了mask-image这个CSS属性。

目前这还是一个实验中的功能，没有了解过的童鞋可以去MDN学习一下这个属性如何使用。语法如下： mask-image CSS属性用于设置元素上遮罩层的图像。

初始值none
适用元素all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性否
计算值as specified, but with url values made absolute
Animation typediscrete

Values：

  • none
  • 默认值，透明的黑色图像层，也就是没有遮罩层。
  • <mask-source>
  • <mask>或CSS图像的url
  • <image>
  • 图片作为遮罩层
/* Keyword value */
mask-image: none;

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

/* <image< values */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue);

/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: unset;

使用这个属性的时候，<mask-source>可以赋值为<mask>或css图像的url，<image>图片作为遮罩层。例如：

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}
<div id="masked"></div>

注意：使用的时候注意本属性的浏览器兼容性 image.png

2.那播放器又是如何利用这个css属性来实现智能防挡的呢？让我们继续往下探索

image.png 这里可以看出：弹幕容器部分确实使用了mask-source属性，并且进行了一些属性的配置。从而使当前图片作为遮罩层。

image.png 这里可以看出：当前弹幕确实被mask-source所设置的遮罩层所覆盖，从而实现了智能防挡弹幕的效果。

image.png 大家可以看出来视频基本在每一帧都会返回一张右侧这样的图片，这其实是后端通过算法识别出来的svg遮罩图片。其中黑色部分的透明度为1，将完全显示黑色区域下层的内容。而其它部分透明度为0，将完全覆盖下层的内容。所以我们会看到弹幕在经过人物的时候会被遮挡，到了其它地方又会显示出来。
到此这个功能的实现我们已经大致摸索出来了，感兴趣的童鞋可以自己实验一下哦。

avatar
文章
阅读
粉丝