DanMuer.jsjs弹幕插件(原创)

所属分类:媒体-音频和视频

 1900  14  查看评论 (2)
DanMuer.jsjs弹幕插件(原创) ie兼容10

更新时间:2017/8/4 下午3:50:19

更新说明:修复了一些bug,调整了特效弹幕参数的数据结构,使数据看起来更加清晰,将时间曲线参数针对各个运动进行了分离,可定制化程度更高.

高级弹幕新的数据结构:

{
    //以下参数除颜色和type外都为Number类型,不带单位
    duration : 3000, //生存时间ms
    fillStyle : "#66ccff", //填充颜色
    strokeStyle : "#cccccc", //描边颜色
    pastTime : 0, //不用设置,默认为0
    type : "quad", //Tween时间曲线的类型,默认为"quad(二次方)",目前还有"cubic","quart","quint"三种
    //translate
    translate : {
        startX : 0, //起点x
        startY : 0, //起点y
        endX : 0, //终点x
        endY : 0, //终点y
        timing : "linear" //动画时间曲线,默认为linear,还有“easeIn”,“easeOut”,“easeInOut”
    },
    //scale
    scale : {
        startX : 1, //起始x轴缩放倍数
        startY : 1, //起始y轴缩放倍数
        endX : 1, //终点x轴缩放倍数
        endY : 1, //终点y轴缩放倍数
        timing : "linear"
    },
	//rotate
    rotate : {
        start : 0, //起始旋转角度
        end : 0, //终点旋转角度
        timing : "linear"
    },
    //skew
    skew : {
        startX : 0, //起始x斜切角度
        startY : 0, //起始y斜切角度
        endX : 0, //终点x斜切角度
        endY : 0, //终点y斜切角度
        timing : "linear"
    },
    //opacity
    opacity : {
        start : 1, //初始透明度
        end : 1, //终点透明度
        timing : "linear"
    }
}

DanMuer

本插件是一个弹幕发生器,利用HTML5 canvas + ES6来实现普通弹幕和高级弹幕发送。目前版本将从3.0.0开始。

相较于前两版来说,第三版性能更好,而且实现了播放器模块和弹幕模块的解耦,也就是说相比第二版,第三版 可以适用但不限于播放器,可用性更高,而且实现了高级弹幕的发送,未来将慢慢补齐更多的功能和代码重构,希望大家遇到什么BUG或者是某些合理的需求,请将反馈提交到本邮箱:454236029@qq.com || z454236029@gmail.com

兼容性

所有现代浏览器,IE10+ (IE除外),后面将会考虑写个IE用的兼容ES5版本

使用方法

1. 先准备一个容器元素:

<div id="danmuer-wrapper"></div>

2. 进行调用

var wrapper = document.getElementById("danmuer-wrapper"),options = {};
var DMer = DanMuer( wrapper, options); //调用插件,wrapper为包裹元素,options为初始设定
DMer.inputData({
   "text" : "我是弹幕",
   "type" : "slide"
}); //插入一条弹幕,如果想同时插入多条弹幕可以用循环输入
DMer.start(); //运行

调用方法

调用接口非常的简单,通过调用一个函数接口。本插件还集成了requireJS和nodeJS的接口,如果需要也可以直接当成一个模块引用。

var DMer = DanMuer( wrapper, options);
wrapper(必选 HTMLnode):容器元素
options(可选 Object):配置选项

options提供的参数:

auto : ( Boolean ) 是否自动运行,默认false
callback :( Function ) 鼠标右键触发后的回调函数,将返回一个被捕获的字幕对象
direction : ( String ) 弹幕显示的方向,默认为从右到左,拥有两个值,"ltor"左到右和"rtol"右到左
duration : ( Number ) 滚动型弹幕的持续时间(ms),默认为 9000
enableEvent :( Boolean ) 是否开启鼠标右键的点击事件,默认false
enable :( Boolean ) 是否启用高级弹幕,默认true
leftTime :( Number ) 静止型弹幕默认的生存时间(ms),默认为 2000
fontSize :( String ) 普通弹幕全局的字体大小,默认为 “26px”
fontWeight :( String ) 普通弹幕全局的字体粗细,默认为 “normal”
fontFamily :( String ) 普通弹幕全局的字体,默认为 “微软雅黑”
fontStyle :( String ) 普通弹幕全局的文本样式,默认为 “normal”
fontColor :( String ) 普通弹幕全局的文本填充颜色,默认为 “#FFFFFF”
opacity :( Number ) 透明度,默认为 1
space :( Number ) 普通弹幕之间的行距,默认为 10
type : ( String ) 普通弹幕调用Tween类时选择的曲线类型,默认是“quad”(二次方),目前还有"cubic","quart","quint"三种
timing : ( String ) Tween时间曲线函数类型,默认是"linear",还有"easeIn","easeOut","easeInOut"

