bullchat
v3.2.1
Published
基于vue3，简化视频弹幕逻辑代码，也支持自定义弹幕动画效果，视频播放时间以秒计算，修复已知bug，减少逻辑代码操作
Readme
一、基本结构
新增用户图标
引入
const { createBulletchat } = require('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 //弹幕控制开关
//还可条件自定义元素节点
},
data(){
return data // 可以 data 或 data(){return [] } 可以是ref([]) 或 reactive([]);
},
initAttr:{
//基础属性设置 、 定义好的函数方法在这里写函数逻辑
//也可自定义函数方法，这里写的不立即执行
},
mounteds:{
// 自定义函数方法，并立即执行
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);
}
}五、自定义函数方法直接执行
mounteds:{
// // 自定义方法 和 属性设置 ,建议在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.prototypeFunction
//设置字体颜色自定变化
this.randomAutoColor(ele)
//随机字体尺寸 需要根据需要设置随机尺寸范围 setRandomFontSize:{MaxSize：0，MinSize：0}
this.randomFontSize(ele)
//文字尺寸自动变大变小 需要根据需要设置随机尺寸范围 setFontSizeAutoRange:{maxSize:0,minSize:0}
this.fontSizeAuto(ele)
//随机颜色 如需要指定范围 setSpecifyRandomColorArray:[] 不设置纯随机
this.fontColor(ele)
//自动旋转
BulletChatAutoRotate(ele)八、基本文档说明
domEle ：{
target 弹幕显示位置 这个必须有
video 视频元素 dom 根据情况，如果不需要根据视频播放时间显示弹幕可以不传
switch 弹幕开关控制按钮
//可自行添加dom元素，以上最基本额
},
data: 弹幕数据 ,
init:{
//弹幕开关
setBulletChatBool 设置弹幕开关 默认false 弹幕关闭
//关于弹幕显示屏幕大小设置 及坐标
setScreenScaleX 设置屏幕宽度比例默认1
setScreenScaleY 设置屏幕高度比例默认1
setScreenPosition 设置弹幕屏幕坐标位置 默认{top:0,right:0}
setBulletchatCenter 设置屏幕尺寸是否居中 默认false;
setScreenDirction 设置屏幕旋转方向或旋转角度 默认 'right';
//弹幕初始位置
randomeSeatBool 默认 false 设置弹幕随机显示位置
// 如果不开启默认弹幕执行设置可自定义
customBulletchatAnimate 自定义弹幕动画
//关于弹幕基本样式设置
unit 尺寸单位 默认'px' 基本可以设置尺寸的以这个单位为准 ,比如你fontSize 16rem ,unit 单位还是 px ，就以px做单位
fontSize 默认16 px
lineHeight 默认 100% ，如果设置必须加单位 或者%号
height 默认 30 px
Color 设置字体颜色 默认 #fff
style 设置弹幕样式 //该有单位的必须点击单位
lineSpacing //设置行距 默认10 行距以px计算
//针对每条弹幕自定义设置
bulletChatContentColorResult 自定义设置弹幕显示内容颜色,这可设置颜色 回调函数
bulletChatResultFunction 自定义弹幕函数
//默认弹幕角度
setBulletCharAngle 设置弹幕旋转角度 默认0 可设置 0-360
//如果设置弹幕自动旋转，可设置旋转速度
setBulletChatAutoRotateSeed 设置弹幕旋转速度默认 5
//弹幕初始位置设置
setBulletChatInitSeat 设置弹幕初始位置 {top：0 ，right:0}
setBulletChatInitDirction 初始移动位置 默认 'right'
randomeSeatBool 默认false , 开启随机初始位置
//弹幕完成速度相关设置
setSrtDeferredTime 设置弹幕每个字符的 移动一格字符位置所需时间 默认 0
setBulletChatEndTimeSeepBool 默认false ，设置弹幕运行时间是否根据弹幕越长移动速度越慢
setBulletChatEndTime 设置每条弹幕完成时间 默认50000毫秒
setBulletChatRandomTimeRange 设置弹幕随机完成时间范围 默认 {MaxTime:50000,MinTime:20000}
BulletCharCreateEndTimeBool 默认 false; 是否开启弹幕随机完成时间
//其他一些功能设置
setFontSizeAutoRange 设置字体尺寸随机变化范围 默认 { maxSize : 30 ,minSize:10};
setRandomFontSize 设置随机字体尺寸范围 默认 {MaxSize:30,MinSize:10};
setRandomFontColorAutoTime 设置每条弹幕自动变化时间 多久变化一次 500 默认毫秒
setBulletchatRandomPositionBool 默认false ，是否开启弹幕随机位置设置
setSpecifyRandomColorAutoBool 指定范围的字体颜色自动变化开关 默认false
setSpecifyRandomColorArray 设置指定反复的字体随机颜色
//关门弹幕数据设置基础参数 如果自定义弹幕动画可不参考
index 默认0 数据索引 建议不要更改
// 关于用户图标
userPicWidth 默认50px 设置用户图标的宽度
userPicHeight 默认50px 设置用户图标的高度
默认执行弹幕设置
animateAuto 默认 false 是否执行默认弹幕显示设置
time 设置根据视频默认时间显示弹幕的时间
line 弹幕显示行数 默认0
MaxBool 设置弹幕最大行数是否从大到小 或 从小到大 默认false 从小到大
MaxLine 设置最大行数 默认1
randomLineBool 默认false ,开启随机行数 ，Maxline 必须大于1
videoBulletchatTimeBool 设置是否根据视频播放时间显示弹幕 前提弹幕数据每条 都有显示的时间 默认false
setBulletchatTime = 5000; 设置弹幕显示时间
userText 默认 '';
userName 默认 '';
userPic 默认''; 371
userTextColor 默认 null;
userTextlen 默认 0;
style 默认 null;
dataUserText 默认 'userText';
dataUserName 默认 'userName';
dataUserPic 默认 'userPic';
dataLine 默认 'line' ;
dataTime 默认 'time';
dataStyle 默认 'style';
dataUserTextColor 默认 'userTextColor';
dataUserNameColor 默认 'userNameColor';
//针对弹幕运动的整体效果 ， 不受 line 行数限制
randomInitMovePositionVerticalCoorBool 默认false ，开启弹幕随机初始运动方向的垂直坐标
screenProportion 默认1 设置弹幕在屏幕运动范围的比例
* * // 设置弹幕运动方式
* setBulletchatMotion 默认 'linear'
* 可以设置的值
* linear 匀速
* easeIn 加速曲线
* easeOut 减速曲线
* easeBoth 加速减速曲线
* easeInStrong 加加速曲线
* easeOutStrong 减减速曲线
* easeBothStrong 加加速减减速曲线
* elasticIn 正弦衰减曲线（弹动渐入）
* elasticOut 正弦增强曲线（弹动渐出)
* elasticBoth
* backIn 回退加速（回退渐入）
* backOut
* backBoth
* bounceIn 弹球减振（弹球渐出）
* bounceOut
* bounceBoth
//可定义属性 ，函数 ，函数不执行，需要调用
},
mounteds:{
//自定义函数 立即执行
}