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);

};