tcplayer-barrage-plugin v0.0.4

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. 弹幕管理器成员函数

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

- 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'
},];
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);
});