add layer

docs/css/artplayer.css

@@ -1 +1 @@
-.artplayer-wrap{position:relative;width:100%;height:100%;text-align:left}.artplayer-wrap .artplayer-controls,.artplayer-wrap .artplayer-layers,.artplayer-wrap .artplayer-loading,.artplayer-wrap .artplayer-notice,.artplayer-wrap .artplayer-poster,.artplayer-wrap .artplayer-video{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}
+.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}

docs/index.html

@@ -28,26 +28,49 @@
         var player = new Artplayer({
             container: document.querySelector('.artplayer-app'),
             url: './video/frag_bunny.mp4',
-            poster: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg'
+            poster: './img/poster.png',
+            contextmenu: [{
+                text: 'custom1',
+                link: 'https://github.com/zhw2590582/artplayer'
+            },
+            {
+                text: 'custom2',
+                click: (player) => {
+                    console.log(player);
+                }
+            }]
         });
 
-        player.on('video:canplay', event => {
-			console.log(event);
-        });
-        
-        player.on('video:play', event => {
-			console.log(event);
-        });
-        
-        player.on('video:progress', event => {
-			console.log(event);
-        });
-        
-        player.on('video:pause', event => {
-			console.log(event);
-		});
-
         console.log(player);
+
+        [
+            'abort',
+            'canplay',
+            'canplaythrough',
+            'durationchange',
+            'emptied',
+            'ended',
+            'error',
+            'loadeddata',
+            'loadedmetadata',
+            'loadstart',
+            'pause',
+            'play',
+            'playing',
+            'progress',
+            'ratechange',
+            'seeked',
+            'seeking',
+            'stalled',
+            'suspend',
+            'timeupdate',
+            'volumechange',
+            'waiting'
+        ].forEach(item => {
+            player.on('video:' + item, event => {
+                console.log(event);
+            });
+        });
     </script>
 </body>
 

docs/js/artplayer.js

@@ -325,33 +325,29 @@
     createClass(Template, [{
       key: "init",
       value: function init() {
-        this.art.refs.$container.innerHTML = "\n        <div class=\"artplayer-wrap\">\n          <video class=\"artplayer-video\" webkit-playsinline playsinline></video>\n          <div class=\"artplayer-controls\"></div>\n          <div class=\"artplayer-layers\"></div>\n          <div class=\"artplayer-loading\"></div>\n          <div class=\"artplayer-notice\"></div>\n        </div>\n      ";
+        var refs = this.art.refs;
-        this.art.refs.$wrap = this.art.refs.$container.querySelector('.artplayer-wrap');
+        refs.$container.innerHTML = "\n        <div class=\"artplayer-wrap\">\n          <video class=\"artplayer-video\" webkit-playsinline playsinline></video>\n          <div class=\"artplayer-controls\"></div>\n          <div class=\"artplayer-layers\"></div>\n          <div class=\"artplayer-loading\"></div>\n          <div class=\"artplayer-notice\"></div>\n        </div>\n      ";
-        this.art.refs.$video = this.art.refs.$container.querySelector('.artplayer-video');
+        refs.$wrap = refs.$container.querySelector('.artplayer-wrap');
-        this.art.refs.$controls = this.art.refs.$container.querySelector('.artplayer-controls');
+        refs.$video = refs.$container.querySelector('.artplayer-video');
-        this.art.refs.$layers = this.art.refs.$container.querySelector('.artplayer-layers');
+        refs.$controls = refs.$container.querySelector('.artplayer-controls');
-        this.art.refs.$loading = this.art.refs.$container.querySelector('.artplayer-loading');
+        refs.$layers = refs.$container.querySelector('.artplayer-layers');
-        this.art.refs.$notice = this.art.refs.$container.querySelector('.artplayer-notice');
+        refs.$loading = refs.$container.querySelector('.artplayer-loading');
+        refs.$notice = refs.$container.querySelector('.artplayer-notice');
       }
     }]);
 
     return Template;
   }();
 
-  var ZHCN = {};
-
-  var ZHTW = {};
-
-  var EN = {};
-
-  var JP = {};
-
   var i18nMap = {
-    zh: ZHCN,
+    'zh-cn': {
-    'zh-cn': ZHCN,
+      'About author': '关于作者',
-    'zh-tw': ZHTW,
+      'Video info': '视频统计信息'
-    en: EN,
+    },
-    jp: JP
+    'zh-tw': {
+      'About author': '關於作者',
+      'Video info': '影片統計訊息'
+    }
   };
 
   var I18n =
