相信只要是在B站看视频的小伙伴,一定有过打开弹幕,看看大家对同样的情节发表了什么有趣观点的时候吧。
那大家有没有发现或者好奇过B站弹幕是如何做到不遮挡人物的呢?
基于好奇心,我决定查阅资料,一探究竟。
弹幕消失了?

高端的效果,往往只需要采用最朴素的实现方式。
经过一番查阅发现,仅仅需要一张图片+一个CSS属性就能实现弹幕不遮挡人物的功能。

mask-image


弹幕实现原理
-
视频处理:对有人物出现的每一帧视频画面都由后台AI识别后生成对应的 base64 图片,这个图片具有人物的透明轮廓。一张图片也就1~2K,不会造成性能负担。
-
视频画面上设置一个绝对定位元素。
-
视频播放时由 JS 动态设置绝对定位元素的mask-image的url 地址为当前帧对应的base64图片。
当然,实际情况下视频的处理会要更复杂,相关技术人员为了优化大家观看视频时的综合体验,就通过计算机视觉相关技术,就设计出【弹幕蒙版】的功能,这样的功能就可以平衡弹幕视频观看体验。
mask
最后来看看这个神奇的属性吧!
顾名思义,mask 译为遮罩。在CSS中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
它还有以下一系列属性,感兴趣的可以挨个试试!
-
mask-image: 使用的图片资源,默认 none。
-
mask-mode: 根据资源的类型自动采用合适的遮罩模式,默认match-source。
-
mask-repeat: 和background-repeat 属性相似,默认repeat。
-
mask-position: 和background-position 支持的属性值和表现一样,默认center。
-
mask-clip: 和background-clip 类似,但是多了 SVG 元素支持,默认border-box。
-
mask-origin: 和background-origin类似,但是多了SVG元素支持,默认border-box。
-
mask-size: 和background-size类似,默认 auto。
-
mask-composite: 使用多个图片进行遮罩时候的混合方式,默认add,表示多个图片遮罩效果累加。

为了更好的娱乐体验,
技术也在不断地发展。
不知道大家还扒过什么有意思的小功能,
分享出来大家瞅瞅吧~

HR++
产品顾问→
马上咨询

推荐阅读

点击图片查看原文

点击图片查看原文

你“在看”我吗?






