add meun

docs/css/artplayer.css

@@ -1 +1 @@
-.artplayer-wrap{position:relative;width:100%;height:100%;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.artplayer-wrap .artplayer-video{z-index:1}.artplayer-wrap .artplayer-layers,.artplayer-wrap .artplayer-video{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-wrap .artplayer-layers{z-index:2}
+.artplayer-wrap{position:relative;width:100%;height:100%;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.artplayer-wrap .artplayer-video{z-index:1}.artplayer-wrap .artplayer-layers,.artplayer-wrap .artplayer-video{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}.artplayer-wrap .artplayer-layers{z-index:2}.artplayer-wrap .artplayer-contextmenu{position:absolute;z-index:3;left:0;top:0;width:170px;padding:5px 0;background:rgba(0,0,0,.75)}.artplayer-wrap .artplayer-contextmenu a{font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}

docs/index.html

@@ -28,17 +28,7 @@
         var player = new Artplayer({
             container: document.querySelector('.artplayer-app'),
             url: './video/frag_bunny.mp4',
-            poster: './img/poster.png',
+            poster: './img/poster.png'
-            contextmenu: [{
-                text: 'custom1',
-                link: 'https://github.com/zhw2590582/artplayer'
-            },
-            {
-                text: 'custom2',
-                click: (player) => {
-                    console.log(player);
-                }
-            }]
         });
 
         console.log(player);

docs/js/artplayer.js

@@ -244,6 +244,7 @@
     errorHandle(typeof option.lang === 'string', "'lang' option require 'string' type, but got '".concat(_typeof_1(option.lang), "'."));
     errorHandle(typeof option.type === 'string', "'type' option require 'string' type, but got '".concat(_typeof_1(option.type), "'."));
     errorHandle(typeof option.mimeCodec === 'string', "'mimeCodec' option require 'string' type, but got '".concat(_typeof_1(option.mimeCodec), "'."));
+    errorHandle(Array.isArray(option.layers), "'layers' option require 'array' type, but got '".concat(_typeof_1(option.layers), "'."));
   }
 
   function E () {
@@ -548,7 +549,6 @@
       classCallCheck(this, Contextmenu);
 
       this.art = art;
-      this.state = false;
       this.init();
     }
 
@@ -557,16 +557,6 @@
       value: function init() {
         var _this = this;
 
-        this.art.layers.add({
-          name: 'test1',
-          html: 'test2',
-          index: 10
-        });
-        this.art.layers.add({
-          name: 'test3',
-          html: 'test4',
-          index: 11
-        });
         var _this$art = this.art,
             option = _this$art.option,
             i18n = _this$art.i18n,
@@ -575,27 +565,28 @@
         option.contextmenu.push({
           text: i18n.get('Video info'),
           click: function click(art) {
-            console.log(art);
+            art.info.show();
           }
         }, {
           text: i18n.get('About author'),
           link: 'https://github.com/zhw2590582'
+        }, {
+          text: 'ArtPlayer 1.0.0',
+          link: 'https://github.com/zhw2590582/artplayer'
         });
         proxy(refs.$container, 'contextmenu', function (event) {
           event.preventDefault();
 
-          if (!_this.state) {
+          if (!refs.$contextmenu) {
             _this.creatMenu();
-
-            _this.state = true;
           }
 
-          _this.setPos(event);
-
           _this.show();
+
+          _this.setPos(event);
         });
-        proxy(document, 'contextmenu', function (event) {
+        proxy(refs.$container, 'click', function () {
-          if (!event.path.includes(refs.$container)) {
+          if (refs.$contextmenu) {
             _this.hide();
           }
         });
@@ -603,22 +594,78 @@
     }, {
       key: "creatMenu",
       value: function creatMenu() {
-        console.log('creatMenu');
+        var _this2 = this;
+
+        var _this$art2 = this.art,
+            option = _this$art2.option,
+            refs = _this$art2.refs,
+            proxy = _this$art2.events.proxy;
+        refs.$contextmenu = document.createElement('div');
+        refs.$contextmenu.classList.add('artplayer-contextmenu');
+        option.contextmenu.forEach(function (item) {
+          var $menu = document.createElement('a');
+          $menu.innerHTML = item.text;
+          $menu.classList.add('art-menu');
+
+          if (item.link) {
+            $menu.target = '_blank';
+            $menu.href = item.link;
+          } else if (item.click) {
+            $menu.href = '#';
+            proxy($menu, 'click', function (event) {
+              event.preventDefault();
+              item.click(_this2.art, event);
+
+              _this2.hide();
+            });
+          }
+
+          refs.$contextmenu.appendChild($menu);
+        });
+        refs.$wrap.appendChild(refs.$contextmenu);
       }
     }, {
       key: "setPos",
-      value: function setPos() {
+      value: function setPos(event) {
-        console.log('setPos');
+        var refs = this.art.refs;
+        var mouseX = event.clientX;
+        var mouseY = event.clientY;
+
+        var _refs$$container$getB = refs.$container.getBoundingClientRect(),
+            cHeight = _refs$$container$getB.height,
+            cWidth = _refs$$container$getB.width,
+            cLeft = _refs$$container$getB.left,
+            cTop = _refs$$container$getB.top;
+
+        var _refs$$contextmenu$ge = refs.$contextmenu.getBoundingClientRect(),
+            mHeight = _refs$$contextmenu$ge.height,
+            mWidth = _refs$$contextmenu$ge.width;
+
+        var menuLeft = mouseX - cLeft;
+        var menuTop = mouseY - cTop;
+
+        if (mouseX + mWidth > cLeft + cWidth) {
+          menuLeft -= mWidth;
+        }
+
+        if (mouseY + mHeight > cTop + cHeight) {
+          menuTop -= mHeight;
+        }
+
+        refs.$contextmenu.style.left = "".concat(menuLeft, "px");
+        refs.$contextmenu.style.top = "".concat(menuTop, "px");
       }
     }, {
       key: "hide",
       value: function hide() {
-        console.log('hide');
+        var refs = this.art.refs;
+        refs.$contextmenu && (refs.$contextmenu.style.display = 'none');
       }
     }, {
       key: "show",
       value: function show() {
-        console.log('show');
+        var refs = this.art.refs;
+        refs.$contextmenu && (refs.$contextmenu.style.display = 'block');
       }
     }]);
 
@@ -631,11 +678,29 @@
     this.art = art;
   };
 
-  var Info = function Info(art) {
+  var Info =
-    classCallCheck(this, Info);
+  /*#__PURE__*/
+  function () {
+    function Info(art) {
+      classCallCheck(this, Info);
 
-    this.art = art;
+      this.art = art;
-  };
+    }
+
+    createClass(Info, [{
+      key: "show",
+      value: function show() {
+        console.log('info show');
+      }
+    }, {
+      key: "hide",
+      value: function hide() {
+        console.log('info hide');
+      }
+    }]);
+
+    return Info;
+  }();
 
   var Subtitle = function Subtitle(art) {
     classCallCheck(this, Subtitle);
@@ -652,6 +717,7 @@
       this.art = art;
       this.destroys = [];
       this.proxy = this.proxy.bind(this);
+      this.init();
     }
 
     createClass(Events, [{
@@ -662,6 +728,11 @@
           target.removeEventListener(name, callback);
         });
       }
+    }, {
+      key: "init",
+      value: function init() {
+        console.log('init');
+      }
     }]);
 
     return Events;
@@ -682,6 +753,8 @@
       classCallCheck(this, Layers);
 
       this.art = art;
+      this.add = this.add.bind(this);
+      this.art.option.layers.forEach(this.add);
     }
 
     createClass(Layers, [{
@@ -689,7 +762,9 @@
       value: function add(option) {
         var refs = this.art.refs;
         id++;
-        refs.$layers.insertAdjacentHTML('beforeend', "\n      <div data-layer-index=\"".concat(id, "\" class=\"art-layer art-layer-").concat(option.name, "\" style=\"z-index: ").concat(option.index || id, "\">\n        ").concat(option.html, "\n      </div>\n    "));
+        refs.$layers.insertAdjacentHTML('beforeend', "\n      <div\n        data-art-layer-id=\"".concat(id, "\"\n        class=\"art-layer art-layer-").concat(option.name || id, "\"\n        style=\"z-index: ").concat(option.index || id, "\"\n      >\n        ").concat(option.html || '', "\n      </div>\n    "));
+        var $layer = refs.$layers.querySelector("[data-art-layer-id=\"".concat(id, "\"]"));
+        option.callback && option.callback($layer);
       }
     }]);
 
