Barrage

Web 端用户界面弹幕组件

弹幕组件的设计分为三种角色: 控制器 | 轨道 | 弹幕
控制器中存放了所有待播放弹幕数据, 当开始播放弹幕的时候, 控制器去寻找合适的轨道投放弹幕

文档

• 基本用法
• 数据类型
  • BarrageItem
  • BarrageConfig
• 配置选项
• 事件
• API

基本用法

1. 通过 npm 或 yarn 安装，命令 npm install h-barrage 或 yarn add h-barrage

2. 创建一个容器，这个容器必须要有宽度和高度

<div class="outer-container"></div>

.outer-container {
  width: 100%;
  height: 100%;
}

3. 引入弹幕样式，准备数据（这里使用组件提供的示例数据），创建 barrage

import { Barrage } from "h-barrage";
import "h-barrage/dist/barrage.css";
import example from "h-barrage/data.json";

const barrage = new Barrage({
  container: document.querySelector(".outer-container"),
  data: example,
});
barrage.play();

数据类型

BarrageItem 弹幕数据

export interface BarrageItem {
  // 唯一Key
  key: string;
  // 文字
  text: string;
  // 速度
  speed?: number;
  // 颜色
  color?: string;
  // 字体大小
  fontSize?: string;
  // 创建时间
  createdAt?: string;
}

BarrageConfig 弹幕全局配置

export class BarrageConfig {
  // 字体大小
  fontSize?: string = '20px';
  // 字体默认颜色
  defaultColor?: string = '#000';
  // 使用随机颜色
  useRandomColor?: boolean = false;
  // 轨道数量
  trackNumber?: number = 3;
  // 轨道高度
  trackHeight?: number = 40;
}

配置选项

配置项	类型	默认值	说明
container	DOM		弹幕容器
data	BarrageItem[]	[]	弹幕数据
config	BarrageConfig	-	弹幕全局配置

事件

事件名	触发时机
dataChange	当弹幕数据发生变化的时候触发
destroy	销毁实例时触发

API

函数名	作用
play	开始播放弹幕
pause	暂停播放
continue	暂停之后继续播放
addData	添加弹幕数据
on	监听事件
off	取消监听事件
destroy	销毁实例