A danmu plugin which can be used in video tag
应用于H5的video标签的弹幕插件
看吃鸡直播的时候,突发奇想想实现一套适用于H5video的弹幕插件,对应的博客地址为弹幕插件的设计与实现,里面有实现的一些思路
没有任何依赖,插件使用纯ES5语法编写,兼容各种浏览器
- 使用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>
参数 | 说明 | 默认值 | 可填值 |
---|---|---|---|
height | 轨道的高度 | 24 | number |
faskDanmu | 是否开启弹幕追击模式,即速度快的弹幕如果不会覆盖到前面速度慢的弹幕,也会被添加进入轨道 | false | true |
faskDanmuSpace | 追击模式下,弹幕的最小间距 | 0 | number(比如100) |
variety | 弹幕插件应用于直播还是视频 | 'live' | 'live' / 'video'(其他的输入值会被改为live) |
clearScreen(live) | 直播模式下选择关闭弹幕的时候是否清屏 | false | true/false |
暴露一些功能,可以让插件更加容易使用
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,这里也给出一张示意图