# danmu

barrage plugin。SourceCode

pluginName: danmu

Function Points

1. send barrage in real time
2. support the configuration and settings of barrage speed, display time, open/pause barrage, etc.
3. the button to close/open barrage

usage

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

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

# config

# comments

• @type: Array<Comment> initial barrage list
• default: []

The data format of the barrage item is as follows:

const comments = [{
  duration: Number,         // barrage display time, Unit is `ms`(The minimum is 5000 ms)
  id: String,
  start?: Number,           // Barrage appearance time, Unit is `ms`
  prior?: Boolean,          // Whether the barrage is displayed first，default false
  color?: Boolean,          // The barrage is a color barrage, default false
  txt: String,              // Barrage text content
  style?: {                 // Barrage custom style
    color?: String,         // E.g：'#ff9500',
    fontSize?: String,      // E.g：'20px',
    padding?: String        // E.g： 2px 11px',
  },
  /**
   * Display mode, default is `scroll`
   * `top`- Top center
   * `bottom`- Bottom center
   * `scroll`- Scroll display
   */
  mode?: String,
  like?: {                 // Like parameter
    el: HTMLElement,       // Only support dom
    style?: {              // Binding style
      paddingLeft: String, //E.g: '10px',
      color: String        //E.g:'#ff0000'
    }
  }
},
...]

# area

• @type: { { start: Number, end: Number} }
• default: { start: 0, end: 1}, Full screen display

Barrage display area

Start at the top 1/2 of the player area, config:{ start: 0, end: 0.5}

Start at the bottom 1/2 of the player area, config:{ start: 0.5, end: 1}

# closeDefaultBtn

• @type: Boolean
• default: false

Whether to hide the barrage control button，When configured as true, the barrage switch button will not be displayed

# defaultOff

• @type: Boolean
• default: false

Whether to close the initialization barrage

# defaultOpen

• @type: Boolean
• default: true

Whether to open the barrage by default

# isLive

• @type: Boolean
• default: false

Whether it is live broadcast，ifplayer.config.isLiveis true, this value is true too

# channelSize

• @type: Number
• default: 24

Barrage track size, default 24px

# fontSize

• @type: Number
• default: 14

The font size of the barrage, the default is 14px

# opacity

• @type: Number
• default: 1

Transparency of barrage

# style

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

Default style of barrage

# API

# sendComment(comment)

• @desc: send a barrage
• @param:{Comment} comment, See the data formatconfig.comments

# start()

• @desc: Open barrage

# stop()

• @desc: Close barrage

# clear()

• @desc: Clear barrage pool data

# setCommentDuration(id, duration)

• @desc: Change the display time of a barrage according to id

# setAllDuration(mode, duration)

• @desc: Change the display time of all the bullet screens that have been added to the queue

# setCommentID(oldID, newID)

• @desc: Change the id of a barrage

# hideMode(mode)

• @desc: Hide a certain type of barrage
• @param:{ String } mode, scroll | top | bottom | color

# showMode(mode)

• @desc: Show a certain type of barrage
• @param:{ String } mode, scroll | top | bottom | color

# setArea(area)

• @desc: modify the barrage display area
• @param:{ { start: Number, end: Number} } area

# setOpacity(opacity)

• @desc: set transparency
• @param:{ Number } opacity

# setFontSize(size, channelSiz)

• @desc: set font and channel size
• @param:{ Number } size
• @param:{ Number } channelSiz