素材8網(wǎng)-專注前端素材！› 網(wǎng)頁特效 › DIV/CSS›查看內(nèi)容

高級彈幕發(fā)射器插件

1942
0
0

下載包里面的demo包含了大部分的API演示，基本使用方法為添加普通彈幕 -》下拉框選擇”控制項-》啟動 ?。?！

插件描述：本插件是一個彈幕發(fā)生器，利用HTML5 canvas + ES6來實現(xiàn)普通彈幕和高級彈幕發(fā)送。也有通過babel轉(zhuǎn)成的ES5版，支持IE10+；版本從3.0.0開始，從重優(yōu)化了性能，豐富了功能，而且本插件是個開源項目，本人會不斷更新新的功能。相比其他同類型插件來講，本插件適用范圍更廣，不光適用于視頻、直播，也適用于其他的一些場景。插件繼承了相關(guān)模塊工具的引用接口，也可以和其他視頻播放插件（如video.js等）進行有效結(jié)合，支持高級彈幕和全局彈幕的控制和過濾，在默認(rèn)配置下，在移動設(shè)備上也有良好的性
DanMuer

本插件是一個彈幕發(fā)生器，利用HTML5 canvas + ES6來實現(xiàn)普通彈幕和高級彈幕發(fā)送。目前版本將從3.0.0開始。

相較于前兩版來說，第三版性能更好，而且實現(xiàn)了播放器模塊和彈幕模塊的解耦，也就是說相比第二版，第三版可以適用但不限于播放器，可用性更高，而且實現(xiàn)了高級彈幕的發(fā)送，未來將慢慢補齊更多的功能和代碼重構(gòu)，希望大家遇到什么BUG或者是某些合理的需求再此貼留言。

兼容性

所有現(xiàn)代瀏覽器,IE10+ （IE除外），后面將會考慮寫個IE用的兼容ES5版本

使用方法

1. 先準(zhǔn)備一個容器元素：

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

復(fù)制代碼

2. 進行調(diào)用

var wrapper = document.getElementById("danmuer-wrapper"),options = {};
var DMer = DanMuer( wrapper, options); //調(diào)用插件，wrapper為包裹元素，options為初始設(shè)定
DMer.inputData({
"text" : "我是彈幕",
"type" : "slide"
}); //插入一條彈幕，如果想同時插入多條彈幕可以用循環(huán)輸入
DMer.start(); //運行

復(fù)制代碼

調(diào)用方法

調(diào)用接口非常的簡單，通過調(diào)用一個函數(shù)接口。本插件還集成了requireJS和nodeJS的接口，如果需要也可以直接當(dāng)成一個模塊引用。

var DMer = DanMuer( wrapper, options);
wrapper（必選 HTMLnode）：容器元素
options（可選 Object）：配置選項

復(fù)制代碼

options提供的參數(shù)：

auto ： ( Boolean ) 是否自動運行，默認(rèn)false
callback ：( Function ) 鼠標(biāo)右鍵觸發(fā)后的回調(diào)函數(shù)，將返回一個被捕獲的字幕對象
direction : ( String ) 彈幕顯示的方向，默認(rèn)為從右到左,擁有兩個值,"ltor"左到右和"rtol"右到左
duration : ( Number ) 滾動型彈幕的持續(xù)時間(ms)，默認(rèn)為 9000
enableEvent ：( Boolean ) 是否開啟鼠標(biāo)右鍵的點擊事件，默認(rèn)false
enable ：( Boolean ) 是否啟用高級彈幕，默認(rèn)true
leftTime ：( Number ) 靜止型彈幕默認(rèn)的生存時間(ms)，默認(rèn)為 2000
fontSize ：( String ) 普通彈幕全局的字體大小，默認(rèn)為 “26px”
fontWeight ：( String ) 普通彈幕全局的字體粗細(xì)，默認(rèn)為 “normal”
fontFamily ：( String ) 普通彈幕全局的字體，默認(rèn)為 “微軟雅黑”
fontStyle ：( String ) 普通彈幕全局的文本樣式，默認(rèn)為 “normal”
fontColor ：( String ) 普通彈幕全局的文本填充顏色，默認(rèn)為 “#FFFFFF”
opacity ：( Number ) 透明度，默認(rèn)為 1
space ：( Number ) 普通彈幕之間的行距，默認(rèn)為 10
type : ( String ) 普通彈幕調(diào)用Tween類時選擇的曲線類型，默認(rèn)是“quad”（二次方），目前還有"cubic","quart","quint"三種
timing : ( String ) Tween時間曲線函數(shù)類型，默認(rèn)是"linear",還有"easeIn","easeOut","easeInOut"

復(fù)制代碼

數(shù)據(jù)格式

由于高級彈幕和普通彈幕是在兩個不同的canvas繪制的，所以全文提到的“全局”僅僅適用在普通彈幕上

1. 普通彈幕

{
"text" : "string", //必須，文本內(nèi)容
"type" : "string", //必須，彈幕類型,包括（"slide","top","bottom"）三種類型的彈幕，其中后兩種為靜止型彈幕
"change" : boolean, //可選，表示本條彈幕有不同于全局樣式的設(shè)定，這里做了限制，只有顏色和fontsize可以修改
"fontSize" :"string", //可選，必須change為true的時候才可以使用
"color" : "string" //可選，必須change為true的時候才可以使用
}

復(fù)制代碼

2. 高級彈幕

{
"type" : "", //必須，高級彈幕的類型，目前有四種類型（"text","rect","polygon","circle"）
"currentIndex" : 0,//必須，表示目前彈幕正在運行的步驟，默認(rèn)為0就行，不用更改此值
"hide" : false,//必須，默認(rèn)為false，不用更改此值，表示是否顯示該彈幕
"steps" : [] //必須，表示該彈幕一共有幾個步驟，用于排隊動畫的實現(xiàn)，與currentIndex配合使用
}

