# danmu

弹幕插件。源码

pluginName: danmu

实现功能

1. 实时发送弹幕
2. 支持弹幕速度、显示时长、打开/暂停弹幕等配置和设置
3. 弹幕关闭/打开按钮

使用方式

import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import Danmu from 'xgplayer/es/plugins/danmu'
import 'xgplayer/es/plugins/danmu/index.css'

const player = new Player ({
  ...,
  plugins: [..., Danmu],
  danmu: {
    comments:[...],
    ext: {
      ...
    }
    ...
  }
})

# config

# comments

• @type: Array<Comment> 初始弹幕列表
• default: []

弹幕项的具体格式如下:

const comments = [{
  duration: Number,         //弹幕持续显示时间,毫秒(最低为5000毫秒)
  id: String,               //弹幕id，需唯一
  start?: Number,           //弹幕出现时间, 单位：ms 毫秒
  prior?: Boolean,          //该条弹幕优先显示，默认false
  color?: Boolean,          //该条弹幕为彩色弹幕，默认false
  txt: String,              //弹幕文字内容
  style?: {                 //弹幕自定义样式
    color?: String,         //例：'#ff9500',
    fontSize?: String,      // 例：'20px',
    padding?: String        //例： 2px 11px',
  },
  mode?: String,           // 例：'top', 显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
  like?: {                 // 点赞相关参数
    el: HTMLElement,       // el 仅支持传入 dom
    style?: {              // el 绑定样式
      paddingLeft: String, //例：'10px',
      color: String        //例：'#ff0000'
    }
  }
},
...]

# area

• @type: { { start: Number, end: Number} }
• default: { start: 0, end: 1}, 全屏显示

弹幕显示区域，start：区域顶部到播放器顶部所占播放器高度的比例；end：区域底部到播放器顶部所占播放器高度的比例

例如：播放器区域在顶部1/2开始，配置:{ start: 0, end: 0.5}；播放器区域在底部1/2，配置:{ start: 0.5, end: 1}

# closeDefaultBtn

• @type: Boolean
• default: false

是否隐藏弹幕开关按钮，设置为true时不显示开关按钮

# defaultOpen

• @type: Boolean
• default: true

是否默认开启弹幕，设置为false时不开启弹幕

# isLive

• @type: Boolean
• default: false

是否是直播，直播弹幕为消费型，默认为false；如果播放器配置isLive参数为true，则该配置设置无效（默认为true）

# channelSize

• @type: Number
• default: 24

弹幕轨道高度尺寸，默认24px

# fontSize

• @type: Number
• default: 14

弹幕默认字体大小，默认14px

# opacity

• @type: Number
• default: 1

弹幕透明度设置，默认1

# style

• @type: { {[propName: string]: any} }
• default: {}

弹幕默认样式

# ext

• @type: { {[propName: string]: any} }
• default: {}

danmu.js 其它配置通过该对象进行配置

# API

# sendComment(comment)

• @desc: 发送单条弹幕
• @param:{Comment} comment, 数据格式见config.comments中单条对象结构

# updateComments(comments, isClear)

• @desc: 更新所有弹幕
• @param:{Array<Comment>} comments, 数据格式见config.comments中单条对象结构
• @param:{boolean} isClear, 更新的同时是否清除当前未显示完成的弹幕

# start()

• @desc: 打开弹幕

# stop()

• @desc: 关闭弹幕

# clear()

• @desc: 清除弹幕池数据

# setCommentDuration(id, duration)

• @desc: 按照id改变某一个弹幕的持续显示时间

# setAllDuration(mode, duration)

• @desc: 改变所有已加入队列弹幕的持续显示时间

# setCommentID(oldID, newID)

• @desc: 改变某一个弹幕的id

# hideMode(mode)

• @desc: 隐藏某一类弹幕
• @param:{ String } mode, scroll | top | bottom | color

# showMode(mode)

• @desc: 显示某一类弹幕
• @param:{ String } mode, scroll | top | bottom | color

# setArea(area)

• @desc: 修改弹幕显示区域
• @param:{ { start: Number, end: Number} } area

# setOpacity(opacity)

• @desc: 设置透明度
• @param:{ Number } opacity

# setFontSize(size, channelSiz)

• @desc: 设置字体和轨道尺寸
• @param:{ Number } size
• @param:{ Number } channelSiz

# showIcon

• @desc: 显示弹幕切换按钮

# hideIcon

• @desc: 隐藏弹幕切换按钮