danmu-plugin

danmu-plugin

A danmu plugin which can be used in video tag

应用于H5的video标签的弹幕插件

背景介绍 (introduce)

看吃鸡直播的时候，突发奇想想实现一套适用于H5video的弹幕插件，对应的博客地址为弹幕插件的设计与实现，里面有实现的一些思路

依赖（dependence）

没有任何依赖，插件使用纯ES5语法编写，兼容各种浏览器

使用方法（usage）

• 使用require

npm install danmu-plugin --save
...
const Danmu = require('danmn-plugin');

• 引用js，Danmu类会被挂在到window对象上，调用new Danmu(selector, options)创建一个实例即可

<script src="../dist/danmu.min.js"></script>
<script type="text/javascript">
var danmuPlugin = new Danmu('danmu-plugin', { faskDanmu: true, faskDanmuSpace: 50 });
var danmuList = [];
for (var i = 0; i < 20; i++) {
  danmuList.push({});
}
danmuPlugin.updateDanmuList(danmuList);
</script>

参数列表（options）

参数	说明	默认值	可填值
height	轨道的高度	24	number
faskDanmu	是否开启弹幕追击模式，即速度快的弹幕如果不会覆盖到前面速度慢的弹幕，也会被添加进入轨道	false	true
faskDanmuSpace	追击模式下，弹幕的最小间距	0	number(比如100)
variety	弹幕插件应用于直播还是视频	'live'	'live' / 'video'(其他的输入值会被改为live)
clearScreen(live)	直播模式下选择关闭弹幕的时候是否清屏	false	true/false

API

暴露一些功能，可以让插件更加容易使用

updateDanmuList([{}]) 更新弹幕数组

一条弹幕的结构如下所示，下面4个参数都不输入也行，插件岁自动随机生成

{
    size: 18,
    color: '#FCF',
    content: '弹幕',
    speed: 60, //速度代表一秒移动多少px
    opacity: 1, //弹幕的不透明度
    timeStamp(视频模式下): 79, //代表在79s之后才需要被抛出道轨道
    isSuperDanmu: true/false //代表是否为超级弹幕，超级弹幕就是类似B站那种不滚动然后居中显示在所有弹幕上面的弹幕
}

openFaskDanmu(faskDanmu, faskDanmuSpace) 更新插件工作模式

参数	说明	可填值
faskDanmu	是否开始追击模式	true/false
faskDanmuSpace	追击模式下弹幕间距	number，默认为0

openDanmu() 打开弹幕插件开关

closeDanmu() 关闭弹幕插件开关

toggleDanmu() 转换弹幕插件开关

示例

可见 test.html，这里也给出一张示意图