揭秘智能防挡弹幕是如何实现的
因为以前看视频很少开弹幕，所以前段时间才发现有一个智能防挡弹幕功能，瞬间感觉这功能好厉害啊。正好这两天一直想着为祖国母亲庆生，无心学习和工作，刚好有时间来探索一下这个黑科技是如何实现的~
1.前端主要用到了mask-image这个CSS属性。
目前这还是一个实验中的功能，没有了解过的童鞋可以去MDN学习一下这个属性如何使用。使用这个属性的时候，<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> 复制代码注意：使用的时候注意本属性的浏览器兼容性
2.那播放器又是如何利用这个css属性来实现智能防挡的呢？让我们继续往下探索
大家可以看出来视频基本在每一帧都会返回一张右侧这样的图片，这其实是后端通过算法识别出来的svg遮罩图片。其中黑色部分的透明度为1，将完全显示黑色区域下层的内容。而其它部分透明度为0，将完全覆盖下层的内容。所以我们会看到弹幕在经过人物的时候会被遮挡，到了其它地方又会显示出来。
到此这个功能的实现我们已经大致摸索出来了，感兴趣的童鞋可以自己实验一下哦。
作者：Lmuy
链接：https://juejin.cn/post/7012803122108039199