@@ -786,6 +861,7 @@
           preload: 'auto',
           type: '',
           mimeCodec: '',
+          layers: [],
           contextmenu: [],
           lang: navigator.language.toLowerCase()
         };

docs/js/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/utils/verification.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/utils/mediaElement.js","../../src/player.js","../../src/utils/mimeCodeces.js","../../src/utils/mseConfig.js","../../src/mse.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmaku.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../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;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function\");\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function _isNativeFunction(fn) {\n  return Function.toString.call(fn).indexOf(\"[native code]\") !== -1;\n}\n\nmodule.exports = _isNativeFunction;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n  if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n  if (Reflect.construct.sham) return false;\n  if (typeof Proxy ===Line truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/utils/verification.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/utils/mediaElement.js","../../src/player.js","../../src/utils/mimeCodeces.js","../../src/utils/mseConfig.js","../../src/mse.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmaku.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../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;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function\");\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function _isNativeFunction(fn) {\n  return Function.toString.call(fn).indexOf(\"[native code]\") !== -1;\n}\n\nmodule.exports = _isNativeFunction;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n  if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n  if (Reflect.construct.sham) return false;\n  if (typeof Proxy ===Line truncated

src/contextmenu.js

@@ -1,62 +1,107 @@
 export default class Contextmenu {
   constructor(art) {
     this.art = art;
-    this.state = false;
     this.init();
   }
 
   init() {
-    this.art.layers.add({
+    const {
-      name: 'test1',
+      option,
-      html: 'test2',
+      i18n,
-      index: 10
+      refs,
-    });
+      events: { proxy }
-    this.art.layers.add({
+    } = this.art;
-      name: 'test3',
+
-      html: 'test4',
+    option.contextmenu.push(
-      index: 11
+      {
-    });
+        text: i18n.get('Video info'),
-    const { option, i18n, refs, events: { proxy } } = this.art;
+        click: art => {
-    option.contextmenu.push({
+          art.info.show();
-      text: i18n.get('Video info'),
+        }
-      click: art => {
+      },
-        console.log(art);
+      {
+        text: i18n.get('About author'),
+        link: 'https://github.com/zhw2590582'
+      },
+      {
+        text: 'ArtPlayer __VERSION__',
+        link: 'https://github.com/zhw2590582/artplayer'
       }
-    }, {
+    );
-      text: i18n.get('About author'),
-      link: 'https://github.com/zhw2590582'
-    });
 
     proxy(refs.$container, 'contextmenu', event => {
       event.preventDefault();
-      if (!this.state) {
+      if (!refs.$contextmenu) {
         this.creatMenu();
-        this.state = true;
       }
-      this.setPos(event);
       this.show();
+      this.setPos(event);
     });
 
-    proxy(document, 'contextmenu', event => {
+    proxy(refs.$container, 'click', () => {
-      if (!event.path.includes(refs.$container)) {
+      if (refs.$contextmenu) {
         this.hide();
       }
     });
   }
 
   creatMenu() {
-    console.log('creatMenu');
+    const {
+      option,
+      refs,
+      events: { proxy }
+    } = this.art;
+    refs.$contextmenu = document.createElement('div');
+    refs.$contextmenu.classList.add('artplayer-contextmenu');
+    option.contextmenu.forEach(item => {
+      const $menu = document.createElement('a');
+      $menu.innerHTML = item.text;
+      $menu.classList.add('art-menu');
+      if (item.link) {
+        $menu.target = '_blank';
+        $menu.href = item.link;
+      } else if (item.click) {
+        $menu.href = '#';
+        proxy($menu, 'click', event => {
+          event.preventDefault();
+          item.click(this.art, event);
+          this.hide();
+        });
+      }
+      refs.$contextmenu.appendChild($menu);
+    });
+    refs.$wrap.appendChild(refs.$contextmenu);
   }
 
-  setPos() {
+  setPos(event) {
-    console.log('setPos');
+    const { refs } = this.art;
+    const mouseX = event.clientX;
+    const mouseY = event.clientY;
+    const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = refs.$container.getBoundingClientRect();
+    const { height: mHeight, width: mWidth } = refs.$contextmenu.getBoundingClientRect();
+
+    let menuLeft = mouseX - cLeft;
+    let menuTop = mouseY - cTop;
+
+    if (mouseX + mWidth > cLeft + cWidth) {
+      menuLeft -= mWidth;
+    }
+
+    if (mouseY + mHeight > cTop + cHeight) {
+      menuTop -= mHeight;
+    }
+
+    refs.$contextmenu.style.left = `${menuLeft}px`;
+    refs.$contextmenu.style.top = `${menuTop}px`;
   }
 
   hide() {
-    console.log('hide');
+    const { refs } = this.art;
+    refs.$contextmenu && (refs.$contextmenu.style.display = 'none');
   }
 
   show() {
-    console.log('show');
+    const { refs } = this.art;
+    refs.$contextmenu && (refs.$contextmenu.style.display = 'block');
   }
 }

src/events.js

@@ -3,6 +3,7 @@ export default class Events {
     this.art = art;
     this.destroys = [];
     this.proxy = this.proxy.bind(this);
+    this.init();
   }
 
   proxy(target, name, callback) {
@@ -11,4 +12,8 @@ export default class Events {
       target.removeEventListener(name, callback);
     });
   }
+
+  init() {
+    console.log('init');
+  }
 }

src/index.js

@@ -39,6 +39,7 @@ class Artplayer extends Emitter {
       preload: 'auto',
       type: '',
       mimeCodec: '',
+      layers: [],
       contextmenu: [],
       lang: navigator.language.toLowerCase()
     };

src/info.js

@@ -2,4 +2,12 @@ export default class Info {
   constructor(art) {
     this.art = art;
   }
+
+  show() {
+    console.log('info show');
+  }
+
+  hide() {
+    console.log('info hide');
+  }
 }

src/layers.js

@@ -2,15 +2,25 @@ let id = 0;
 export default class Layers {
   constructor(art) {
     this.art = art;
+    this.add = this.add.bind(this);
+    this.art.option.layers.forEach(this.add);
   }
 
   add(option) {
     const { refs } = this.art;
     id++;
+
     refs.$layers.insertAdjacentHTML('beforeend', `
-      <div data-layer-index="${id}" class="art-layer art-layer-${option.name}" style="z-index: ${option.index || id}">
+      <div
-        ${option.html}
+        data-art-layer-id="${id}"
+        class="art-layer art-layer-${option.name || id}"
+        style="z-index: ${option.index || id}"
+      >
+        ${option.html || ''}
       </div>
     `);
+
+    const $layer = refs.$layers.querySelector(`[data-art-layer-id="${id}"]`);
+    option.callback && option.callback($layer);
   }
 }

src/style/index.scss

@@ -28,4 +28,24 @@
         width: 100%;
         height: 100%;
     }
+
+    .artplayer-contextmenu {
+        position: absolute;
+        z-index: 3;
+        left: 0;
+        top: 0;
+        width: 170px;
+        padding: 5px 0;
+        background:rgba(0, 0, 0, 0.75);
+        a {
+            font-size: 13px;
+            display: block;
+            color: #fff;
+            padding: 7px 10px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            text-decoration: none;
+        }
+    }
 }

src/utils/verification.js

@@ -56,4 +56,8 @@ export default function verification(option) {
     `'mimeCodec' option require 'string' type, but got '${typeof option.mimeCodec}'.`
   );
 
+  errorHandle(
+    Array.isArray(option.layers),
+    `'layers' option require 'array' type, but got '${typeof option.layers}'.`
+  );
 }