后续如果新接口也将会在这里陆续更新。

数据格式

由于高级弹幕和普通弹幕是在两个不同的canvas绘制的,所以全文提到的“全局”仅仅适用在普通弹幕上

1. 普通弹幕

{
    "text" : "string", //必须,文本内容
    "type" : "string", //必须,弹幕类型,包括("slide","top","bottom")三种类型的弹幕,其中后两种为静止型弹幕
    "change" : boolean, //可选,表示本条弹幕有不同于全局样式的设定,这里做了限制,只有颜色和fontsize可以修改
    "fontSize" :"string", //可选,必须change为true的时候才可以使用
    "color" : "string" //可选,必须change为true的时候才可以使用
}

2. 高级弹幕

{
    "type" : "", //必须,高级弹幕的类型,目前有四种类型("text","rect","polygon","circle")
    "currentIndex" : 0,//必须,表示目前弹幕正在运行的步骤,默认为0就行,不用更改此值
    "hide" : false,//必须,默认为false,不用更改此值,表示是否显示该弹幕
    "steps" : [] //必须,表示该弹幕一共有几个步骤,用于排队动画的实现,与currentIndex配合使用
}

高级弹幕中steps里面的值比较复杂,根据type的不同,参数也会有所差异,下面我们先介绍共用的参数

{
    //以下参数除颜色和type外都为Number类型,不带单位
    startX : 0, //起点x
    startY : 0, //起点y
    endX : 0, //终点x
    endY : 0, //终点y
    scaleStartX : 1, //起始x轴缩放倍数
    scaleStartY : 1, //起始y轴缩放倍数
    scaleEndX : 1, //终点x轴缩放倍数
    scaleEndY : 1, //终点y轴缩放倍数
    rotateStart : 0, //起始旋转角度
    rotateEnd : 0, //终点旋转角度
    skewStartX : 0, //起始x斜切角度
    skewStartY : 0, //起始y斜切角度
        skewEndX : 0, //终点x斜切角度
    skewEndY : 0, //终点y斜切角度
    duration : 3000, //生存时间ms
    opacityStart : 1, //初始透明度
        opacityEnd : 1, //终点透明度
    fillStyle : "#66ccff", //填充颜色
    strokeStyle : "#cccccc", //描边颜色
    pastTime : 0, //不用设置,默认为0
    type : "quad", //Tween时间曲线的类型,默认为"quad(二次方)",目前还有"cubic","quart","quint"三种
    timing : "linear", //动画时间曲线,默认为linear,还有“easeIn”,“easeOut”,“easeInOut”
}

下面是文本类型的特有属性:

{
    fontStyle:"",
    fontWeight:"",
    fontSize:"",
    fontFamily:"",
    text:""
}

下面是方形的特有属性:

{
    width : 100,
    height : 100
}

下面是多边形的特有属性:

//多边形比较特殊,相比上面的形状来说,多边形不用填写startX,startY等,计算是通过points和distX

,distY的值进行计算的

{
    points : [{x:0,y:0},{x:0,y:0}],
    distX : 0,
    distY : 0
}

下面是圆形的特有属性:

//角度什么的暂时没写,画出来的都是整圆

{
    radius : 0
}

API

插件只选择性的暴露了一些接口,如果想了解更多,请去翻阅源码

    start() :启动插件,与上面options中的auto对应,如果初始化没有设置auto,可以通过start来启动

    stop() :停止运行,与start()对应的功能相反方法

    pause() :暂停运行,此时canvas上弹幕并不会被清除

    run() :继续运行,与上面pause()对应

    changeStyle(options) :修改全局文本样式,包括字体大小,样式,family,weight,color和opacity,与options的相关属性对应,参数类型为Object

    addGradient(type,options) :将全局颜色变为渐变颜色;type包括linear和radius两种,options为一个对象,对象里包含(startX,startY,endX,endY,colorStops)五个参数,前两个参数表示渐变的起点坐标,接下来的两个参数表示渐变的终点坐标,最后一个参数表示colorStop,为一个数组,元素格式为

    {

    "point" : 0, //断点

    "color" : this.globalColor //对应颜色

    }

    setSize(width,height) :更改canvas大小,width和height都是Number类型

    getSeize() :获取当前的canvas大小,返回一个对象

    inputData(obj) :添加一个普通弹幕

    inputEffect(obj) :添加一个高级弹幕

    clear() :删除所有已添加的弹幕

    reset(index) :重新从index开始发送弹幕

    addFilter(type,value) :添加一条过滤规则

    removeFilter(tyoe,value) : 删除一条过滤规则

    disableEffect() :禁用高级弹幕

    enableEffect() :启用高级弹幕

    getFPS() :获取FPS

    timing(timing,type) : 改变普通弹幕的动画时间曲线,timing和type的值请参看上面的timing和type

    direction(direc) : 改变普通弹幕的方向,目前有“ltor”和“rtol”,默认为“rtol”(从右往左)

