弹幕组件

1、核心代码

案例地址:

1、http://cf.qq.com/act/a20160608gun/

2、http://tgideas.qq.com/act/a20151218derekdemo/danmu/m_danmu.html

<!-- <scriptsrc="http://game.gtimg.cn/images/js/jquery/jquery-1.11.3.min.js"></script>

<script src="http://game.gtimg.cn/images/js/zepto/zepto.min.js"></script> -->

 

//引入弹幕组件

<script src="http://game.gtimg.cn/images/js/su/danMu.beta.min.js"></script> 

 

//实例化弹幕

var dm = new danMu({

    device:'m',

    stage: $(".danmustage"),

    comments: danmuData,

    danMuHtml: "<span>{comment}</span>",

    colors: ["#fff","#00ccff","#ff0000","#00ff00","#fef500"],

    flyTime:7000, 

    timeInterval:1200,

    randomSort:true

});



 2、参数/方法说明

参数/方法

名称

类型

默认值

描述

参数

device

string

'pc'

设备是pc端还是移动端,'pc'代表pc端弹幕,'m'代表移动端弹幕

参数

stage

object

$(".danmustage")

弹幕舞台/容器

参数

comments

array

[]

弹幕初始数据

参数

colors

array

['#fff']

弹幕随机颜色数组

参数

danMuHtml

string

''

普通弹幕html模板;

{userId}代表弹幕所属用户唯一标识属性值;

{comment}代表弹幕内容;

html模板中支持出现多个{userId}{comment}

参数

alwaysDanMuHtml

string | array

''

一直在舞台垂直居中位置出现的弹幕html模板(例如上面第二个demo的“TGideas弹幕来袭”);不设置或设置为''代表没有

参数

danMuClassName

string

'danmu'

普通弹幕className

参数

myDanMuClassName

string

'mydanmu'

我发送的普通弹幕className

参数

alwaysDanMuClassName

string

'alwaysdanmu'

一直在舞台垂直居中位置出现的弹幕className

参数

mAnimation

string

'transform'

移动端弹幕动画类型;

'transform':代表采用css3transform:translate3d(x,y,z);页面性能好,动画效果十分流畅;

'left':代表采用css3transition:left;来过渡,性能差,动画效果有卡顿

参数

hSpacing

number

0.2

普通弹幕间最小高度间距是弹幕本身高度的几倍

参数

flyTime

number

10000

弹幕飞行时间,越大速度越慢

参数

timeInterval

number

3000

播放下一条普通弹幕的时间间隔

参数

alwaysLoopTime

number

10000

播放下一个舞台垂直居中弹幕的时间间隔

参数

randomSort

boolean

false

是否随机打乱初始弹幕数据

参数

loop

boolean

true

是否循环播放弹幕

参数

autoplay

boolean

true

是否自动播放弹幕

参数

mouseoverpause

boolean

true

是否鼠标上移悬停普通弹幕(只在pc端弹幕有效)

参数

awmouseoverpause

boolean

false

是否鼠标上移悬停舞台垂直居中弹幕(只在pc端弹幕有效)

参数

danMuOverAlwaysLoop

boolean

true

弹幕不循环播放的情况下,普通弹幕播放完毕,舞台垂直居中弹幕是否继续循环播放

参数

cookieName

string

'TGideasDanMu'

静态数据弹幕下,用户发布的弹幕存入本地cookiecookie名称;设为''代表不存入cookie,也不从cookie中读取用户以前发布的弹幕数据

参数

cookieExp

number

3650

cookie过期时间(单位:天),仅在静态数据弹幕下,用户发布弹幕存于cookie时有效

参数

localDanMuRandomInsert

boolean

true

初始化弹幕时,存于本地cookie的弹幕数据是否随机插入到弹幕中

参数

localDanMuNotRandomIndex

number

3

表示从第几条开始播放本地cookie中的弹幕,仅在上一个参数设置为false时有效

参数

localDanMuHasMyStyle

boolean

