咱今天聊聊B站那个不挡脸弹幕的事儿。平时就爱在B站上看些跳舞、小姐姐营业之类的视频,弹幕一多,好家伙,脸都给盖没了,看得我这个急。有时候精彩镜头全被“保护”俩字给挡了,你说气不气人。
手机APP上的体验
最早听说有这功能,还是在手机APP上。那天我照常刷着视频,具体哪个视频给忘了,反正弹幕又是铺天盖地。我就寻思着,这B站天天更新,就不能优化优化这弹幕体验?
我就开始捣鼓。点开一个正在播放的视频,一般是在视频播放界面的右下角,或者有些是右上角那三个小点点开,里面有个“弹幕设置”的选项,图标有时候是个小齿轮啥的。我点了进去,仔细瞅了瞅。
你猜怎么着?还真给我找到了一个叫“智能防挡弹幕”的开关!当时我就眼前一亮,心想这不就是我想要的嘛赶紧给它勾选上。
勾上之后,奇迹发生了!那些原本会从人脸上飘过去的弹幕,刷的一下,像是长了眼睛,知道绕着人走了,直接从人物的背后穿过去。那感觉,就跟变魔术似的,人物是前景,弹幕成背景了。这下看视频,脸也清清楚楚,弹幕的氛围感也还在,舒服多了!
网页版上的探索
手机上体验爽了,我就琢磨,电脑网页版有没有这功能?毕竟我有时候也喜欢用大屏幕看。于是我就打开电脑,上了B站网页版。
我随便点开几个视频,发现好像没啥变化,弹幕还是老样子,该挡脸的还是挡脸。我还纳闷,难道网页版没跟上?
后来我琢磨了一下,是不是有些特定的视频才有,或者需要啥特殊设置。我就特意搜了一些官方提到过的、或者是一些热门的舞蹈区视频。在播放页面右边栏那块儿,我记得好像看到过提示,说是什么“试用新版播放器”之类的,或者有些视频直接就有那个选项了。具体哪个按钮给忘了,反正就是提示你可以用新的功能。
点进去之后,果然,在一些支持的视频里,弹幕也开始不挡脸了。我这人好奇心重,就想着这网页版是怎么实现的?我就按了下F12,打开了那个开发者工具,想看看代码里有啥名堂。
稍微扒拉了一下,发现视频播放器上面覆盖了一个专门放弹幕的层。然后,这个弹幕层用了一个叫mask-image
的CSS属性。这个属性后面跟的是一张图片,那张图片,就是把视频里的人像给抠出来的一个黑白蒙版。白色部分显示,黑色部分透明,这么一来,弹幕遇到人像的区域(也就是蒙版图的黑色部分),就显示不出来了,看起来就像是从人后面过去了。
嚯,原来是这么个原理! 用一张抠好的人像图做遮罩,简单直接,但效果还真不赖。这应该是针对那些固定机位或者人物运动幅度不那么夸张的视频比较好使,要是那种镜头疯狂切换或者人物满场飞的,估计这蒙版图就得动态生成,那技术难度就老高了。
总结一下
B站这个不挡脸弹幕功能,我是觉得挺实用的。尤其是在手机上看那些竖屏的、或者人物特写比较多的视频,体验提升非常明显。
手机APP上开关一打,基本就完事儿了,方便得很。网页版的话,可能不是所有视频都立马支持,或者需要找找那个“新版”入口,实现方式也挺巧妙的,用的是CSS的遮罩技术。
虽然不是啥惊天动地的大革新,但这种从小处着手改善用户体验的尝试,还是值得点赞的。以后看视频,总算不用在“看脸”和“看弹幕”之间做艰难抉择了!