復(fù)制代碼

高級彈幕中steps里面的值比較復(fù)雜，根據(jù)type的不同，參數(shù)也會有所差異，下面我們先介紹共用的參數(shù)

{
//以下參數(shù)除顏色和type外都為Number類型，不帶單位
startX : 0, //起點x
startY : 0, //起點y
endX : 0, //終點x
endY : 0, //終點y
scaleStartX : 1, //起始x軸縮放倍數(shù)
scaleStartY : 1, //起始y軸縮放倍數(shù)
scaleEndX : 1, //終點x軸縮放倍數(shù)
scaleEndY : 1, //終點y軸縮放倍數(shù)
rotateStart : 0, //起始旋轉(zhuǎn)角度
rotateEnd : 0, //終點旋轉(zhuǎn)角度
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, //不用設(shè)置，默認(rèn)為0
type : "quad", //Tween時間曲線的類型,默認(rèn)為"quad(二次方)",目前還有"cubic","quart","quint"三種
timing : "linear", //動畫時間曲線，默認(rèn)為linear，還有“easeIn”,“easeOut”,“easeInOut”
}

復(fù)制代碼

下面是文本類型的特有屬性：

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

復(fù)制代碼

下面是方形的特有屬性：

{
width : 100,
height : 100
}

復(fù)制代碼

下面是多邊形的特有屬性：

//多邊形比較特殊，相比上面的形狀來說，多邊形不用填寫startX，startY等，計算是通過points和distX

，distY的值進行計算的

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

復(fù)制代碼

下面是圓形的特有屬性：

//角度什么的暫時沒寫，畫出來的都是整圓

{
radius : 0
}

復(fù)制代碼

API

插件只選擇性的暴露了一些接口，如果想了解更多，請去翻閱源碼

start() ：啟動插件，與上面options中的auto對應(yīng)，如果初始化沒有設(shè)置auto，可以通過start來啟動

stop() ：停止運行，與start()對應(yīng)的功能相反方法

pause() ：暫停運行，此時canvas上彈幕并不會被清除

run() ：繼續(xù)運行，與上面pause()對應(yīng)

changeStyle(options) ：修改全局文本樣式，包括字體大小，樣式，family，weight，color和opacity，與options的相關(guān)屬性對應(yīng)，參數(shù)類型為Object

addGradient(type,options) ：將全局顏色變?yōu)闈u變顏色；type包括linear和radius兩種，options為一個對象，對象里包含（startX，startY，endX，endY，colorStops）五個參數(shù)，前兩個參數(shù)表示漸變的起點坐標(biāo)，接下來的兩個參數(shù)表示漸變的終點坐標(biāo)，最后一個參數(shù)表示colorStop，為一個數(shù)組，元素格式為

{

"point" : 0, //斷點

"color" : this.globalColor //對應(yīng)顏色

}

setSize(width,height) ：更改canvas大小，width和height都是Number類型

getSeize() ：獲取當(dāng)前的canvas大小，返回一個對象

inputData(obj) ：添加一個普通彈幕

inputEffect(obj) ：添加一個高級彈幕

clear() ：刪除所有已添加的彈幕

reset(index) ：重新從index開始發(fā)送彈幕

addFilter(type,value) ：添加一條過濾規(guī)則

removeFilter(tyoe,value) : 刪除一條過濾規(guī)則

disableEffect() ：禁用高級彈幕

enableEffect() ：啟用高級彈幕

getFPS() ：獲取FPS

timing(timing,type) : 改變普通彈幕的動畫時間曲線，timing和type的值請參看上面的timing和type

direction(direc) : 改變普通彈幕的方向，目前有“l(fā)tor”和“rtol”，默認(rèn)為“rtol”（從右往左）

其他一些小技巧

在播放視頻時，如果需要使用該插件，而且需要在對應(yīng)的時間顯示對應(yīng)的彈幕，因為第三版相對第二版來講已經(jīng)將判別功能移到了插件外部，需要用戶自己判斷并添加，所以最好先對彈幕集合進行排序，下面給個完整的操作示例：

//首先隨機生成一個彈幕集合，彈幕顯示的時間隨機生成,假設(shè)視頻總時長為230秒
var save = [];
for( var i = 0; i < 10000; i++ ){
save.push({
"text" : text,
"time" : (Math.random() * 228 + 2 ) >> 0, //這里是隨機生成的時間
"type" : types[idx]
});
}
//對于需要頻繁操作的對象來說，為了保證性能的穩(wěn)定我們需要盡可能的優(yōu)化操作，排序也是為了后面的優(yōu)化做準(zhǔn)備
save.sort(function(a,b){
return a.time - b.time; //按時間從小到大排列
});
//接下來是當(dāng)視頻播放進行中的時候進行遍歷
var start = 0, //循環(huán)的初始下標(biāo)，簡化循環(huán)用
doing = false; //保證功能的執(zhí)行順序
video.ontimeupdate = function(e){
var time = this.currentTime >> 0;
if(doing) return false; //保證一次調(diào)用只運行一次循環(huán)
doing = true;
for( var i = start,obj; obj = save[i++]; ){
if( obj.time == time ){ //當(dāng)處于相同時間點的時候
DMer.inputData(obj);//插入數(shù)據(jù)
start = i; //更改下標(biāo)
}
if( obj.time > time ){
break; //這里就體現(xiàn)上面排序的好處了，因為我們已經(jīng)可以確定后面彈幕的時間都會比現(xiàn)在的時間大，所以可以直接略過，節(jié)省資源
}
}
doing = false;
};