add more files

docs/css/app.css

@@ -29,13 +29,9 @@
     border-radius: 50px;
 }
 
-.consola-container {
+.artplayer-app {
-    opacity: .75 !important;
-}
-
-.artplayer-wrap {
     width: 600px;
-    height: 340px;
+    height: 337.5px;
     margin: 40px auto 0;
     background: #000;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

docs/css/artplayer.css

@@ -1 +1 @@
-body{background:#fff}
+.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%}

docs/index.html

@@ -21,12 +21,14 @@
         <div class="github">
             <a href="https://github.com/zhw2590582/artplayer">GITHUB</a>
         </div>
-        <div class="artplayer-wrap"></div>
+        <div class="artplayer-app"></div>
     </div>
     <script src="./js/artplayer.js"></script>
     <script>
         var player = new Artplayer({
-            container: document.querySelector('.artplayer-wrap'),
+            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'
         });
 
         console.log(player);

docs/js/artplayer.js

@@ -115,72 +115,6 @@
 
   var inherits = _inherits;
 
-  function E () {
-    // Keep this empty so it's easier to inherit from
-    // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
-  }
-
-  E.prototype = {
-    on: function (name, callback, ctx) {
-      var e = this.e || (this.e = {});
-
-      (e[name] || (e[name] = [])).push({
-        fn: callback,
-        ctx: ctx
-      });
-
-      return this;
-    },
-
-    once: function (name, callback, ctx) {
-      var self = this;
-      function listener () {
-        self.off(name, listener);
-        callback.apply(ctx, arguments);
-      }
-      listener._ = callback;
-      return this.on(name, listener, ctx);
-    },
-
-    emit: function (name) {
-      var data = [].slice.call(arguments, 1);
-      var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
-      var i = 0;
-      var len = evtArr.length;
-
-      for (i; i < len; i++) {
-        evtArr[i].fn.apply(evtArr[i].ctx, data);
-      }
-
-      return this;
-    },
-
-    off: function (name, callback) {
-      var e = this.e || (this.e = {});
-      var evts = e[name];
-      var liveEvents = [];
-
-      if (evts && callback) {
-        for (var i = 0, len = evts.length; i < len; i++) {
-          if (evts[i].fn !== callback && evts[i].fn._ !== callback)
-            liveEvents.push(evts[i]);
-        }
-      }
-
-      // Remove event from queue to prevent memory leak
-      // Suggested by https://github.com/lazd
-      // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
-
-      (liveEvents.length)
-        ? e[name] = liveEvents
-        : delete e[name];
-
-      return this;
-    }
-  };
-
-  var tinyEmitter = E;
-
   function _isNativeFunction(fn) {
     return Function.toString.call(fn).indexOf("[native code]") !== -1;
   }
@@ -278,9 +212,117 @@
     return ArtPlayerError;
   }(wrapNativeSuper(Error));
 
-  function verification$$1(option) {
+  function errorHandle(condition, msg) {
-    console.log(option);
+    if (!condition) {
+      throw new ArtPlayerError(msg);
+    }
   }
+  function clamp(num, a, b) {
+    return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
+  }
+
+  function verification(option) {
+    errorHandle(option.container, '\'container\' option is required.');
+    errorHandle(option.url, '\'url\' option is required.');
+    errorHandle(option.container instanceof Element, "'container' option require 'Element' type, but got '".concat(_typeof_1(option.container), "'."));
+    errorHandle(typeof option.url === 'string' || Array.isArray(option.url), "'url' option require 'string' or 'array' type, but got '".concat(_typeof_1(option.url), "'."));
+    errorHandle(typeof option.poster === 'string', "'url' option require 'string' type, but got '".concat(_typeof_1(option.poster), "'."));
+    errorHandle(typeof option.volume === 'number', "'volume' option require 'number' type, but got '".concat(_typeof_1(option.volume), "'."));
+    errorHandle(typeof option.autoplay === 'boolean', "'autoplay' option require 'boolean' type, but got '".concat(_typeof_1(option.autoplay), "'."));
+    errorHandle(['none', 'metadata', 'auto'].indexOf(option.preload) > -1, '\'preload\' option require one of \'none、metadata、auto\'.');
+  }
+
+  function E () {
+    // Keep this empty so it's easier to inherit from
+    // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
+  }
+
+  E.prototype = {
+    on: function (name, callback, ctx) {
+      var e = this.e || (this.e = {});
+
+      (e[name] || (e[name] = [])).push({
+        fn: callback,
+        ctx: ctx
+      });
+
+      return this;
+    },
+
+    once: function (name, callback, ctx) {
+      var self = this;
+      function listener () {
+        self.off(name, listener);
+        callback.apply(ctx, arguments);
+      }
+      listener._ = callback;
+      return this.on(name, listener, ctx);
+    },
+
+    emit: function (name) {
+      var data = [].slice.call(arguments, 1);
+      var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+      var i = 0;
+      var len = evtArr.length;
+
+      for (i; i < len; i++) {
+        evtArr[i].fn.apply(evtArr[i].ctx, data);
+      }
+
+      return this;
+    },
+
+    off: function (name, callback) {
+      var e = this.e || (this.e = {});
+      var evts = e[name];
+      var liveEvents = [];
+
+      if (evts && callback) {
+        for (var i = 0, len = evts.length; i < len; i++) {
+          if (evts[i].fn !== callback && evts[i].fn._ !== callback)
+            liveEvents.push(evts[i]);
+        }
+      }
+
+      // Remove event from queue to prevent memory leak
+      // Suggested by https://github.com/lazd
+      // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
+
+      (liveEvents.length)
+        ? e[name] = liveEvents
+        : delete e[name];
+
+      return this;
+    }
+  };
+
+  var tinyEmitter = E;
+
+  var Template =
+  /*#__PURE__*/
+  function () {
+    function Template(art) {
+      classCallCheck(this, Template);
+
+      this.art = art;
+      this.init();
+    }
+
+    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      ";
+        this.art.refs.$wrap = this.art.refs.$container.querySelector('.artplayer-wrap');
+        this.art.refs.$video = this.art.refs.$container.querySelector('.artplayer-video');
+        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');
+      }
+    }]);
+
+    return Template;
+  }();
 
   var ZHCN = {};
 