@@ -545,11 +541,89 @@
     classCallCheck(this, Controls);
   };
 
-  var Contextmenu = function Contextmenu(art) {
+  var Contextmenu =
-    classCallCheck(this, Contextmenu);
+  /*#__PURE__*/
+  function () {
+    function Contextmenu(art) {
+      classCallCheck(this, Contextmenu);
 
-    this.art = art;
+      this.art = art;
-  };
+      this.state = false;
+      this.init();
+    }
+
+    createClass(Contextmenu, [{
+      key: "init",
+      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,
+            refs = _this$art.refs,
+            proxy = _this$art.events.proxy;
+        option.contextmenu.push({
+          text: i18n.get('Video info'),
+          click: function click(art) {
+            console.log(art);
+          }
+        }, {
+          text: i18n.get('About author'),
+          link: 'https://github.com/zhw2590582'
+        });
+        proxy(refs.$container, 'contextmenu', function (event) {
+          event.preventDefault();
+
+          if (!_this.state) {
+            _this.creatMenu();
+
+            _this.state = true;
+          }
+
+          _this.setPos(event);
+
+          _this.show();
+        });
+        proxy(document, 'contextmenu', function (event) {
+          if (!event.path.includes(refs.$container)) {
+            _this.hide();
+          }
+        });
+      }
+    }, {
+      key: "creatMenu",
+      value: function creatMenu() {
+        console.log('creatMenu');
+      }
+    }, {
+      key: "setPos",
+      value: function setPos() {
+        console.log('setPos');
+      }
+    }, {
+      key: "hide",
+      value: function hide() {
+        console.log('hide');
+      }
+    }, {
+      key: "show",
+      value: function show() {
+        console.log('show');
+      }
+    }]);
+
+    return Contextmenu;
+  }();
 
   var Danmu = function Danmu(art) {
     classCallCheck(this, Danmu);
@@ -599,13 +673,30 @@
     this.art = art;
   };
 
-  var Layers = function Layers(art) {
-    classCallCheck(this, Layers);
-
-    this.art = art;
-  };
-
   var id = 0;
+
+  var Layers =
+  /*#__PURE__*/
+  function () {
+    function Layers(art) {
+      classCallCheck(this, Layers);
+
+      this.art = art;
+    }
+
+    createClass(Layers, [{
+      key: "add",
+      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    "));
+      }
+    }]);
+
+    return Layers;
+  }();
+
+  var id$1 = 0;
   var instances = [];
 
   var Artplayer =
@@ -638,14 +729,14 @@
         this.events = new Events(this);
         this.player = new Player(this);
         this.mse = new Mse(this);
+        this.layers = new Layers(this);
         this.controls = new Controls(this);
         this.contextmenu = new Contextmenu(this);
         this.danmaku = new Danmu(this);
         this.subtitle = new Subtitle(this);
         this.info = new Info(this);
         this.hotkey = new Hotkey(this);