其他一些小技巧

在播放视频时,如果需要使用该插件,而且需要在对应的时间显示对应的弹幕,因为第三版相对第二版来讲已经将判别功能移到了插件外部,需要用户自己判断并添加,所以最好先对弹幕集合进行排序,下面给个完整的操作示例:

//首先随机生成一个弹幕集合,弹幕显示的时间随机生成,假设视频总时长为230秒
var save = [];
for( var i = 0; i < 10000; i++ ){
    save.push({
        "text" : text,
    "time" : (Math.random() * 228 + 2 ) >> 0, //这里是随机生成的时间
    "type" : types[idx]
    });
}
//对于需要频繁操作的对象来说,为了保证性能的稳定我们需要尽可能的优化操作,排序也是为了后面的优化做准备
save.sort(function(a,b){
    return a.time - b.time; //按时间从小到大排列
});
//接下来是当视频播放进行中的时候进行遍历
var start = 0, //循环的初始下标,简化循环用
    doing = false; //保证功能的执行顺序
video.ontimeupdate = function(e){
    var time = this.currentTime >> 0;
    if(doing) return false; //保证一次调用只运行一次循环
    doing = true;
    for( var i = start,obj; obj = save[i++]; ){
    if( obj.time == time ){ //当处于相同时间点的时候
    DMer.inputData(obj);//插入数据
    start = i; //更改下标
    }
    if( obj.time > time ){
    break; //这里就体现上面排序的好处了,因为我们已经可以确定后面弹幕的时间都会比现在的时间大,所以可以直接略过,节省资源
    }
    }
    doing = false;  
};

对于直播类型的来说就更简单,在取到数据后直接插入数据即可,相比上面这种,直播类型的更容易操作。

由于插件很多职责外的功能都分离出去了,所以使用起来相对比较自由,因为本插件也不仅仅只限于视频播放,只要有容器可以放置即可。

对于插件中某些接口的调用,如渐变,在移动设备上是非常吃性能的,所以在使用的时候请尽量审慎。

对于高级弹幕,由于与普通弹幕是分处于两个不同的canvas,所以针对普通弹幕的操作是不会影响到高级弹幕的。当然,分开后做针对操作也更容易点。

至于高级弹幕的自动跟随实现起来也比较容易,直接将上一步的结果填写到对应的下一步的起始位置即可,如:

{
    //第一步
    startX : 0,
    endX : 100
}
//第二步
{
    startX : 100,
    endX : ???
}
//这样便可以实现跟随

下载包里面的demo包含了大部分的API演示,基本使用方法为 ”添加普通弹幕“ -》 下拉框选择”控制项“ -》 ”启动“,其他API接口在运行过程中也能更改,请尽情测试

相关插件-音频和视频

简单的jQuery音乐播放器

简单的jQuery音乐播放器,带分享
  音频和视频
 1870  19

jQuery HTML元素音频特效插件EasyAudioEffects.js

easyaudioeffects是一款非常简单实用的HTML元素发音音频特效jQuery插件。该插件基于HTML5 audio元素来制作各种HTML元素的发音效果。
  音频和视频
 10768  89

基于html5的视频播放器不依赖任何插件

基于html5的播放器插件不依赖任何框架引入即可使用
  音频和视频
 23739  82

Canvas获取音乐频谱

Canvas实现的音乐频谱,兼容性较差,请使用Chrome浏览器观赏!
  音频和视频
 2062  16

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币

    喵了个咪 0
    2017/8/2 16:47:02
    高并发,会不会很卡?
        lonelymoon0
        2017/8/2 16:50:52

        电脑上没太大问题,只要不是开渐变这种极度吃性能的效果的话,移动设备上不行,有限制,大概同时50条,你可以在demo里面输入10w条弹幕测试下就行了

    回复
取消回复