@@ -319,12 +361,35 @@
     return I18n;
   }();
 
-  var Player = function Player(_ref) {//
+  var Player =
+  /*#__PURE__*/
+  function () {
+    function Player(art) {
+      classCallCheck(this, Player);
 
-    var option = _ref.option;
+      this.art = art;
+      this.init();
+    }
 
-    classCallCheck(this, Player);
+    createClass(Player, [{
-  };
+      key: "init",
+      value: function init() {
+        var option = this.art.option;
+        var $video = this.art.refs.$video;
+        $video.controls = false;
+        $video.poster = option.poster;
+        $video.volume = clamp(option.volume, 0, 1);
+        $video.autoplay = option.autoplay;
+        $video.preload = option.preload;
+
+        if (typeof option.url === 'string') {
+          $video.src = option.url;
+        } else if (Array.isArray(option.url)) ;
+      }
+    }]);
+
+    return Player;
+  }();
 
   var Controls = function Controls(_ref) {//
 
@@ -390,7 +455,7 @@
 
       _this = possibleConstructorReturn(this, getPrototypeOf(Artplayer).call(this));
       _this.option = Object.assign({}, Artplayer.DEFAULTS, option);
-      verification$$1(_this.option);
+      verification(_this.option);
 
       _this.init();
 
@@ -401,14 +466,15 @@
       key: "init",
       value: function init() {
         this.refs = {
-          container: this.option.container
+          $container: this.option.container
         };
         this.destroyEvents = [];
+        this.template = new Template(this);
         this.i18n = new I18n(this);
         this.player = new Player(this);
         this.controls = new Controls(this);
         this.contextmenu = new Contextmenu(this);
-        this.danmu = new Danmu(this);
+        this.danmaku = new Danmu(this);
         this.subtitle = new Captions(this);
         this.info = new Info(this);
         this.events = new Events(this);
@@ -426,6 +492,27 @@
         instances.splice(instances.indexOf(this), 1);
       }
     }], [{
+      key: "use",
+      value: function use(plugin) {
+        var installedPlugins = this.plugins || (this.plugins = []);
+
+        if (installedPlugins.indexOf(plugin) > -1) {
+          return this;
+        }
+
+        var args = Array.from(arguments).slice(1);
+        args.unshift(this);
+
+        if (typeof plugin.install === 'function') {
+          plugin.install.apply(plugin, args);
+        } else if (typeof plugin === 'function') {
+          plugin.apply(null, args);
+        }
+
+        installedPlugins.push(plugin);
+        return this;
+      }
+    }, {
       key: "version",
       get: function get() {
         return '1.0.0';
@@ -435,46 +522,12 @@
       get: function get() {
         return {
           container: document.querySelector('.artplayer'),
-          live: false,
+          url: '',
-          autoplay: false,
+          poster: '',
-          theme: '#b7daff',
-          loop: false,
-          lang: navigator.language.toLowerCase(),
-          screenshot: false,
-          hotkey: true,
-          preload: 'auto',
           volume: 0.7,
-          logo: '',
+          autoplay: false,
-          apiBackend: '',
+          preload: 'auto',
-          video: {
+          lang: navigator.language.toLowerCase()
-            quality: '',
-            defaultQuality: '',
-            url: '',
-            pic: '',
-            thumbnails: '',
-            type: 'auto',
-            customType: ''
-          },
-          subtitle: {
-            url: '',
-            type: 'webvtt',
-            fontSize: '20px',
-            bottom: '40px',
-            color: '#fff'
-          },
-          danmaku: {
-            id: '',
-            api: '',
-            token: '',
-            maximum: '',
-            addition: '',
-            user: '',
-            bottom: '',
-            unlimited: ''
-          },
-          contextmenu: [],
-          highlight: [],
-          mutex: true
         };
       }
     }]);

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/tiny-emitter/index.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/verification.js","../../src/i18n/zh-CN.js","../../src/i18n/zh-TW.js","../../src/i18n/en.js","../../src/i18n/jp.js","../../src/i18n/index.js","../../src/player.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.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 E () {\n  // Keep this empty so it's easier to inherit from\n  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n}\n\nE.prototype = {\n  on: function (name, callback, ctx) {\n    var e = this.e || (this.e = {});\n\n    (e[name] || (e[name] = [])).push({\n      fn: callback,\n      ctx: ctx\n    });\n\n    return this;\n  },\n\n  once: function (name, callback, ctx) {\n    var self = this;\n    function listener () {\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/zh-CN.js","../../src/i18n/zh-TW.js","../../src/i18n/en.js","../../src/i18n/jp.js","../../src/i18n/index.js","../../src/player.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmaku.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.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 === \"function\") return true;\n\n  trLine truncated

src/index.js

@@ -1,5 +1,7 @@
 import './style/index.scss';
+import verification from './utils/verification';
 import Emitter from 'tiny-emitter';
+import Template from './template';
 import I18n from './i18n';
 import Player from './player';
 import Controls from './controls';
@@ -17,6 +19,7 @@ class Artplayer extends Emitter {
   constructor(option) {
     super();
     this.option = Object.assign({}, Artplayer.DEFAULTS, option);
+    verification(this.option);
     this.init();
   }
 
@@ -27,46 +30,12 @@ class Artplayer extends Emitter {
   static get DEFAULTS() {
     return {
       container: document.querySelector('.artplayer'),
-      live: false,
+      url: '',
-      autoplay: false,
+      poster: '',
-      theme: '#b7daff',
-      loop: false,
-      lang: navigator.language.toLowerCase(),
-      screenshot: false,
-      hotkey: true,
-      preload: 'auto',
       volume: 0.7,
-      logo: '',
+      autoplay: false,
-      apiBackend: '',
+      preload: 'auto',
-      video: {
+      lang: navigator.language.toLowerCase()
-        quality: '',
-        defaultQuality: '',
-        url: '',
-        pic: '',
-        thumbnails: '',
-        type: 'auto',
-        customType: ''
-      },
-      subtitle: {
-        url: '',
-        type: 'webvtt',
-        fontSize: '20px',
-        bottom: '40px',
-        color: '#fff'
-      },
-      danmaku: {
-        id: '',
-        api: '',
-        token: '',
-        maximum: '',
-        addition: '',
-        user: '',
-        bottom: '',
-        unlimited: ''
-      },
-      contextmenu: [],
-      highlight: [],
-      mutex: true
     };
   }
 
@@ -89,11 +58,12 @@ class Artplayer extends Emitter {
 
   init() {
     this.refs = {
-      container: this.option.container
+      $container: this.option.container
     };
 
     this.destroyEvents = [];
 
+    this.template = new Template(this);
     this.i18n = new I18n(this);
     this.player = new Player(this);
     this.controls = new Controls(this);

src/player.js

@@ -1,5 +1,24 @@
+import { clamp } from './utils';
+
 export default class Player {
-  constructor({ option }) {
+  constructor(art) {
-    //
+    this.art = art;
+    this.init();
+  }
+
+  init() {
+    const { option } = this.art;
+    const { $video } = this.art.refs;
+    $video.controls = false;
+    $video.poster = option.poster;
+    $video.volume = clamp(option.volume, 0, 1);
+    $video.autoplay = option.autoplay;
+    $video.preload = option.preload;
+
+    if (typeof option.url === 'string') {
+      $video.src = option.url;
+    } else if (Array.isArray(option.url)) {
+      //
+    }
   }
 }

src/style/index.scss

@@ -1,3 +1,68 @@
-body {
+@charset "UTF-8";
-    background: #fff;
+
+.artplayer-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: left;
+
+    .artplayer-video {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        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;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%; 
+    }
 }

src/template.js

@@ -0,0 +1,36 @@
+export default class Template {
+  constructor(art) {
+    this.art = art;
+    this.init();
+  }
+
+  init() {
+    this.art.refs.$container.innerHTML = `
+        <div class="artplayer-wrap">
+          <video class="artplayer-video" webkit-playsinline playsinline></video>
+          <div class="artplayer-controls"></div>
+          <div class="artplayer-layers"></div>
+          <div class="artplayer-loading"></div>
+          <div class="artplayer-notice"></div>
+        </div>
+      `;
+    this.art.refs.$wrap = this.art.refs.$container.querySelector(
+      '.artplayer-wrap'
+    );
+    this.art.refs.$video = this.art.refs.$container.querySelector(
+      '.artplayer-video'
+    );
+    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'
+    );
+  }
+}

src/utils/index.js

@@ -1,8 +1,11 @@
 import ArtPlayerError from './ArtPlayerError';
-export * from './verification';
 
 export function errorHandle(condition, msg) {
   if (!condition) {
     throw new ArtPlayerError(msg);
   }
 }
+
+export function clamp(num, a, b) {
+  return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
+}

src/utils/verification.js

@@ -0,0 +1,37 @@
+import { errorHandle } from './index';
+
+export default function verification(option) {
+  errorHandle(option.container, '\'container\' option is required.');
+
+  errorHandle(option.url, '\'url\' option is required.');
+
+  errorHandle(
+    option.container instanceof Element,
+    `'container' option require 'Element' type, but got '${typeof option.container}'.`
+  );
+
+  errorHandle(
+    typeof option.url === 'string' || Array.isArray(option.url),
+    `'url' option require 'string' or 'array' type, but got '${typeof option.url}'.`
+  );
+
+  errorHandle(
+    typeof option.poster === 'string',
+    `'url' option require 'string' type, but got '${typeof option.poster}'.`
+  );
+
+  errorHandle(
+    typeof option.volume === 'number',
+    `'volume' option require 'number' type, but got '${typeof option.volume}'.`
+  );
+
+  errorHandle(
+    typeof option.autoplay === 'boolean',
+    `'autoplay' option require 'boolean' type, but got '${typeof option.autoplay}'.`
+  );
+
+  errorHandle(
+    ['none', 'metadata', 'auto'].indexOf(option.preload) > -1,
+    '\'preload\' option require one of \'none、metadata、auto\'.'
+  );
+}