添加弹幕插件方法

docs/assets/example/danmu.js

@@ -3,5 +3,5 @@ var art = new Artplayer({
     container: '.artplayer-app',
     url: url + '/video/you-name.mp4',
     autoSize: true,
-    plugins: [artplayerPluginDanmu],
+    plugins: [artplayerPluginDanmu()],
 });

docs/uncompiled/artplayer-plugin-danmu.js

@@ -1,67 +1,294 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
+  typeof define === 'function' && define.amd ? define(factory) :
-    (global = global || self, global['artplayer-plugin-danmu'] = factory());
+  (global = global || self, global['artplayer-plugin-danmu'] = factory());
 }(this, function () { 'use strict';
 
-    function artplayerPluginDanmu(art) {
+  function _classCallCheck(instance, Constructor) {
-      var layers = art.layers;
+    if (!(instance instanceof Constructor)) {
-      var _art$constructor$util = art.constructor.utils,
+      throw new TypeError("Cannot call a class as a function");
-          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 emit() {
+  var classCallCheck = _classCallCheck;
-        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));
-      }
 
-      emit({});
+  function _defineProperties(target, props) {
-      return {
+    for (var i = 0; i < props.length; i++) {
-        name: 'artplayerPluginDanmu',
+      var descriptor = props[i];
-        config: function config(option) {},
+      descriptor.enumerable = descriptor.enumerable || false;
-        emit: function emit() {}
+      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

docs/uncompiled/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

packages/artplayer-plugin-danmu/src/danmuku.js

@@ -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;
+        const { errorHandle } = this.art.constructor.utils;
-        errorHandle(danmu.text, 'Danmu text cannot be empty');
+        errorHandle(danmu.text.trim(), 'Danmu text cannot be empty');
-        errorHandle(danmu.time, 'Danmu time cannot be empty');
+        const { clientWidth: playerWidth, clientHeight: playerHeight } = this.art.template.$player;
-        const $danmu = document.createElement('div');
+        const danmuItem = this.getDanmuItem();
-        $danmu.innerText = danmu.text;
+        danmuItem.$ref.innerText = danmu.text;
-        setStyles($danmu, {
+        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));
+        return {
-        this.art.emit('artplayerPluginDanmu:emit', danmu);
+            state: 'active',
+            $ref: append(this.layer.$ref, $ref),
+        };
+    }
+
+    getDanmuTop(playerHeight, danmuHeight) {
+        return 0;
+    }
+
+    update() {
+        if (!this.isStop && this.option.danmu.length) {
+            // 播放速度
+        }
     }
 
     config(option) {

packages/artplayer-plugin-danmu/src/index.js

@@ -6,12 +6,12 @@ function artplayerPluginDanmu(option) {
         const danmuku = new Danmuku(art, option);
         return {
             name: 'artplayerPluginDanmu',
-            emit: danmuku.emit,
+            emit: danmuku.emit.bind(danmuku),
-            start: danmuku.start,
+            start: danmuku.start.bind(danmuku),
-            stop: danmuku.stop,
+            stop: danmuku.stop.bind(danmuku),
-            hide: danmuku.hide,
+            hide: danmuku.hide.bind(danmuku),
-            show: danmuku.show,
+            show: danmuku.show.bind(danmuku),
-            config: danmuku.config,
+            config: danmuku.config.bind(danmuku),
         };
     };
 }