今天给小伙伴们分享一款超棒的实现B站蒙版弹幕前端组件BarrageUI。

barrage-ui 一款免费开源的适用于web端用户界面及播放器的轻量级弹幕组件。基于Canvas实现，无第三方依赖。

特性

• 一切皆可“弹幕”化，可用于给网页上任何元素挂载弹幕评论；
• 简单+自由，项目开源化，无第三方依赖，可自由进行项目开发；
• 可定制+高扩展，可精确定义每一帧，快速实现B站蒙版弹幕效果；

用途

• 可给网页上的视频播放器、图片浏览器等元素装载弹幕动画
• 可用于实现B站风格的“蒙版弹幕”效果

安装

$ npm i barrage-ui -S

快速使用

<!-- HTML -->
<div id="barrageID">
  <video id="video" src="assets/demo.mp4" controls></video>
</div>

<!-- JS -->
import Barrage from 'barrage-ui'
import mockData from 'barrage-ui/example.json'; // 引入组件demo数据

// 挂载弹幕
const barrage = new Barrage({
  container: document.getElementById('barrageID'), // 弹幕容器或ID
  data: mockData, // 弹幕数据
  config: {
    // 配置项
    duration: 20000,
    fontFamily: 'Microsoft Yahei',
    defaultColor: '#fff',
  },
});

// 新增一个弹幕
barrage.add({
  key: 'pim931a6pm1j90bia4j',
  time: 1200,
  text: '新增一条弹幕内容数据',
  fontSize: 32,
  color: '#ff0',
});

// 播放弹幕
barrage.play();

参数配置

在 new Barrage({ ...options }) 创建弹幕实例时，需要传入的初始化参数。

其中，container 参数在初始化实例时必传，其他参数为可选。

弹幕数据字段

{
  key: 'fctc651a9pm2j20bia8j',
  createdAt: '2019-01-13T13:34:47.126Z',
  time: 1200,
  text: '我膨胀了',
  fontFamily: 'SimSun',
  fontSize: 32,
  color: 'yellow',
  avatar: '/images/avatar.png',
  avatarSize: 32,
  avatarMarginRight: 8,
}

文档提供了丰富的API及演示例子。

非常不错的一款开源web端蒙版弹幕组件，需要的同学不可错过哈！

最后附上文档及项目地址链接。

# 文档地址
https://barrage-ui.netlify.app/

# 示例地址
https://masking-danmaku-demo.netlify.app/

# 仓库地址
https://github.com/parksben/barrage

好了，就分享到这里。如果大家有其它弹幕组件，欢迎一起交流讨论！