false

本地cookie中的弹幕是否拥有'我发布的弹幕'样式,即mydanmu样式

参数

appendRepeat

boolean

false

静态弹幕追加弹幕数据,弹幕内容是否可重复

参数

myDanMuPrefix

string

'我:'

我发送弹幕时,显示在弹幕内容前面的前缀

参数

uniqueTagName

string

''

每条弹幕数据用户的唯一标识属性名称。仅在动态弹幕下,且需要区分每条弹幕的用户(如显示用户id、展示用户头像等),才需设置

参数

userId

string | number

''

代表当前用户的唯一标识属性值。仅在上一个参数有设置的情况下,才需设置

参数

showMyStyle

boolean

false

在动态弹幕下,除了用户当前发送的弹幕外的其他弹幕,如果用户标识也是当前用户,是否要显示'我的弹幕'样式,即mydanmu样式

参数

submitSuccessCallback

boolean

false

在动态弹幕下,该参数用于在发布弹幕时的成功回调方法里面,代表是否等到ajax提交弹幕数据到后台成功之后才置sendStatustrue

参数

aDanMuCreated

function

function(){}

每一条弹幕创建完毕的回调方法,该方法在弹幕进入舞台之前执行的。例如:function(index, el, className){...}

index:弹幕索引

el:弹幕dom

className:弹幕className

参数

distanceToStage

number

50

每个弹幕初始位置在弹幕舞台的右侧加上多少像素,50代表50px

参数

sendIfStopTips

string

'弹幕已经暂停或关闭,不能发布!'

如果当前弹幕已经暂停或关闭的话,发布弹幕会失败,且会有这个提醒

参数

sendIfFastTips

string

'您发布弹幕的速度太快了,请歇一会!'

如果用户发送弹幕的速度太快的话,发布弹幕会失败,且会有这个提醒

参数

direction

string

'h'

设置水平弹幕或垂直弹幕。

'h'代表水平弹幕;

'v'代表垂直弹幕

参数

preventingXSS

boolean

true

是否在用户使用send()方法发送弹幕时防御DomXSS,默认为true

参数

hSpacingFixed

boolean

false

上下两条弹幕的高度间距是否固定。默认为false,代表高度间距是随机不固定的

方法

send(data,callback)

-

-

用户发送弹幕方法。

data:【必选】一条弹幕的内容,类型string

callback(cval):【可选】发送弹幕成功的回调方法,类型function。其中参数cval为防御DomXSS后弹幕的最终文本

方法

triggerSend(params,callback)

-

-

前端开发同学模拟用户发送普通弹幕方法。

params:【必选】API调用的参数,类型object,含有3个属性,分别为datasendidinsert

params.data:【必选】一条弹幕的内容,类型string(当uniqueTagName为空时)或object(当uniqueTagName不为空时,data格式为{'comment':'',uniqueTagName:''}

params.sendid:【可选】模拟用户发送普通弹幕时,每条弹幕添加的标识号(不同弹幕的标识号可以相同),在aDanMuCreated参数方法中会抛出每条弹幕的el,我们通过$(el).data('sendid')即可获得我们模拟弹幕设置的sendid,类型stringnumber

params.insert:【可选】代表模拟用户发送的普通弹幕是否存入普通弹幕集合的数组中,用于looptrue的弹幕下次循环时播放显示,默认不存入数组,类型boolean

callback():【可选】发送弹幕成功的回调方法,类型function

注:在send方法中,如果用户发送弹幕过快会给予提示;在triggerSend方法中则不会提示发送弹幕过快。

方法

append(data,callback)

-

-

追加弹幕方法。

data:【必选】弹幕数组,类型array

callback():【可选】追加弹幕成功的回调方法,类型function

方法

pause(callback)

-

-

暂停弹幕方法。

callback():【可选】暂停弹幕成功的回调方法,类型function

方法

play(callback)

-

-

播放弹幕方法。

callback():【可选】播放弹幕成功的回调方法,类型function