tcplayer-barrage-plugin

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	类型，用于控制弹幕布局： 1 - 上端滚动弹幕； 2 - 下端滚动弹幕； 3 - 底部弹幕； 4 - 顶部弹幕； 5 - 逆向弹幕；
stime	number	开始时间，单位为ms，例：在视频播放1s后进入的弹幕， 对应的stime属性是1000
size	number	字号大小，合理的大小范围在4 - 512 之间，可以任何数字。 字号大小和名称对应参考说明如下： 12 - 非常小； 16 - 特小； 18 - 小； 25 - 中； 36 - 大； 45 - 很大； 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);
});