html 实现b站弹幕,可实现B站 蒙版弹幕 效果的前端组件 —— Barrage UI
关于 key
当动画过程中需要更新数据集时,推荐设置此字段。
动态更新数据集时,为了动画的连续性,更新前后的数据集可能存在部分相同的数据。Barrage 组件内部会对更新前后的数据的 key 进行比较,只增量渲染那些新增的数据,而不改变已经存在的弹幕布局。
综上所述,字段 key 的取值应该是稳定且唯一的。对于同一条弹幕而言,key 的值应该是不变的。
3.4、装填弹幕
装填弹幕有两种方式:
方式一:初始化时传入数据
const barrage = newBarrage({
container:'barrage',
data: JSON_DATA,//JSON_DATA -> 你的弹幕数据
});
方式二:初始化后更新数据
const barrage = newBarrage({
container:'barrage',
});
barrage.setData(JSON_DATA);//JSON_DATA -> 你的弹幕数据
3.5、新增弹幕
如果你的弹幕实例已创建或者正在播放,可以通过 .add() 方法新增一条记录:
barrage.add({
key:'fctc651a9pm2j20bia8j',
time:1000,
text:'这是新增的一条弹幕',
fontSize:24,
color:'#0ff',
});
.add() 方法一般搭配 数据提交/请求 操作进行使用,以实现真实的线上应用。
实现多终端同步的实时弹幕:
某用户在客户端提交了一条弹幕到服务端
服务端将数据存储并分发给正在进行会话的客户端
客户端收到数据后,使用 .add() 方法进行数据更新
3.6动画控制接口
3.6.1barrage.play():用于播放动画。若当前为暂停状态,则从当前进度继续播放
barrage.play();
3.6.2barrage.pause():用于暂停动画
barrage.pause();
3.6.3barrage.replay():用于重新开始播放动画
barrage.replay();
3.6.4barrage.goto(progress):用于跳转播放进度。此方法在动画播放和暂停的状态下均有效
progress - 待跳转的进度。值为一个毫秒数,表示跳转到动画的第几毫秒
barrage.goto(15000); //跳转到第 15 秒
3.7动画状态属性
3.7.1barrage.progress:当前动画的播放进度
描述播放进度的一个毫秒数
3.7.2barrage.animState:当前动画的播放状态
描述播放状态的一个字符串:
'ready' - 已就绪。即:barrage 实例已创建,但从未播放
'paused' - 已暂停
'playing' - 播放中
3.8其他接口&属性
3.8.1barrage.setMask(mask):用于设置蒙版图像。蒙版图像的概念见下文 蒙版弹幕
参数:mask - 蒙版图像的 url 或 ImageData
barrage.setMask('mask.png'); //通过图片 url 设置蒙版图像
barrage.setMask(imageData);//直接设置 ImageData 类型的数据
3.8.2barrage.clearMask():用于清空当前的蒙版图像。清空后若不再重新设置蒙版图像,则动画将不再具有蒙版效果
barrage.clearMask();
3.8.3barrage.canvas:渲染弹幕的 canvas 画布
3.8.4barrage.ctx:画布的上下文,相当于 barrage.canvas.getContext('2d')
3.9蒙版弹幕
蒙版弹幕 是由知名弹幕视频网站 bilibili 于 2018 年中推出的一种弹幕渲染效果,可以有效减少弹幕文字对视频主体信息的干扰。
3.9.1实现原理
如果你熟悉最著名的图像处理软件——Adobe Photoshop,那么你应该对 “蒙版” 的概念不陌生,“蒙版弹幕” 的实现原理与此类似,即:将图像的一部分 “隐藏”。
Barrage 组件的初始化参数中的 mask 一项即用于处理蒙版效果。对于上文截图中的效果,其使用的蒙版图像效果如下:
弹幕渲染时,会将蒙版图像中 “镂空” 的部分(图像 RGBA 通道中 Alpha 通道为 0 的像素)去除,从而达到 “蒙版弹幕” 的效果。
3.9.2简单蒙版弹幕的实现
为 barrage 实例设置蒙版图像(mask)即可实现蒙版弹幕效果。
可通过初始化参数 mask 传入蒙版图像:
import Barrage from 'barrage-ui';
import example from'barrage-ui/example.json';
const barrage= newBarrage({
container:'barrage',
data: example,
mask:'mask.png', //传入蒙版图像的 url
});
也可以在弹幕初始化后,通过 .setMask() 方法进行实时更新:
import Barrage from 'barrage-ui';
import example from'barrage-ui/example.json';
const barrage= newBarrage({
container:'barrage',
data: example,
});//设置蒙版图像
barrage.setMask('mask.png'); //传入蒙版图像的 url
注意:mask 参数和 .setMask() 方法的参数类型一致,可接收图像的 url 或 ImageData
3.9.3实时渲染
上文的示例仅能够实现一帧蒙版图像的渲染(只设置了一次 mask 而没有实时更新它),要实现实时的蒙版效果(如:与视频实时同步的蒙版效果),需要对弹幕动画的每一帧进行处理。
使用组件提供的 beforeRender 钩子函数,可以轻易的实现:
import Barrage from 'barrage-ui';
import example from'barrage-ui/example.json';
const barrage= newBarrage({
container:'barrage',
data: example,
beforeRender: (ctx, progress)=>{
const imageData= getMask(progress); //用于获取当前进度对应蒙版的方法
barrage.setMask(imageData);
},
});
当然,beforeRender 钩子也可以在弹幕初始化之后挂载:
import Barrage from 'barrage-ui';
import example from'barrage-ui/example.json';
const barrage= newBarrage({
container:'barrage',
data: example,
});
barrage.beforeRender= (ctx, progress) =>{
const imageData= getMask(progress); //用于获取当前进度对应蒙版的方法
barrage.setMask(imageData);
};
html 实现b站弹幕,可实现B站 蒙版弹幕 效果的前端组件 —— Barrage UI相关推荐
- 不挡脸,放肆看!揭秘B站黑科技蒙版弹幕
来源:AI前线 本文约2019字,建议阅读5分钟. 本文为你揭秘B 站推出的一种"不挡脸"的黑科技弹幕以及背后的故事. [ 导读 ]不久前,B 站发布一条官方消息,为了更好的提升用 ...
- python实现弹幕_python实现b站直播自动发送弹幕功能
基本开发环境 · Python 3.6 · Pycharm 相关模块使用 import requests import time from tkinter import * import random ...
- python爬取b站403_python3——爬取B站弹幕
在简书发现一篇有趣的文章:爬虫,走起,用Excel实现5min抓取B站弹幕及初步处理 讲到了如何根据开发者工具,获得B站视频的弹幕信息,不过有个不足就是手动保存弹幕信息.而通过python我们可以轻松 ...
- python b站自动评论_用语音识别+python自动发送弹幕,变成B站野生字幕君吧!
在B站观看视频的时候,有时候一些带有旁白但没有字幕的视频,会有野生字幕君出现,贴心的为视频加上字幕,大大提高了视频观感.不过手工加字幕是一件很麻烦的事,需要人工卡时间和听译打字.当一个懒人程序媛想当一 ...
- B站UP主指法芬芳张大仙弹幕爬取及可视化
文章目录 前言 一.爬取视频弹幕相关信息 1.B站弹幕接口 2.获取视频的cid 3.获取视频弹幕信息 二.弹幕数据可视化 1.弹幕内容可视化 -- 词云图 2.弹幕发送者可视化 -- 水平条形图 3 ...
- android 循环弹幕,Android中如何动态获取弹幕内容
最近在开发中,产品小哥哥说要做个弹幕,然后还要在弹幕走到屏幕中间时,在屏幕中间的位置显示出弹幕的内容(没见过这种奇葩的需求),既然拿到这个需求,那么我们就来看看如何解决这个问题. 首先,解决问题-&g ...
- B站在美上市 A站却为融资心塞
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 2018 区块链技术及应用峰会(BTA)·中国 倒计时1天 2018,想要 follow 最 ...
- 怎么在b站引流?b站怎么吸粉?b站引流技巧和方法
相信很多人都对B站有一定的了解,B站主要是提供二次元内容平台,现在流量越来越大,也衍生出了其他领域的内容.这里的转化效果还是挺不错的,人群质量也高.用户在哪里,我们就去哪里,这是作为一个需要流量的人经 ...
- X站全称是什么_B站课程排行榜,当代大学生最爱学什么?
"B站"全称哔哩哔哩(英文名称:bilibili)现为国内领先的年轻人文化社区,网站于2009年6月26日创建,现在被粉丝们亲切的称为"B站"或"小破 ...
- 卖书如何通过B站引流?方法用对后效果都不会太差
卖书如何通过B站引流?方法用对后效果都不会太差 首先,你肯定会想,B站能卖书吗?在B站卖书有人要吗?我的回答是那当然啦!虽然有很多的购物平台,书店(感觉现在已经慢慢衰败了).淘宝.当当.京东等等,那为 ...
最新文章
- linux下性能分析命令[总结]
- 阿里首次公开量子通信技术 为20年后做准备
- intel219网卡的linux驱动,ubuntu16.04安装I219-V网卡驱动问题解决方法(示例代码)
- python中的迭代库
- 【2】基于zookeeper,quartz,rocketMQ实现集群化定时系统
- python多线程理解
- Bmp格式与编程读取解析
- Windows下安装python2和python3双版本
- python交换两个值原理_python 两数交换新写法原理
- 测试苹果电脑性能软件xbench在哪,mac性能测试网址
- Tab Layout教程
- Loki搭建日志收集系统
- [笔记分享] [SD] 块设备驱动学习小结
- CF机器码怎么解-LOL机器码怎么改?(最详细教程CX)
- 15、ADS使用记录之耦合器设计
- Python学习3-层次聚类
- 2021-07-17
- linu系统中dhcp的搭建
- Unity初级案例-愤怒的小鸟:四:11解决重复划线和小鸟轮换速度突然变大的问题+12添加小鸟飞出的拖尾效果+13整合场景和解决无法显示划线弹弓的问题
- 1分钟部署单机版kubernetes 1.13.4