B站视频弹幕不挡住人脸效果

前言

有天在B站看二舅的视频时，密密麻麻的弹幕居然没有二舅的人脸，很好奇是怎么做到的，于是决定一探究竟。

高端的效果，往往只需要采用最朴素的实现方式，琢磨了好一会儿，打开了F12，豁然开朗。一张图片+一个属性，直接搞定。

mask-image属性

mask-image CSS属性用于设置元素上遮罩层的图像。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image

mask-image demo

为了印证我的想法，我决定自己写一个demo

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.video {width: 668px;height: 376px;position: relative;-webkit-mask-image: url("./assets/erjiu-mask.svg");-webkit-mask-size: 668px 376px;background-color: green;}.bullet {position: absolute;font-size: 20px;color: red;}</style>
</head><body><div class="video"><div class="bullet" style="left: 100px; top: 0;">二舅，你怎么看</div><div class="bullet" style="left: 200px; top: 20px;">你难道就是传说中的二舅</div><div class="bullet" style="left: 300px; top: 40px;">你好，我是二舅</div><div class="bullet" style="left: 400px; top: 60px;">二舅好帅</div></div>
</body></html>

效果如下：

至此我们就实现了B站同款的不遮挡人物的弹幕。至于这张图片是怎么来的，那是AI识别出来然后生成的，一张图片也就一两K，连续加载也不会造成很大的负担。

Barrage UI demo

html

<template><div id="app"><div id="container"><videoid="video"autoplay="autoplay"src="../assets/video.mp4"controls></video></div></div>
</template>

import Barrage from 'barrage-ui';
import example from 'barrage-ui/example.json'; // 组件提供的示例数据// 加载弹幕
const barrage = new Barrage({container: document.getElementById('container'), // 父级容器data: example, // 弹幕数据// beforeRender: (ctx, progress) => {// 用于获取当前进度对应蒙版的方法// const imageData = getMask(progress); // barrage.setMask(imageData);// },config: {// 全局配置项duration: 20000, // 弹幕循环周期(单位：毫秒)defaultColor: '#fff', // 弹幕默认颜色},
});// 设置蒙版图像
const img = require("../assets/mask.svg");
barrage.setMask(img); // 传入蒙版图像的 url// 新增一条弹幕
barrage.add({key: 'fctc651a9pm2j20bia8j', // 弹幕的唯一标识time: 1000, // 弹幕出现的时间(单位：毫秒)text: '这是新增的一条弹幕', // 弹幕文本内容fontSize: 24, // 该条弹幕的字号大小(单位：像素)，会覆盖全局设置color: '#0ff', // 该条弹幕的颜色，会覆盖全局设置
});// 播放弹幕
barrage.play();

B站视频弹幕不挡住人脸效果相关推荐

python爬取bilibili弹幕_用Python爬取B站视频弹幕
原标题:用Python爬取B站视频弹幕 via:菜J学Python 众所周知,弹幕,即在网络上观看视频时弹出的评论性字幕.不知道大家看视频的时候会不会点开弹幕,于我而言,弹幕是视频内容的良好补充,是一 ...
python 爬取B站视频弹幕信息
获取B站视频弹幕,相对来说很简单,需要用到的知识点有requests.re两个库.requests用来获得网页信息,re正则匹配获取你需要的信息,当然还有其他的方法,例如Xpath. 进入你所观看的视 ...
python3抓取b站弹幕_python3写爬取B站视频弹幕功能
需要准备的环境: 一个B站账号,需要先登录,否则不能查看历史弹幕记录联网的电脑和顺手的浏览器,我用的Chrome Python3环境以及request模块,安装使用命令,换源比较快: pip3 in ...
用Python把B站视频弹幕爬下来，绘制词云图看看大家最关心什么！
今天带大家做点好玩的,把B站热门视频弹幕爬下来制作词云图! 康康大家都怎么说! 开始之前先给大家啰嗦几句,可能有些兄弟不会安装模块,我大概讲一下. 如何安装模块: win(键盘左下角ctrl 和 Al ...
bilibili怎么设置弹幕数量_python爬取B站视频弹幕分析并制作词云
1.分析网页视频地址: www.bilibili.com/video/BV19E- 本身博主同时也是一名up主,虽然已经断更好久了,但是不妨碍我爬取弹幕信息来分析呀. 这次我选取的是自己唯一的爆款 ...
python爬取b站弹幕分析_python爬取B站视频弹幕分析并制作词云
目录1.分析网页 2.爬虫+jieba分词+制作词云2.1爬虫 2.2jieba分词 2.3制作词云 3.成品展示 4.完整代码 1.分析网页视频地址:https://www.bilibili.co ...
python爬取B站视频弹幕分析并制作词云
1.分析网页视频地址: www.bilibili.com/video/BV19E- 本身博主同时也是一名up主,虽然已经断更好久了,但是不妨碍我爬取弹幕信息来分析呀. 这次我选取的是自己唯一的爆款 ...
爬取B站视频弹幕生成词云
效果预览以B站UP主可乐三太火影1-720集解说视频2020-08-07弹幕爬取为例,生成词云代码 # -*- coding: utf-8 -*- # @Time : 2020/8/8 22:11 ...
用python爬取视频及字幕_Python3爬取B站视频弹幕文字＋视频
需要准备的环境: 1.一个B站账号,需要先登录,否则不能查看历史弹幕记录 2.联网的电脑和顺手的浏览器,我用的Chrome 3.Python3环境以及request模块,安装使用命令,换源比较快: 爬 ...

B站视频弹幕不挡住人脸效果

前言

mask-image属性

mask-image demo

相关框架 Barrage UI

Barrage UI demo

B站视频弹幕不挡住人脸效果相关推荐

最新文章

热门文章