-        this.layers = new Layers(this);
+        this.id = id$1++;
-        this.id = id++;
         instances.push(this);
       }
     }, {
@@ -695,6 +786,7 @@
           preload: 'auto',
           type: '',
           mimeCodec: '',
+          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/zh-CN.js","../../src/i18n/zh-TW.js","../../src/i18n/en.js","../../src/i18n/jp.js","../../src/i18n/index.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\" |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,5 +1,62 @@
 export default class Contextmenu {
   constructor(art) {
     this.art = art;
+    this.state = false;
+    this.init();
+  }
+
+  init() {
+    this.art.layers.add({
+      name: 'test1',
+      html: 'test2',
+      index: 10
+    });
+    this.art.layers.add({
+      name: 'test3',
+      html: 'test4',
+      index: 11
+    });
+    const { option, i18n, refs, events: { proxy } } = this.art;
+    option.contextmenu.push({
+      text: i18n.get('Video info'),
+      click: art => {
+        console.log(art);
+      }
+    }, {
+      text: i18n.get('About author'),
+      link: 'https://github.com/zhw2590582'
+    });
+
+    proxy(refs.$container, 'contextmenu', event => {
+      event.preventDefault();
+      if (!this.state) {
+        this.creatMenu();
+        this.state = true;
+      }
+      this.setPos(event);
+      this.show();
+    });
+
+    proxy(document, 'contextmenu', event => {
+      if (!event.path.includes(refs.$container)) {
+        this.hide();
+      }
+    });
+  }
+
+  creatMenu() {
+    console.log('creatMenu');
+  }
+
+  setPos() {
+    console.log('setPos');
+  }
+
+  hide() {
+    console.log('hide');
+  }
+
+  show() {
+    console.log('show');
   }
 }

src/i18n.js

@@ -1,14 +1,12 @@
-import ZHCN from './zh-CN';
-import ZHTW from './zh-TW';
-import EN from './en';
-import JP from './jp';
-
 const i18nMap = {
-  zh: ZHCN,
+  'zh-cn': {
-  'zh-cn': ZHCN,
+    'About author': '关于作者',
-  'zh-tw': ZHTW,
+    'Video info': '视频统计信息'
-  en: EN,
+  },
-  jp: JP
+  'zh-tw': {
+    'About author': '關於作者',
+    'Video info': '影片統計訊息'
+  }
 };
 
 export default class I18n {

src/i18n/en.js

@@ -1,3 +0,0 @@
-export default {
-    
-}

src/i18n/jp.js

@@ -1,3 +0,0 @@
-export default {
-    
-}

src/i18n/zh-CN.js

@@ -1,3 +0,0 @@
-export default {
-    
-}

src/i18n/zh-TW.js

@@ -1,3 +0,0 @@
-export default {
-    
-}

src/index.js

@@ -39,6 +39,7 @@ class Artplayer extends Emitter {
       preload: 'auto',
       type: '',
       mimeCodec: '',
+      contextmenu: [],
       lang: navigator.language.toLowerCase()
     };
   }
@@ -70,13 +71,13 @@ class Artplayer extends Emitter {
     this.events = new Events(this);
     this.player = new Player(this);
     this.mse = new Mse(this);
+    this.layers = new Layers(this);
     this.controls = new Controls(this);
     this.contextmenu = new Contextmenu(this);
     this.danmaku = new Danmaku(this);
     this.subtitle = new Subtitle(this);
     this.info = new Info(this);
     this.hotkey = new Hotkey(this);
-    this.layers = new Layers(this);
 
     this.id = id++;
     instances.push(this);

src/layers.js

@@ -1,5 +1,16 @@
+let id = 0;
 export default class Layers {
   constructor(art) {
     this.art = art;
   }
+
+  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}">
+        ${option.html}
+      </div>
+    `);
+  }
 }

src/style/index.scss

@@ -5,9 +5,11 @@
     width: 100%;
     height: 100%;
     text-align: left;
+    user-select: none;
 
     .artplayer-video {
         position: absolute;
+        z-index: 1;
         left: 0;
         top: 0;
         right: 0;
@@ -16,53 +18,14 @@
         height: 100%;
     }
 
-    .artplayer-poster {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%; 
-    }
-
-    .artplayer-controls {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%; 
-    }
-
-    .artplayer-loading {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%; 
-    }
-
-    .artplayer-notice {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%; 
-    }
-
     .artplayer-layers {
         position: absolute;
+        z-index: 2;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
         width: 100%;
-        height: 100%; 
+        height: 100%;
     }
 }

src/template.js

@@ -5,7 +5,8 @@ export default class Template {
   }
 
   init() {
-    this.art.refs.$container.innerHTML = `
+    const { refs } = this.art;
+    refs.$container.innerHTML = `
         <div class="artplayer-wrap">
           <video class="artplayer-video" webkit-playsinline playsinline></video>
           <div class="artplayer-controls"></div>
@@ -14,23 +15,11 @@ export default class Template {
           <div class="artplayer-notice"></div>
         </div>
       `;
-    this.art.refs.$wrap = this.art.refs.$container.querySelector(
+    refs.$wrap = refs.$container.querySelector('.artplayer-wrap');
-      '.artplayer-wrap'
+    refs.$video = refs.$container.querySelector('.artplayer-video');
-    );
+    refs.$controls = refs.$container.querySelector('.artplayer-controls');
-    this.art.refs.$video = this.art.refs.$container.querySelector(
+    refs.$layers = refs.$container.querySelector('.artplayer-layers');
-      '.artplayer-video'
+    refs.$loading = refs.$container.querySelector('.artplayer-loading');
-    );
+    refs.$notice = refs.$container.querySelector('.artplayer-notice');
-    this.art.refs.$controls = this.art.refs.$container.querySelector(
-      '.artplayer-controls'
-    );
-    this.art.refs.$layers = this.art.refs.$container.querySelector(
-      '.artplayer-layers'
-    );
-    this.art.refs.$loading = this.art.refs.$container.querySelector(
-      '.artplayer-loading'
-    );
-    this.art.refs.$notice = this.art.refs.$container.querySelector(
-      '.artplayer-notice'
-    );
   }
 }