引入
const { createBulletchat } = require('@/assets/bullchat/bullchat.js');
基础使用
const box = ref<HTMLVideoElement | null>(null); // 弹幕位置
const video = ref<HTMLVideoElement | null >(null); //视频元素
const Switch = ref<HTMLButtonElement | null>(null); // 视频开关按钮
createBulletchat({
domEle:{
target : '#xxx', //id名字 或 元素节点 必须 或在 mount('id名')
video:video, //id名字 或 视频元素节点
switch:Switch //id名字 或 视频元素节点
},
data(){
return data // 可以 data 或 data(){return [] } 可以是ref([]) 或 reactive([]);
},
initAttr:{
//基础属性设置 及 定义好的函数方法调用
},
mounted:{
// 自定义函数方法
f2(){
console.log(this)
}
}
}).mount(box)
initAttr：{
// 自定义弹幕动画
customBulletchatAnimate(obj:any){
console.log(this) // 索引属性方法挂载到this
console.log(obj)
bulletchatInit : {
userText : '',
userName : '',
userTextColor :'', //颜色值 可以写默认白色
userNameColor : '', //颜色值 可以写默认白色
userTextlen: 0, // 可写 userText.length
line: 0 , //在第几行显示
style: 设置样式 ，该有单位的必须写单位
},
// 设置基础信息方法
const {bulletchatInit } = obj;
bulletchatInit.userText = '我的', // 这块必须这样写
bulletchatInit.userName = 'djfgkd',
bulletchatInit.userTextlen = bulletchatInit.userText.length; //这条可以不写默认 值为0 bulletchatInit.line = 0 ;
obj.animate(); //直接调用就行
},
}
initAttr:{
// 自定义弹幕内容的颜色
bulletChatContentColorResult(obj:any){
obj.userTextColor = "red";
obj.userNameColor = "dddd";
return obj;
}
}
initAttr:{
bulletChatResultFunction(obj:any){
console.log(this);
}
}
mounted:{
// // 自定义方法 和 属性设置 ,建议在initAttr写 直接挂载在this，再执行
f2(){
console.log(this)
}
}
第一种数据格式这样
data(){
return ref([
{
userText:'xxx1',
userName:'牛二',
time:1
},
{
userText:'xxx2',
userName:'牛二',
time:5
},
{
userText:'xxx3',
userName:'牛二',
time:10
},
{
userText:'xxx4',
userName:'牛二',
time:15
},
{
userText:'xxx5',
userName:'牛二',
time:20
},
])
},
需要简单设置就行
this.setBulletChatBool = true; // 控制弹幕开关 ， 这样开启
this.animateAuto = true; // 使用默认弹幕方法
第二种数据格式这样
data(){
return ref([
{
Text:'xxx1',
Name:'牛二',
time:1
},
{
Text:'xxx2',
Name:'牛二',
time:5
},
{
Text:'xxx3',
Name:'牛二',
time:10
},
{
Text:'xxx4',
Name:'牛二',
time:15
},
{
Text:'xxx5',
Name:'牛二',
time:20
},
])
},
只需简单设置行
initAttr:{
this.dataUserText = 'Text';
this.dataUserName = 'Name';
this.setBulletChatBool = true; // 控制弹幕开关 ， 这样开启
this.animateAuto = true; // 使用默认弹幕方法
}
一下针对每条弹幕设置 ，
必须再 bulletChatResultFunction 这个函数调用 ，否则可能会出问题
//设置字体颜色自定变化
this.randomAutoColor(ele)
//随机显示位置
this.randomeSeat(ele)
//随机字体尺寸 需要根据需要设置随机尺寸范围 setRandomFontSize:{MaxSize：0，MinSize：0}
this.randomFontSize(ele)
//文字尺寸自动变大变小 需要根据需要设置随机尺寸范围 setFontSizeAutoRange:{maxSize:0,minSize:0}
this.fontSizeAuto(ele)
//随机颜色 如需要指定范围 setSpecifyRandomColorArray:[] 不设置纯随机
this.fontColor(ele)
//指定范围随机完成时间 根据需要根据setBulletChatRandomTimeRange:{MaxTime:0,MinTime:0}
this.BulletCharCreateEndTime()
//自动旋转
BulletChatAutoRotate(ele)
* domEle ：{ ... }
* target 弹幕显示位置
* video 视频元素 dom
* switch 弹幕开关按钮
* data: 弹幕数据
* init:{...}
* setBulletChatBool 设置弹幕开关 默认false 弹幕关闭
* setScreenScaleX 设置屏幕宽度比例默认1
* setScreenScaleY 设置屏幕高度比例默认1
* setScreenPosition 设置弹幕屏幕坐标位置 默认{top:0,right:0}
* setBulletchatCenter 设置屏幕尺寸是否居中 默认false;
* setScreenDirction 设置屏幕旋转方向或旋转角度 默认 'right';
* customBulletchatAnimate 自定义弹幕动画
* unit 尺寸单位 默认'px'
* fontSize 默认16 px
* lineHeight 默认 100% ，如果设置必须加单位 或者%号
* height 默认 30 px
* Color 设置字体颜色 默认 #fff
* style 设置弹幕样式 //该有单位的必须点击单位
* 针对每条弹幕的
* bulletChatContentColorResult 自定义弹幕显示内容颜色 默认null 回调函数
* bulletChatStyleResult 自定义弹幕显示样式 默认null 回调函数
* setBulletChatAutoRotateSeed 设置弹幕选择速度默认 5 相当于角度
* setBulletChatRandomTimeRange 设置弹幕随机完成时间范围 默认 {MaxTime:50000,MinTime:20000}
* setFontSizeAutoRange 设置字体尺寸随机变化范围 默认 { maxSize : 30 ,minSize:10};
* setRandomFontSize 设置随机字体尺寸范围 默认 {MaxSize:30,MinSize:10};
* setRandomFontColorAutoTime 设置每条弹幕自动变化时间 多久变化一次 500 默认毫秒
* setBulletchatRandomPositionBool 默认false ，是否开启弹幕随机位置设置
* setSpecifyRandomColorAutoBool 指定范围的字体颜色自动变化开关 默认false
* setSpecifyRandomColorArray 设置指定反复的字体随机颜色
* setBulletCharAngle 设置弹幕旋转角度 默认0 可设置 0-360
* setBulletChatInitSeat 设置弹幕初始位置 {top：0 ，right:0}
* setBulletChatInitDirction 初始移动位置 默认 'right'
* setSrtDeferredTime 设置弹幕每个字符的 移动一格字符位置所需时间 默认 0
* setBulletChatEndTimeSeepBool 默认false ，设置弹幕运行时间是否根据弹幕越长移动速度越慢
* setBulletChatEndTime 设置每条弹幕完成时间 默认50000毫秒
* lineSpacing //设置行距 默认10 行距以px计算
* index 默认0 数据索引 建议不要更改
* 默认执行弹幕设置
* animateAuto 默认 false 是否执行默认弹幕显示设置
* time 设置根据视频默认时间显示弹幕的时间
* line 弹幕显示行数 默认0
* MaxBool 设置弹幕最大行数是否从大到小 或 从小到大 默认false 从小到大
* MaxLine 设置最大行数 默认1
* videoBulletchatTimeBool 设置是否根据视频播放时间显示弹幕 前提弹幕数据每条 都有显示的时间 默认false
* setBulletchatTime = 5000; 设置弹幕显示时间
* this.userText = '';
* this.userName = '';
* this.userTextColor = null;
* this.userTextlen = 0;
* this.style = null;
* dataUserText 默认 'userText';
* dataUserName 默认 'userName';
* dataLine 默认 'line' ;
* dataTime 默认 'time';
* dataStyle 默认 'style';
* dataUserTextColor 默认 'userTextColor';
* dataUserNameColor 默认 'userNameColor';
*
* * // 设置弹幕运动方式
* setBulletchatMotion 默认 'linear'
* 可以设置的值
* linear 匀速
* easeIn 加速曲线
* easeOut 减速曲线
* easeBoth 加速减速曲线
* easeInStrong 加加速曲线
* easeOutStrong 减减速曲线
* easeBothStrong 加加速减减速曲线
* elasticIn 正弦衰减曲线（弹动渐入）
* elasticOut 正弦增强曲线（弹动渐出)
* elasticBoth
* backIn 回退加速（回退渐入）
* backOut
* backBoth
* bounceIn 弹球减振（弹球渐出）
* bounceOut
* bounceBoth
*