mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-09 20:26:16 -08:00
添加弹幕插件方法
This commit is contained in:
Harvey Zack committed
1 parent
b1819b3ea2
commit
8aac0ba52f
5 files changed
+336
-82
No files matched your search
@@ -3,5 +3,5 @@ var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: url + '/video/you-name.mp4',
|
||||
autoSize: true,
|
||||
plugins: [artplayerPluginDanmu],
|
||||
plugins: [artplayerPluginDanmu()],
|
||||
});
|
||||
@@ -1,67 +1,294 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global['artplayer-plugin-danmu'] = factory());
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = global || self, global['artplayer-plugin-danmu'] = factory());
|
||||
}(this, function () { 'use strict';
|
||||
|
||||
function artplayerPluginDanmu(art) {
|
||||
var layers = art.layers;
|
||||
var _art$constructor$util = art.constructor.utils,
|
||||
append = _art$constructor$util.append,
|
||||
errorHandle = _art$constructor$util.errorHandle,
|
||||
setStyles = _art$constructor$util.setStyles;
|
||||
var layer = layers.add({
|
||||
name: 'danmu',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden'
|
||||
}
|
||||
});
|
||||
var danmuList = [];
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
}
|
||||
|
||||
function emit() {
|
||||
var $danmu = document.createElement('div');
|
||||
$danmu.innerText = '23333';
|
||||
setStyles($danmu, {
|
||||
'user-select': 'none',
|
||||
'position': 'absolute',
|
||||
'white-space': 'pre',
|
||||
'pointer-events': 'none',
|
||||
'perspective': '500px',
|
||||
'display': 'inline-block',
|
||||
'will-change': 'transform',
|
||||
'font-size': '25px',
|
||||
'color': 'rgb(254, 241, 2)',
|
||||
'font-family': 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif',
|
||||
'font-weight': 'normal',
|
||||
'line-height': '1.125',
|
||||
'opacity': '1',
|
||||
'text-shadow': 'rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px',
|
||||
'left': '638px',
|
||||
'top': '0px',
|
||||
'transform': 'translateX(-626.14px) translateY(0px) translateZ(0px)',
|
||||
'transition': '-webkit-transform 0s linear 0s'
|
||||
});
|
||||
danmuList.push(append(layer.$ref, $danmu));
|
||||
}
|
||||
var classCallCheck = _classCallCheck;
|
||||
|
||||
emit({});
|
||||
return {
|
||||
name: 'artplayerPluginDanmu',
|
||||
config: function config(option) {},
|
||||
emit: function emit() {}
|
||||
};
|
||||
function _defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
function _createClass(Constructor, protoProps, staticProps) {
|
||||
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) _defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
}
|
||||
|
||||
var createClass = _createClass;
|
||||
|
||||
var Danmuku =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function Danmuku(art) {
|
||||
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
classCallCheck(this, Danmuku);
|
||||
|
||||
this.art = art;
|
||||
this.option = {};
|
||||
this.config(option);
|
||||
this.current = [];
|
||||
this.layer = {};
|
||||
this.isStop = false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
window.artplayerPluginDanmu = artplayerPluginDanmu;
|
||||
createClass(Danmuku, [{
|
||||
key: "init",
|
||||
value: function init() {
|
||||
var layers = this.art.layers;
|
||||
this.layer = layers.add({
|
||||
name: 'danmu',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden'
|
||||
}
|
||||
});
|
||||
this.art.on('video:timeupdate', this.update.bind(this));
|
||||
this.art.on('video:play', this.start.bind(this));
|
||||
this.art.on('video:pause', this.stop.bind(this));
|
||||
this.art.on('video:ended', this.stop.bind(this));
|
||||
this.art.on('destroy', this.stop.bind(this));
|
||||
}
|
||||
}, {
|
||||
key: "emit",
|
||||
value: function emit(danmu) {
|
||||
var errorHandle = this.art.constructor.utils.errorHandle;
|
||||
errorHandle(danmu.text.trim(), 'Danmu text cannot be empty');
|
||||
var _this$art$template$$p = this.art.template.$player,
|
||||
playerWidth = _this$art$template$$p.clientWidth,
|
||||
playerHeight = _this$art$template$$p.clientHeight;
|
||||
var danmuItem = this.getDanmuItem();
|
||||
danmuItem.$ref.innerText = danmu.text;
|
||||
danmuItem.$ref.style.fontSize = danmu.size || this.option.size;
|
||||
var _danmuItem$$ref = danmuItem.$ref,
|
||||
danmuWidth = _danmuItem$$ref.clientWidth,
|
||||
danmuHeight = _danmuItem$$ref.clientHeight;
|
||||
danmuItem.$ref.style.opacity = danmu.opacity || this.option.opacity;
|
||||
danmuItem.$ref.style.color = danmu.color || this.option.color;
|
||||
danmuItem.$ref.style.top = this.getDanmuTop(playerHeight, danmuHeight);
|
||||
danmuItem.$ref.style.left = "".concat(playerWidth, "px");
|
||||
danmuItem.$ref.style.transform = "translateX(".concat(-playerWidth - danmuWidth, "px) translateY(0px) translateZ(0px)");
|
||||
danmuItem.$ref.style.transition = "-webkit-transform ".concat(danmu.speed || this.option.speed, "s linear 0s");
|
||||
this.art.emit('artplayerPluginDanmu:emit', danmu);
|
||||
}
|
||||
}, {
|
||||
key: "getDanmuItem",
|
||||
value: function getDanmuItem() {
|
||||
var _this$art$constructor = this.art.constructor.utils,
|
||||
setStyles = _this$art$constructor.setStyles,
|
||||
append = _this$art$constructor.append;
|
||||
var inactiveItem = this.current.find(function (item) {
|
||||
return item.state === 'inactive';
|
||||
});
|
||||
if (inactiveItem) return inactiveItem;
|
||||
var $ref = document.createElement('div');
|
||||
setStyles($ref, {
|
||||
userSelect: 'none',
|
||||
position: 'absolute',
|
||||
whiteSpace: 'pre',
|
||||
pointerEvents: 'none',
|
||||
perspective: '500px',
|
||||
display: 'inline-block',
|
||||
willChange: 'transform',
|
||||
fontFamily: 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif',
|
||||
fontWeight: 'normal',
|
||||
lineHeight: '1.125',
|
||||
textShadow: 'rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px'
|
||||
});
|
||||
return {
|
||||
state: 'active',
|
||||
$ref: append(this.layer.$ref, $ref)
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: "getDanmuTop",
|
||||
value: function getDanmuTop(playerHeight, danmuHeight) {
|
||||
return 0;
|
||||
}
|
||||
}, {
|
||||
key: "update",
|
||||
value: function update() {
|
||||
if (!this.isStop && this.option.danmu.length) ;
|
||||
}
|
||||
}, {
|
||||
key: "config",
|
||||
value: function config(option) {
|
||||
this.option = Object.assign({}, Danmuku.option, option);
|
||||
this.art.constructor.validator(this.option, Danmuku.scheme);
|
||||
}
|
||||
}, {
|
||||
key: "stop",
|
||||
value: function stop() {
|
||||
this.isStop = true;
|
||||
this.art.emit('artplayerPluginDanmu:stop');
|
||||
}
|
||||
}, {
|
||||
key: "start",
|
||||
value: function start() {
|
||||
this.isStop = false;
|
||||
this.art.emit('artplayerPluginDanmu:start');
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
this.layer.$ref.style = 'none';
|
||||
this.art.emit('artplayerPluginDanmu:show');
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
this.layer.$ref.style = 'block';
|
||||
this.art.emit('artplayerPluginDanmu:hide');
|
||||
}
|
||||
}], [{
|
||||
key: "option",
|
||||
get: function get() {
|
||||
return {
|
||||
danmu: [],
|
||||
speed: 5,
|
||||
opacity: 1,
|
||||
color: '#fff',
|
||||
size: 14
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: "scheme",
|
||||
get: function get() {
|
||||
return {
|
||||
danmu: {
|
||||
type: 'array',
|
||||
child: {
|
||||
text: 'string',
|
||||
size: 'number',
|
||||
time: 'number',
|
||||
color: 'string',
|
||||
mode: 'number'
|
||||
}
|
||||
},
|
||||
speed: 'number',
|
||||
opacity: 'number',
|
||||
color: 'string',
|
||||
size: 'number'
|
||||
};
|
||||
}
|
||||
}]);
|
||||
|
||||
return artplayerPluginDanmu;
|
||||
return Danmuku;
|
||||
}();
|
||||
|
||||
function _arrayWithHoles(arr) {
|
||||
if (Array.isArray(arr)) return arr;
|
||||
}
|
||||
|
||||
var arrayWithHoles = _arrayWithHoles;
|
||||
|
||||
function _iterableToArrayLimit(arr, i) {
|
||||
var _arr = [];
|
||||
var _n = true;
|
||||
var _d = false;
|
||||
var _e = undefined;
|
||||
|
||||
try {
|
||||
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
||||
_arr.push(_s.value);
|
||||
|
||||
if (i && _arr.length === i) break;
|
||||
}
|
||||
} catch (err) {
|
||||
_d = true;
|
||||
_e = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_n && _i["return"] != null) _i["return"]();
|
||||
} finally {
|
||||
if (_d) throw _e;
|
||||
}
|
||||
}
|
||||
|
||||
return _arr;
|
||||
}
|
||||
|
||||
var iterableToArrayLimit = _iterableToArrayLimit;
|
||||
|
||||
function _nonIterableRest() {
|
||||
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
||||
}
|
||||
|
||||
var nonIterableRest = _nonIterableRest;
|
||||
|
||||
function _slicedToArray(arr, i) {
|
||||
return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest();
|
||||
}
|
||||
|
||||
var slicedToArray = _slicedToArray;
|
||||
|
||||
function bilibiliDanmuParse(xmlString) {
|
||||
if (typeof xmlString !== 'string') return [];
|
||||
var regSrt = '<d p="(.+)">(.+)</d>';
|
||||
var listReg = new RegExp(regSrt, 'gi');
|
||||
var itemReg = new RegExp(regSrt, 'i');
|
||||
var srtList = xmlString.match(listReg);
|
||||
return srtList.length ? srtList.map(function (item) {
|
||||
var _item$match = item.match(itemReg),
|
||||
_item$match2 = slicedToArray(_item$match, 3),
|
||||
attrStr = _item$match2[1],
|
||||
text = _item$match2[2];
|
||||
|
||||
var attr = attrStr.split(',');
|
||||
return attr.length === 8 && text.trim() ? {
|
||||
text: text,
|
||||
time: Number(attr[0]),
|
||||
mode: Number(attr[1]),
|
||||
size: Number(attr[2]),
|
||||
color: "#".concat(Number(attr[3]).toString(16)),
|
||||
timestamp: Number(attr[4]),
|
||||
pool: Number(attr[5]),
|
||||
userID: Number(attr[6]),
|
||||
rowID: Number(attr[7])
|
||||
} : null;
|
||||
}) : [];
|
||||
}
|
||||
|
||||
function artplayerPluginDanmu(option) {
|
||||
return function (art) {
|
||||
var danmuku = new Danmuku(art, option);
|
||||
return {
|
||||
name: 'artplayerPluginDanmu',
|
||||
emit: danmuku.emit.bind(danmuku),
|
||||
start: danmuku.start.bind(danmuku),
|
||||
stop: danmuku.stop.bind(danmuku),
|
||||
hide: danmuku.hide.bind(danmuku),
|
||||
show: danmuku.show.bind(danmuku),
|
||||
config: danmuku.config.bind(danmuku)
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
artplayerPluginDanmu.bilibiliDanmuParse = bilibiliDanmuParse;
|
||||
window.artplayerPluginDanmu = artplayerPluginDanmu;
|
||||
|
||||
return artplayerPluginDanmu;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=artplayer-plugin-danmu.js.map
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer-plugin-danmu.js","sources":["../../packages/artplayer-plugin-danmu/src/index.js"],"sourcesContent":["function artplayerPluginDanmu(art) {\n const { layers } = art;\n const {\n utils: { append, errorHandle, setStyles },\n } = art.constructor;\n\n const layer = layers.add({\n name: 'danmu',\n style: {\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n },\n });\n\n const danmuList = [];\n function emit(style = {}) {\n const $danmu = document.createElement('div');\n $danmu.innerText = '23333';\n setStyles($danmu, {\n 'user-select': 'none',\n 'position': 'absolute',\n 'white-space': 'pre',\n 'pointer-events': 'none',\n 'perspective': '500px',\n 'display': 'inline-block',\n 'will-change': 'transform',\n 'font-size': '25px',\n 'color': 'rgb(254, 241, 2)',\n 'font-family': 'SimHei, \"Microsoft JhengHei\", Arial, Helvetica, sans-serif',\n 'font-weight': 'normal',\n 'line-height': '1.125',\n 'opacity': '1',\n 'text-shadow': 'rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px',\n 'left': '638px',\n 'top': '0px',\n 'transform': 'translateX(-626.14px) translateY(0px) translateZ(0px)',\n 'transition': '-webkit-transform 0s linear 0s',\n });\n danmuList.push(append(layer.$ref, $danmu));\n }\n\n emit({\n \n });\n\n return {\n name: 'artplayerPluginDanmu',\n config(option) {},\n emit() {},\n };\n}\n\nwindow.artplayerPluginDanmu = artplayerPluginDanmu;\nexport default artplayerPluginDanmu;\n"],"names":["artplayerPluginDanmu","art","layers","constructor","utils","append","errorHandle","setStyles","layer","add","name","style","position","left","top","right","bottom","width","height","overflow","danmuList","emit","$danmu","document","createElement","innerText","push","$ref","config","option","window"],"mappings":";;;;;;IAAA,SAASA,oBAAT,CAA8BC,GAA9B,EAAmC;IAAA,MACvBC,MADuB,GACZD,GADY,CACvBC,MADuB;IAAA,8BAI3BD,GAAG,CAACE,WAJuB,CAG3BC,KAH2B;IAAA,MAGlBC,MAHkB,yBAGlBA,MAHkB;IAAA,MAGVC,WAHU,yBAGVA,WAHU;IAAA,MAGGC,SAHH,yBAGGA,SAHH;IAM/B,MAAMC,KAAK,GAAGN,MAAM,CAACO,GAAP,CAAW;IACrBC,IAAAA,IAAI,EAAE,OADe;IAErBC,IAAAA,KAAK,EAAE;IACHC,MAAAA,QAAQ,EAAE,UADP;IAEHC,MAAAA,IAAI,EAAE,CAFH;IAGHC,MAAAA,GAAG,EAAE,CAHF;IAIHC,MAAAA,KAAK,EAAE,CAJJ;IAKHC,MAAAA,MAAM,EAAE,CALL;IAMHC,MAAAA,KAAK,EAAE,MANJ;IAOHC,MAAAA,MAAM,EAAE,MAPL;IAQHC,MAAAA,QAAQ,EAAE;IARP;IAFc,GAAX,CAAd;IAcA,MAAMC,SAAS,GAAG,EAAlB;;IACA,WAASC,IAAT,GAA0B;AAAA,IACtB,QAAMC,MAAM,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAf;IACAF,IAAAA,MAAM,CAACG,SAAP,GAAmB,OAAnB;IACAlB,IAAAA,SAAS,CAACe,MAAD,EAAS;IACd,qBAAe,MADD;IAEd,kBAAY,UAFE;IAGd,qBAAe,KAHD;IAId,wBAAkB,MAJJ;IAKd,qBAAe,OALD;IAMd,iBAAW,cANG;IAOd,qBAAe,WAPD;IAQd,mBAAa,MARC;IASd,eAAS,kBATK;IAUd,qBAAe,4DAVD;IAWd,qBAAe,QAXD;IAYd,qBAAe,OAZD;IAad,iBAAW,GAbG;IAcd,qBAAe,0GAdD;IAed,cAAQ,OAfM;IAgBd,aAAO,KAhBO;IAiBd,mBAAa,uDAjBC;IAkBd,oBAAc;IAlBA,KAAT,CAAT;IAoBAF,IAAAA,SAAS,CAACM,IAAV,CAAerB,MAAM,CAACG,KAAK,CAACmB,IAAP,EAAaL,MAAb,CAArB;IACH;;IAEDD,EAAAA,IAAI,CAAC,EAAD,CAAJ;IAIA,SAAO;IACHX,IAAAA,IAAI,EAAE,sBADH;IAEHkB,IAAAA,MAFG,kBAEIC,MAFJ,EAEY,EAFZ;IAGHR,IAAAA,IAHG,kBAGI;IAHJ,GAAP;IAKH;;IAEDS,MAAM,CAAC9B,oBAAP,GAA8BA,oBAA9B;;;;;;;;"}
|
||||
{"version":3,"file":"artplayer-plugin-danmu.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer-plugin-danmu/src/danmuku.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer-plugin-danmu/src/bilibiliDanmuParse.js","../../packages/artplayer-plugin-danmu/src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nmodule.exports = _createClass;","export default class Danmuku {\n constructor(art, option = {}) {\n this.art = art;\n this.option = {};\n this.config(option);\n this.current = [];\n this.layer = {};\n this.isStop = false;\n this.init();\n }\n\n static get option() {\n return {\n danmu: [],\n speed: 5,\n opacity: 1,\n color: '#fff',\n size: 14,\n };\n }\n\n static get scheme() {\n return {\n danmu: {\n type: 'array',\n child: {\n text: 'string',\n size: 'number',\n time: 'number',\n color: 'string',\n mode: 'number',\n },\n },\n speed: 'number',\n opacity: 'number',\n color: 'string',\n size: 'number',\n };\n }\n\n init() {\n const { layers } = this.art;\n this.layer = layers.add({\n name: 'danmu',\n style: {\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n },\n });\n\n this.art.on('video:timeupdate', this.update.bind(this));\n this.art.on('video:play', this.start.bind(this));\n this.art.on('video:pause', this.stop.bind(this));\n this.art.on('video:ended', this.stop.bind(this));\n this.art.on('destroy', this.stop.bind(this));\n }\n\n emit(danmu) {\n const { errorHandle } = this.art.constructor.utils;\n errorHandle(danmu.text.trim(), 'Danmu text cannot be empty');\n const { clientWidth: playerWidth, clientHeight: playerHeight } = this.art.template.$player;\n const danmuItem = this.getDanmuItem();\n danmuItem.$ref.innerText = danmu.text;\n danmuItem.$ref.style.fontSize = danmu.size || this.option.size;\n const { clientWidth: danmuWidth, clientHeight: danmuHeight } = danmuItem.$ref;\n danmuItem.$ref.style.opacity = danmu.opacity || this.option.opacity;\n danmuItem.$ref.style.color = danmu.color || this.option.color;\n danmuItem.$ref.style.top = this.getDanmuTop(playerHeight, danmuHeight);\n danmuItem.$ref.style.left = `${playerWidth}px`;\n danmuItem.$ref.style.transform = `translateX(${-playerWidth - danmuWidth}px) translateY(0px) translateZ(0px)`;\n danmuItem.$ref.style.transition = `-webkit-transform ${danmu.speed || this.option.speed}s linear 0s`;\n this.art.emit('artplayerPluginDanmu:emit', danmu);\n }\n\n getDanmuItem() {\n const { setStyles, append } = this.art.constructor.utils;\n const inactiveItem = this.current.find(item => item.state === 'inactive');\n if (inactiveItem) return inactiveItem;\n const $ref = document.createElement('div');\n setStyles($ref, {\n userSelect: 'none',\n position: 'absolute',\n whiteSpace: 'pre',\n pointerEvents: 'none',\n perspective: '500px',\n display: 'inline-block',\n willChange: 'transform',\n fontFamily: 'SimHei, \"Microsoft JhengHei\", Arial, Helvetica, sans-serif',\n fontWeight: 'normal',\n lineHeight: '1.125',\n textShadow:\n 'rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, Line truncated
|
||||
@@ -1,10 +1,10 @@
|
||||
export default class Danmuku {
|
||||
constructor(art, option) {
|
||||
constructor(art, option = {}) {
|
||||
this.art = art;
|
||||
this.option = {};
|
||||
this.config(option);
|
||||
this.current = [];
|
||||
this.layer = null;
|
||||
this.layer = {};
|
||||
this.isStop = false;
|
||||
this.init();
|
||||
}
|
||||
@@ -12,7 +12,7 @@ export default class Danmuku {
|
||||
static get option() {
|
||||
return {
|
||||
danmu: [],
|
||||
speed: 3,
|
||||
speed: 5,
|
||||
opacity: 1,
|
||||
color: '#fff',
|
||||
size: 14,
|
||||
@@ -53,15 +53,37 @@ export default class Danmuku {
|
||||
overflow: 'hidden',
|
||||
},
|
||||
});
|
||||
|
||||
this.art.on('video:timeupdate', this.update.bind(this));
|
||||
this.art.on('video:play', this.start.bind(this));
|
||||
this.art.on('video:pause', this.stop.bind(this));
|
||||
this.art.on('video:ended', this.stop.bind(this));
|
||||
this.art.on('destroy', this.stop.bind(this));
|
||||
}
|
||||
|
||||
emit(danmu) {
|
||||
const { errorHandle, setStyles, append } = this.art.constructor.utils;
|
||||
errorHandle(danmu.text, 'Danmu text cannot be empty');
|
||||
errorHandle(danmu.time, 'Danmu time cannot be empty');
|
||||
const $danmu = document.createElement('div');
|
||||
$danmu.innerText = danmu.text;
|
||||
setStyles($danmu, {
|
||||
const { errorHandle } = this.art.constructor.utils;
|
||||
errorHandle(danmu.text.trim(), 'Danmu text cannot be empty');
|
||||
const { clientWidth: playerWidth, clientHeight: playerHeight } = this.art.template.$player;
|
||||
const danmuItem = this.getDanmuItem();
|
||||
danmuItem.$ref.innerText = danmu.text;
|
||||
danmuItem.$ref.style.fontSize = danmu.size || this.option.size;
|
||||
const { clientWidth: danmuWidth, clientHeight: danmuHeight } = danmuItem.$ref;
|
||||
danmuItem.$ref.style.opacity = danmu.opacity || this.option.opacity;
|
||||
danmuItem.$ref.style.color = danmu.color || this.option.color;
|
||||
danmuItem.$ref.style.top = this.getDanmuTop(playerHeight, danmuHeight);
|
||||
danmuItem.$ref.style.left = `${playerWidth}px`;
|
||||
danmuItem.$ref.style.transform = `translateX(${-playerWidth - danmuWidth}px) translateY(0px) translateZ(0px)`;
|
||||
danmuItem.$ref.style.transition = `-webkit-transform ${danmu.speed || this.option.speed}s linear 0s`;
|
||||
this.art.emit('artplayerPluginDanmu:emit', danmu);
|
||||
}
|
||||
|
||||
getDanmuItem() {
|
||||
const { setStyles, append } = this.art.constructor.utils;
|
||||
const inactiveItem = this.current.find(item => item.state === 'inactive');
|
||||
if (inactiveItem) return inactiveItem;
|
||||
const $ref = document.createElement('div');
|
||||
setStyles($ref, {
|
||||
userSelect: 'none',
|
||||
position: 'absolute',
|
||||
whiteSpace: 'pre',
|
||||
@@ -69,21 +91,26 @@ export default class Danmuku {
|
||||
perspective: '500px',
|
||||
display: 'inline-block',
|
||||
willChange: 'transform',
|
||||
fontSize: `${danmu.size || 14}px`,
|
||||
color: danmu.color || '#fff',
|
||||
fontFamily: 'SimHei, "Microsoft JhengHei", Arial, Helvetica, sans-serif',
|
||||
fontWeight: 'normal',
|
||||
lineHeight: '1.125',
|
||||
opacity: '1',
|
||||
textShadow:
|
||||
'rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px',
|
||||
left: '638px',
|
||||
top: '0px',
|
||||
transform: 'translateX(-626.14px) translateY(0px) translateZ(0px)',
|
||||
transition: '-webkit-transform 0s linear 0s',
|
||||
});
|
||||
this.current.push(append(this.layer.$ref, $danmu));
|
||||
this.art.emit('artplayerPluginDanmu:emit', danmu);
|
||||
return {
|
||||
state: 'active',
|
||||
$ref: append(this.layer.$ref, $ref),
|
||||
};
|
||||
}
|
||||
|
||||
getDanmuTop(playerHeight, danmuHeight) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
update() {
|
||||
if (!this.isStop && this.option.danmu.length) {
|
||||
// 播放速度
|
||||
}
|
||||
}
|
||||
|
||||
config(option) {
|
||||
|
||||
@@ -6,12 +6,12 @@ function artplayerPluginDanmu(option) {
|
||||
const danmuku = new Danmuku(art, option);
|
||||
return {
|
||||
name: 'artplayerPluginDanmu',
|
||||
emit: danmuku.emit,
|
||||
start: danmuku.start,
|
||||
stop: danmuku.stop,
|
||||
hide: danmuku.hide,
|
||||
show: danmuku.show,
|
||||
config: danmuku.config,
|
||||
emit: danmuku.emit.bind(danmuku),
|
||||
start: danmuku.start.bind(danmuku),
|
||||
stop: danmuku.stop.bind(danmuku),
|
||||
hide: danmuku.hide.bind(danmuku),
|
||||
show: danmuku.show.bind(danmuku),
|
||||
config: danmuku.config.bind(danmuku),
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user