## TcplayerBarragePlugin

腾讯云点播超级播放器 Tcplayer 的弹幕插件。

TcplayerBarragePlugin 结合 Tcplayer 使用，提供操作弹幕的能力。

### 1. 接入方式

插件通过 npm 形式集成弹幕功能：

```
// 安装 TcplayerBarragePlugin
npm install --save tcplayer-barrage-plugin
```

在业务侧代码中引入插件暴露的弹幕构造函数 TcplayerBarragePlugin 后，进行实例化即可使用弹幕相关功能

```
// 引入 TcplayerBarragePlugin
import TcplayerBarragePlugin from 'tcplayer-barrage-plugin';

// 初始化播放器实例
const player = new TCPlayer('player-container-id', opt);
// 实例化弹幕管理器，并通过管理器对弹幕进行操作
const tcplayerBarrage = new TcplayerBarragePlugin(player);

```

### 2. 弹幕管理器成员函数

| 名称   | 说明                                           |
| ------ | ---------------------------------------------- |
| init   | 初始化弹幕管理器                               |
| start  | 开始移动弹幕，或者在暂停弹幕后重新开始移动弹幕 |
| stop   | 暂停弹幕                                       |
| clear  | 清除屏幕内的弹幕                               |
| load   | 加载弹幕列表                                   |
| insert | 把弹幕插入弹幕列表                             |
| send   | 立即发送弹幕                                   |
| time   | 设置当前时间轴时间                             |

### 3. 接口详情

### - init

初始化弹幕管理器。初始化管理器默认播放状态是未播放，需要单独通过 `start()` 启用。

rendererType 决定了渲染引擎类型，默认为CSS3渲染:

- `css`: CSS3 transition
- `svg`: SVG Animation
- `canvas`: Canvas
- `legacy`: DOM + Timer

```
init(rendererType:string = 'css'):void;
```

### - start

开始移动弹幕，进入播放状态，或者在暂停弹幕后重新开始移动弹幕。播放时调用无作用。

```
start():void;
```

> 注意：在播放状态未非播放时，调用 `send()`发送的弹幕会加入 runline，在start之后一并开始移动。 有时这种表现是你不希望的，可以通过 `clear()` 清除运行列表。

### - stop

暂停弹幕，运行中的弹幕将会暂停，不会被清除。暂停时调用无作用。

```
start():void;
```

### - clear

```
clear():void;
```

清除弹幕，清除正在运行的媒体画面上的所有弹幕（运行列表 runline 里的）。不清除 timeline。

### - load

载入一些抽象弹幕对象，这些弹幕对象不必排序，管理器会自动根据 `stime` 进行排序

```
load(timeline:Array<BarrageData>):void;
```

##### BarrageData : Object

| 名称  | 类型   | 说明                                                         |
| ----- | ------ | ------------------------------------------------------------ |
| text  | string | 文字，例：'Hello World'                                      |
| mode  | number | 类型，用于控制弹幕布局：<br /><br />1 - 上端滚动弹幕；<br />2 - 下端滚动弹幕；<br />3 - 底部弹幕；<br />4 - 顶部弹幕；<br />5 - 逆向弹幕； |
| stime | number | 开始时间，单位为ms，例：在视频播放1s后进入的弹幕， 对应的`stime`属性是`1000` |
| size  | number | 字号大小，合理的大小范围在4 - 512 之间，可以任何数字。<br />字号大小和名称对应参考说明如下：<br /><br />12 - 非常小；<br />16 - 特小；<br />18 - 小；<br />25 - 中；<br />36 - 大；<br />45 - 很大；<br />64 -特别大； |
| color | string | 颜色，例：#FFFFFF                                            |
| scale | number | 生命时间加成。数值为1，弹幕保持初始存在时长，数值越小，存在时间越短，数值越大，存在时间越久 |


### - insert

把弹幕插入弹幕列表（时间轴）。插入会动态调整目前的位置。`insert` 不会立刻输出弹幕而是按照`stime` 把弹幕放到正确的位置。如果希望立刻输出弹幕，请使用`send`。

```
insert(data:BarrageData):void;
```

### - send

把一个抽象弹幕数据对象 `BarrageData` 放入运行列表中并立即输出。

```
send(data:BarrageData):void;
```

### - time

更新目前的时间轴（timeline）时间。管理器会自动处理时间前进和后退的情况，包括在需要时清除屏幕上正再运行的弹幕。 这里的`currentTime`是绝对时间，对应弹幕的 `stime`。时间单位是毫秒（ms）。

```
 time(currentTime?:number):void;
```

### 4. 完整示例：

```
// 引入 TcplayerBarragePlugin
import TcplayerBarragePlugin from 'tcplayer-barrage-plugin';
// 初始化播放器实例
const player = new Tcplayer('player-container-id', options);
// 初始化弹幕管理器
const tcplayerBarrage = new TcplayerBarragePlugin(player);
tcplayerBarrage.init();

// 场景一：加载弹幕列表，通常可配合后端通过接口加载
const timeLine = [{
  "mode": 1,
  "text":" Hello World",
  "stime": 2000,
  "size":  25,
  "color": '#FFFFFF'
}, {"mode": 1,
  "text": "Hello World",
  "stime": 4000,
  "size": 25,
  "color": '#FFFFFF',
  "scale": 1.5,
},];
tcplayerBarrage.load(timeLine);
tcplayerBarrage.start();

// 场景二：用户输入并发送弹幕
document.getElementById('send').addEventListener('click', function(e){
  e.preventDefault();
  var barrage = {
    "mode":1,
    "text": document.getElementById('danmu-input').value,
    "size": 30,
    "color":'#ff0000',
  };
  // 即时发送弹幕
  tcplayerBarrage.send(barrage);
});
```