xgplayer 3.1.0-alpha.0 → 3.1.0-alpha.2

package/es/player.js

@@ -1,14 +1,16 @@
 import { defineProperty as _defineProperty, inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, possibleConstructorReturn as _possibleConstructorReturn, get as _get, getPrototypeOf as _getPrototypeOf, objectSpread2 as _objectSpread2 } from "./_virtual/_rollupPluginBabelHelpers.js";
 import MediaProxy from "./mediaProxy.js";
-import { deepMerge, generateSessionId, setTimeout, createDom, typeOf, isMSE, createPositionBar, addClass, hasClass, removeClass, clearAllTimers, clearTimeout, isBlob } from "./utils/util.js";
+import util, { checkIsCurrentVideo } from "./utils/util.js";
+export { default as Util } from "./utils/util.js";
 import sniffer from "./utils/sniffer.js";
 export { default as Sniffer } from "./utils/sniffer.js";
+import INDEXDB from "./utils/database.js";
 import Errors from "./error.js";
 export { default as Errors } from "./error.js";
-import { CANPLAY, READY, ERROR, LOADED_DATA, PLAY, URL_NULL, COMPLETE, AUTOPLAY_STARTED, AUTOPLAY_PREVENTED, SEEKED, DEFINITION_CHANGE, AFTER_DEFINITION_CHANGE, RESET, DESTROY, PLAYER_FOCUS, PLAYER_BLUR, USER_ACTION, REPLAY, PLAYNEXT } from "./events.js";
+import { CANPLAY, USER_ACTION, FULLSCREEN_CHANGE, READY, ERROR, LOADED_DATA, PLAY, URL_NULL, COMPLETE, AUTOPLAY_STARTED, AUTOPLAY_PREVENTED, SEEKED, DEFINITION_CHANGE, AFTER_DEFINITION_CHANGE, RESET, DESTROY, CSS_FULLSCREEN_CHANGE, PLAYER_FOCUS, PLAYER_BLUR, VIDEO_RESIZE, REPLAY, PLAYNEXT } from "./events.js";
 import * as events from "./events.js";
 export { events as Events };
-import { PLATER_ID } from "./constant.js";
+import { PLATER_ID, FULLSCREEN_EVENTS, GET_FULLSCREEN_API, EXIT_FULLSCREEN_API } from "./constant.js";
 import { POSITIONS } from "./plugin/plugin.js";
 export { default as Plugin } from "./plugin/plugin.js";
 import BasePlugin from "./plugin/basePlugin.js";
@@ -20,6 +22,8 @@ import getDefaultConfig from "./defaultConfig.js";
 import { usePreset } from "./plugin/preset.js";
 import hooksDescriptor, { runHooks, delHooksDescriptor, hook, useHooks, removeHooks, usePluginHooks, removePluginHooks } from "./plugin/hooksDescriptor.js";
 import XG_DEBUG, { bindDebug } from "./utils/debug.js";
+import I18N from "./lang/i18n.js";
+export { default as I18N } from "./lang/i18n.js";
 import version from "./version.js";
 import { STATES, STATE_ARRAY } from "./state.js";
 var PlAYER_HOOKS = ["play", "pause", "replay", "retry"];
@@ -31,35 +35,99 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   function Player2(options) {
     var _this;
     _classCallCheck(this, Player2);
-    var config = deepMerge(getDefaultConfig(), options);
-    _this = _super.call(this, config);
+    var _config = util.deepMerge(getDefaultConfig(), options);
+    _this = _super.call(this, _config);
     _defineProperty(_assertThisInitialized(_this), "canPlayFunc", function() {
       if (!_this.config) {
         return;
       }
-      var _this$config = _this.config, autoplay = _this$config.autoplay, startTime = _this$config.startTime, defaultPlaybackRate = _this$config.defaultPlaybackRate;
-      XG_DEBUG.logInfo("player", "canPlayFunc, startTime", startTime);
-      if (startTime) {
-        _this.currentTime = startTime > _this.duration ? _this.duration : startTime;
-        _this.config.startTime = 0;
+      var _this$config = _this.config, autoplay = _this$config.autoplay, defaultPlaybackRate = _this$config.defaultPlaybackRate;
+      XG_DEBUG.logInfo("player", "canPlayFunc, startTime", _this.__startTime);
+      if (_this.__startTime > 0 && _this.duration > 0) {
+        _this.currentTime = _this.__startTime > _this.duration ? _this.duration : _this.__startTime;
+        _this.__startTime = -1;
       }
       _this.playbackRate = defaultPlaybackRate;
       (autoplay || _this._useAutoplay) && _this.mediaPlay();
       _this.off(CANPLAY, _this.canPlayFunc);
       _this.removeClass(STATE_CLASS.ENTER);
     });
+    _defineProperty(_assertThisInitialized(_this), "onFullscreenChange", function(event, isFullScreen) {
+      var delayResize = function delayResize2() {
+        util.setTimeout(_assertThisInitialized(_this), function() {
+          _this.resize();
+        }, 100);
+      };
+      var fullEl = util.getFullScreenEl();
+      if (_this._fullActionFrom) {
+        _this._fullActionFrom = "";
+      } else {
+        _this.emit(USER_ACTION, {
+          eventType: "system",
+          action: "switch_fullscreen",
+          pluginName: "player",
+          currentTime: _this.currentTime,
+          duration: _this.duration,
+          props: [{
+            prop: "fullscreen",
+            from: true,
+            to: false
+          }]
+        });
+      }
+      var isVideo = checkIsCurrentVideo(fullEl, _this.playerId, PLATER_ID);
+      if (isFullScreen || fullEl && (fullEl === _this._fullscreenEl || isVideo)) {
+        delayResize();
+        !_this.config.closeFocusVideoFocus && _this.media.focus();
+        _this.fullscreen = true;
+        _this.changeFullStyle(_this.root, fullEl, STATE_CLASS.FULLSCREEN);
+        _this.emit(FULLSCREEN_CHANGE, true, _this._fullScreenOffset);
+        if (_this.cssfullscreen) {
+          _this.exitCssFullscreen();
+        }
+      } else if (_this.fullscreen) {
+        delayResize();
+        var _assertThisInitialize = _assertThisInitialized(_this), _fullScreenOffset = _assertThisInitialize._fullScreenOffset, config = _assertThisInitialize.config;
+        if (config.needFullscreenScroll) {
+          window.scrollTo(_fullScreenOffset.left, _fullScreenOffset.top);
+          util.setTimeout(_assertThisInitialized(_this), function() {
+            _this.fullscreen = false;
+            _this._fullScreenOffset = null;
+          }, 100);
+        } else {
+          !_this.config.closeFocusVideoFocus && _this.media.focus();
+          _this.fullscreen = false;
+          _this._fullScreenOffset = null;
+        }
+        if (!_this.cssfullscreen) {
+          _this.recoverFullStyle(_this.root, _this._fullscreenEl, STATE_CLASS.FULLSCREEN);
+        } else {
+          _this.removeClass(STATE_CLASS.FULLSCREEN);
+        }
+        _this._fullscreenEl = null;
+        _this.emit(FULLSCREEN_CHANGE, false);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onWebkitbeginfullscreen", function(e) {
+      _this._fullscreenEl = _this.media;
+      _this.onFullscreenChange(e, true);
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onWebkitendfullscreen", function(e) {
+      _this.onFullscreenChange(e, false);
+    });
     hooksDescriptor(_assertThisInitialized(_this), PlAYER_HOOKS);
-    _this.config = config;
-    _this._pluginInfoId = generateSessionId();
+    _this.config = _config;
+    _this._pluginInfoId = util.generateSessionId();
     bindDebug(_assertThisInitialized(_this));
     var defaultPreset = _this.constructor.defaultPreset;
-    if (_this.config.presets.length) {
-      var defaultIdx = _this.config.presets.indexOf("default");
+    var presets = _this.config.presets;
+    if (presets.length) {
+      var defaultIdx = presets.indexOf("default");
       if (defaultIdx >= 0 && defaultPreset) {
-        _this.config.presets[defaultIdx] = defaultPreset;
+        presets[defaultIdx] = defaultPreset;
       }
     } else if (defaultPreset) {
-      _this.config.presets.push(defaultPreset);
+      presets.push(defaultPreset);
     }
     _this.userTimer = null;
     _this.waitTimer = null;
@@ -69,6 +137,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     _this.isSeeking = false;
     _this.isCanplay = false;
     _this._useAutoplay = false;
+    _this.__startTime = -1;
     _this.rotateDeg = 0;
     _this.isActive = false;
     _this.fullscreen = false;
@@ -109,20 +178,22 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       duration: 0
     };
     _this.innerContainer = null;
-    _this.controls = null;
     _this.topBar = null;
     _this.root = null;
+    _this.__i18n = I18N.init(_this._pluginInfoId);
     if (sniffer.os.isAndroid && sniffer.osVersion > 0 && sniffer.osVersion < 6) {
       _this.config.autoplay = false;
     }
+    _this.database = new INDEXDB();
     _this.isUserActive = false;
     _this._onceSeekCanplay = null;
     _this._isPauseBeforeSeek = 0;
     _this.innerStates = {
       isActiveLocked: false
     };
-    var rootInit = _this._initDOM();
-    if (!rootInit) {
+    var isNoRoot = _this.config.isNoRoot;
+    var rootInit = !isNoRoot && _this._initDOM();
+    if (!isNoRoot && !rootInit) {
       console.error(new Error("can't find the dom which id is ".concat(_this.config.id, " or this.config.el does not exist")));
       return _possibleConstructorReturn(_this);
     }
@@ -144,7 +215,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     pluginsManager.onPluginsReady(_assertThisInitialized(_this));
     _this.getInitDefinition();
     _this.setState(STATES.READY);
-    setTimeout(_assertThisInitialized(_this), function() {
+    util.setTimeout(_assertThisInitialized(_this), function() {
       _this.emit(READY);
     }, 0);
     _this.onReady && _this.onReady();
@@ -159,12 +230,12 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     key: "_initDOM",
     value: function _initDOM() {
       var _this2 = this;
-      this.root = this.config.id ? document.getElementById(this.config.id) : null;
+      var _this$config3 = this.config, id = _this$config3.id, el = _this$config3.el, isCustomRoot = _this$config3.isCustomRoot, controls = _this$config3.controls, autoplay = _this$config3.autoplay, isMobileSimulateMode = _this$config3.isMobileSimulateMode;
+      this.root = id ? document.getElementById(id) : null;
       if (!this.root) {
-        var el = this.config.el;
         if (el && el.nodeType === 1) {
           this.root = el;
-        } else {
+        } else if (isCustomRoot) {
           this.emit(ERROR, new Errors("use", this.config.vid, {
             line: 32,
             handle: "Constructor",
@@ -172,6 +243,11 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
           }));
           console.error("this.confg.id or this.config.el can't be empty");
           return false;
+        } else {
+          this.root = util.createDom("div", "", {
+            id,
+            class: STATE_CLASS.BUILTIN_CLASS
+          });
         }
       }
       var ret = pluginsManager.checkPlayerRoot(this.root);
@@ -191,15 +267,15 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
         this.media = _nVideo;
       }
       this.media.setAttribute(PLATER_ID, this.playerId);
-      var device = this.config.isMobileSimulateMode === "mobile" ? "mobile" : sniffer.device;
-      this.addClass("".concat(STATE_CLASS.DEFAULT, " ").concat(STATE_CLASS.INACTIVE, " xgplayer-").concat(device, " ").concat(this.config.controls ? "" : STATE_CLASS.NO_CONTROLS));
-      if (this.config.autoplay) {
+      var device = isMobileSimulateMode === "mobile" ? "mobile" : sniffer.device;
+      this.addClass("".concat(STATE_CLASS.DEFAULT, " ").concat(STATE_CLASS.INACTIVE, " xgplayer-").concat(device, " ").concat(controls ? "" : STATE_CLASS.NO_CONTROLS));
+      if (autoplay) {
         this.addClass(STATE_CLASS.ENTER);
       } else {
         this.addClass(STATE_CLASS.NO_START);
       }
       if (this.config.fluid) {
-        var _this$config3 = this.config, _width = _this$config3.width, _height = _this$config3.height;
+        var _this$config4 = this.config, _width = _this$config4.width, _height = _this$config4.height;
         if (typeof _width !== "number" || typeof _height !== "number") {
           _width = 600;
           _height = 337.5;
@@ -238,7 +314,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       this.leftBar = null;
       this.rightBar = null;
       if (this.config.marginControls) {
-        this.innerContainer = createDom("xg-video-container", "", {
+        this.innerContainer = util.createDom("xg-video-container", "", {
           "data-index": -1
         }, "xg-video-container");
         this.root.appendChild(this.innerContainer);
@@ -251,6 +327,13 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       ["focus", "blur"].forEach(function(item) {
         _this3.on(item, _this3["on" + item.charAt(0).toUpperCase() + item.slice(1)]);
       });
+      FULLSCREEN_EVENTS.forEach(function(item) {
+        document && document.addEventListener(item, _this3.onFullscreenChange);
+      });
+      if (sniffer.os.isIos) {
+        this.media.addEventListener("webkitbeginfullscreen", this._onWebkitbeginfullscreen);
+        this.media.addEventListener("webkitendfullscreen", this._onWebkitendfullscreen);
+      }
       this.once(LOADED_DATA, this.resize);
       this.playFunc = function() {
         if (!_this3.config.closeFocusVideoFocus) {
@@ -262,18 +345,24 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "_unbindEvents",
     value: function _unbindEvents() {
-      this.root.removeEventListener("mousemove", this.mousemoveFunc);
+      var _this4 = this;
+      this.root && this.root.removeEventListener("mousemove", this.mousemoveFunc);
+      FULLSCREEN_EVENTS.forEach(function(item) {
+        document.removeEventListener(item, _this4.onFullscreenChange);
+      });
       this.playFunc && this.off(PLAY, this.playFunc);
       this.off(CANPLAY, this.canPlayFunc);
+      this.media.removeEventListener("webkitbeginfullscreen", this._onWebkitbeginfullscreen);
+      this.media.removeEventListener("webkitendfullscreen", this._onWebkitendfullscreen);
     }
   }, {
     key: "_startInit",
     value: function _startInit(url) {
-      var _this4 = this;
+      var _this5 = this;
       if (!this.media) {
         return;
       }
-      if (!url || url === "" || typeOf(url) === "Array" && url.length === 0) {
+      if (!url || url === "" || util.typeOf(url) === "Array" && url.length === 0) {
         url = "";
         this.emit(URL_NULL);
         XG_DEBUG.logWarn("config.url is null, please get url and run player._startInit(url)");
@@ -282,48 +371,53 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
         }
       }
       this._detachSourceEvents(this.media);
-      if (typeOf(url) === "Array" && url.length > 0) {
+      if (util.typeOf(url) === "Array" && url.length > 0) {
         this._attachSourceEvents(this.media, url);
       } else if (!this.media.src || this.media.src !== url) {
         this.media.src = url;
       } else if (!url) {
         this.media.removeAttribute("src");
       }
-      if (typeOf(this.config.volume) === "Number") {
+      if (util.typeOf(this.config.volume) === "Number") {
         this.volume = this.config.volume;
       }
       var _root = this.innerContainer ? this.innerContainer : this.root;
-      if (this.media instanceof window.Element && !_root.contains(this.media)) {
+      if (_root && this.media instanceof window.Element && !_root.contains(this.media)) {
         _root.insertBefore(this.media, _root.firstChild);
       }
       var readyState = this.media.readyState;
       XG_DEBUG.logInfo("_startInit readyState", readyState);
       if (this.config.autoplay) {
-        !isMSE(this.media) && this.load();
+        !util.isMSE(this.media) && this.load();
         (sniffer.os.isIpad || sniffer.os.isPhone) && this.mediaPlay();
       }
-      if (readyState >= 2) {
+      var startTime = this.config.startTime;
+      this.__startTime = startTime > 0 ? startTime : -1;
+      this.config.startTime = 0;
+      if (readyState >= 2 && this.duration > 0) {
         this.canPlayFunc();
       } else {
-        this.once(CANPLAY, this.canPlayFunc);
+        this.on(CANPLAY, this.canPlayFunc);
       }
       if (!this.hasStart || this.state < STATES.ATTACHED) {
         pluginsManager.afterInit(this);
       }
       this.hasStart = true;
       this.setState(STATES.ATTACHED);
-      setTimeout(this, function() {
-        _this4.emit(COMPLETE);
+      util.setTimeout(this, function() {
+        _this5.emit(COMPLETE);
       }, 0);
     }
   }, {
     key: "_registerPlugins",
     value: function _registerPlugins() {
-      var _this5 = this;
+      var _this6 = this;
       var isInit = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
       this._loadingPlugins = [];
       var ignores = this.config.ignores || [];
       var plugins = this.config.plugins || [];
+      var i18n = this.config.i18n || [];
+      isInit && I18N.extend(i18n, this.__i18n);
       var ignoresStr = ignores.join("||").toLowerCase().split("||");
       var cuPlugins = this.plugins;
       plugins.forEach(function(plugin) {
@@ -335,7 +429,20 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
           if (!isInit && cuPlugins[pluginName.toLowerCase()]) {
             return;
           }
-          return _this5.registerPlugin(plugin);
+          if (plugin.lazy && plugin.loader) {
+            var loadingPlugin = pluginsManager.lazyRegister(_this6, plugin);
+            if (plugin.forceBeforeInit) {
+              loadingPlugin.then(function() {
+                _this6._loadingPlugins.splice(_this6._loadingPlugins.indexOf(loadingPlugin), 1);
+              }).catch(function(e) {
+                XG_DEBUG.logError("_registerPlugins:loadingPlugin", e);
+                _this6._loadingPlugins.splice(_this6._loadingPlugins.indexOf(loadingPlugin), 1);
+              });
+              _this6._loadingPlugins.push(loadingPlugin);
+            }
+            return;
+          }
+          return _this6.registerPlugin(plugin);
         } catch (err) {
           XG_DEBUG.logError("_registerPlugins:", err);
         }
@@ -344,9 +451,9 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "_registerPresets",
     value: function _registerPresets() {
-      var _this6 = this;
+      var _this7 = this;
       this.config.presets.forEach(function(preset) {
-        usePreset(_this6, preset);
+        usePreset(_this7, preset);
       });
     }
   }, {
@@ -356,21 +463,21 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       switch (position) {
         case POSITIONS.ROOT_RIGHT:
           if (!this.rightBar) {
-            this.rightBar = createPositionBar("xg-right-bar", this.root);
+            this.rightBar = util.createPositionBar("xg-right-bar", this.root);
           }
           _root = this.rightBar;
           break;
         case POSITIONS.ROOT_LEFT:
           if (!this.leftBar) {
-            this.leftBar = createPositionBar("xg-left-bar", this.root);
+            this.leftBar = util.createPositionBar("xg-left-bar", this.root);
           }
           _root = this.leftBar;
           break;
         case POSITIONS.ROOT_TOP:
           if (!this.topBar) {
-            this.topBar = createPositionBar("xg-top-bar", this.root);
+            this.topBar = util.createPositionBar("xg-top-bar", this.root);
             if (this.config.topBarAutoHide) {
-              addClass(this.topBar, STATE_CLASS.TOP_BAR_AUTOHIDE);
+              util.addClass(this.topBar, STATE_CLASS.TOP_BAR_AUTOHIDE);
             }
           }
           _root = this.topBar;
@@ -397,26 +504,27 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
         return this.controls && this.controls.registerPlugin(PLUFGIN, options, PLUFGIN.pluginName);
       }
       if (!options.root) {
-        options.root = this._getRootByPosition(position);
+        options.root = PLUFGIN.pluginName === "controls" ? this.root : this._getRootByPosition(position);
       }
       return pluginsManager.register(this, PLUFGIN, options);
     }
   }, {
     key: "deregister",
-    value: function deregister(plugin, removedFromConfig) {
+    value: function deregister(plugin) {
       if (typeof plugin === "string") {
         pluginsManager.unRegister(this, plugin);
       } else if (plugin instanceof BasePlugin) {
         pluginsManager.unRegister(this, plugin.pluginName);
       }
-      if (removedFromConfig) {
-        this.removePluginFromConfig(plugin);
-      }
     }
   }, {
     key: "unRegisterPlugin",
     value: function unRegisterPlugin(plugin) {
+      var removedFromConfig = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
       this.deregister(plugin);
+      if (removedFromConfig) {
+        this.removePluginFromConfig(plugin);
+      }
     }
   }, {
     key: "removePluginFromConfig",
@@ -451,29 +559,29 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     }
   }, {
     key: "addClass",
-    value: function addClass$1(className) {
+    value: function addClass(className) {
       if (!this.root) {
         return;
       }
-      if (!hasClass(this.root, className)) {
-        addClass(this.root, className);
+      if (!util.hasClass(this.root, className)) {
+        util.addClass(this.root, className);
       }
     }
   }, {
     key: "removeClass",
-    value: function removeClass$1(className) {
+    value: function removeClass(className) {
       if (!this.root) {
         return;
       }
-      removeClass(this.root, className);
+      util.removeClass(this.root, className);
     }
   }, {
     key: "hasClass",
-    value: function hasClass$1(className) {
+    value: function hasClass(className) {
       if (!this.root) {
         return;
       }
-      return hasClass(this.root, className);
+      return util.hasClass(this.root, className);
     }
   }, {
     key: "setAttribute",
@@ -494,7 +602,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "start",
     value: function start(url) {
-      var _this7 = this;
+      var _this8 = this;
       if (this.state > STATES.ATTACHING) {
         return;
       }
@@ -505,14 +613,14 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       this.setState(STATES.ATTACHING);
       this._registerPlugins(false);
       return pluginsManager.beforeInit(this).then(function() {
-        if (!_this7.config) {
+        if (!_this8.config) {
           return;
         }
         if (!url) {
-          url = _this7.url || _this7.config.url;
+          url = _this8.url || _this8.config.url;
         }
-        var _furl = _this7.preProcessUrl(url);
-        var ret = _this7._startInit(_furl.url);
+        var _furl = _this8.preProcessUrl(url);
+        var ret = _this8._startInit(_furl.url);
         return ret;
       }).catch(function(e) {
         e.fileName = "player";
@@ -524,43 +632,47 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "switchURL",
     value: function switchURL(url, options) {
-      var _this8 = this;
+      var _this9 = this;
       var _src = url;
-      if (typeOf(url) === "Object") {
+      if (util.typeOf(url) === "Object") {
         _src = url.url;
       }
       _src = this.preProcessUrl(_src).url;
       var curTime = this.currentTime;
+      this.__startTime = curTime;
       var isPaused = this.paused && !this.isError;
       this.src = _src;
       return new Promise(function(resolve, reject) {
         var _error = function _error2(e) {
-          _this8.off("timeupdate", _canplay);
-          _this8.off("canplay", _canplay);
+          _this9.off("timeupdate", _canplay);
+          _this9.off("canplay", _canplay);
           reject(e);
         };
         var _canplay = function _canplay2() {
-          _this8.currentTime = curTime;
+          if (_this9.duration > 0 && _this9.__startTime > 0) {
+            _this9.currentTime = _this9.__startTime;
+            _this9.__startTime = -1;
+          }
           if (isPaused) {
-            _this8.pause();
+            _this9.pause();
           }
-          _this8.off("error", _error);
+          _this9.off("error", _error);
           resolve(true);
         };
-        _this8.once("error", _error);
+        _this9.once("error", _error);
         if (!_src) {
-          _this8.errorHandler("error", {
+          _this9.errorHandler("error", {
             code: 6,
             message: "empty_src"
           });
           return;
         }
         if (sniffer.os.isAndroid) {
-          _this8.once("timeupdate", _canplay);
+          _this9.once("timeupdate", _canplay);
         } else {
-          _this8.once("canplay", _canplay);
+          _this9.once("canplay", _canplay);
         }
-        _this8.play();
+        _this9.play();
       });
     }
   }, {
@@ -571,7 +683,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "mediaPlay",
     value: function mediaPlay() {
-      var _this9 = this;
+      var _this10 = this;
       if (!this.hasStart && this.state < STATES.ATTACHED) {
         this.removeClass(STATE_CLASS.NO_START);
         this.addClass(STATE_CLASS.ENTER);
@@ -586,28 +698,28 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       var playPromise = _get(_getPrototypeOf(Player2.prototype), "play", this).call(this);
       if (playPromise !== void 0 && playPromise && playPromise.then) {
         playPromise.then(function() {
-          _this9.removeClass(STATE_CLASS.NOT_ALLOW_AUTOPLAY);
-          _this9.addClass(STATE_CLASS.PLAYING);
-          if (_this9.state < STATES.RUNNING) {
+          _this10.removeClass(STATE_CLASS.NOT_ALLOW_AUTOPLAY);
+          _this10.addClass(STATE_CLASS.PLAYING);
+          if (_this10.state < STATES.RUNNING) {
             XG_DEBUG.logInfo(">>>>playPromise.then");
-            _this9.setState(STATES.RUNNING);
-            _this9.emit(AUTOPLAY_STARTED);
+            _this10.setState(STATES.RUNNING);
+            _this10.emit(AUTOPLAY_STARTED);
           }
         }).catch(function(e) {
           XG_DEBUG.logWarn(">>>>playPromise.catch", e.name);
-          if (_this9.media && _this9.media.error) {
-            _this9.onError();
-            _this9.removeClass(STATE_CLASS.ENTER);
+          if (_this10.media && _this10.media.error) {
+            _this10.onError();
+            _this10.removeClass(STATE_CLASS.ENTER);
             return;
           }
           if (e.name === "NotAllowedError") {
-            _this9._errorTimer = setTimeout(_this9, function() {
-              _this9._errorTimer = null;
-              _this9.emit(AUTOPLAY_PREVENTED);
-              _this9.addClass(STATE_CLASS.NOT_ALLOW_AUTOPLAY);
-              _this9.removeClass(STATE_CLASS.ENTER);
-              _this9.pause();
-              _this9.setState(STATES.NOTALLOW);
+            _this10._errorTimer = util.setTimeout(_this10, function() {
+              _this10._errorTimer = null;
+              _this10.emit(AUTOPLAY_PREVENTED);
+              _this10.addClass(STATE_CLASS.NOT_ALLOW_AUTOPLAY);
+              _this10.removeClass(STATE_CLASS.ENTER);
+              _this10.pause();
+              _this10.setState(STATES.NOTALLOW);
             }, 0);
           }
         });
@@ -637,47 +749,47 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "play",
     value: function play() {
-      var _this10 = this;
+      var _this11 = this;
       this.removeClass(STATE_CLASS.PAUSED);
       return runHooks(this, "play", function() {
-        return _this10.mediaPlay();
+        return _this11.mediaPlay();
       });
     }
   }, {
     key: "pause",
     value: function pause() {
-      var _this11 = this;
+      var _this12 = this;
       runHooks(this, "pause", function() {
-        _get(_getPrototypeOf(Player2.prototype), "pause", _this11).call(_this11);
+        _get(_getPrototypeOf(Player2.prototype), "pause", _this12).call(_this12);
       });
     }
   }, {
     key: "seek",
     value: function seek(time, status) {
-      var _this12 = this;
+      var _this13 = this;
       if (!this.media || Number.isNaN(Number(time)) || !this.hasStart) {
         return;
       }
-      var _this$config4 = this.config, isSeekedPlay = _this$config4.isSeekedPlay, seekedStatus = _this$config4.seekedStatus;
+      var _this$config5 = this.config, isSeekedPlay = _this$config5.isSeekedPlay, seekedStatus = _this$config5.seekedStatus;
       var _status = status || (isSeekedPlay ? "play" : seekedStatus);
       time = time < 0 ? 0 : time > this.duration ? parseInt(this.duration, 10) : time;
       !this._isPauseBeforeSeek && (this._isPauseBeforeSeek = this.paused ? 2 : 1);
       this._onceSeekCanplay && this.off(SEEKED, this._onceSeekCanplay);
       this._onceSeekCanplay = function() {
-        _this12.removeClass(STATE_CLASS.ENTER);
-        _this12.isSeeking = false;
+        _this13.removeClass(STATE_CLASS.ENTER);
+        _this13.isSeeking = false;
         switch (_status) {
           case "play":
-            _this12.play();
+            _this13.play();
             break;
           case "pause":
-            _this12.pause();
+            _this13.pause();
             break;
           default:
-            _this12._isPauseBeforeSeek > 1 || _this12.paused ? _this12.pause() : _this12.play();
+            _this13._isPauseBeforeSeek > 1 || _this13.paused ? _this13.pause() : _this13.play();
         }
-        _this12._isPauseBeforeSeek = 0;
-        _this12._onceSeekCanplay = null;
+        _this13._isPauseBeforeSeek = 0;
+        _this13._onceSeekCanplay = null;
       };
       this.once(SEEKED, this._onceSeekCanplay);
       if (this.state < STATES.RUNNING) {
@@ -691,13 +803,13 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "getInitDefinition",
     value: function getInitDefinition() {
-      var _this13 = this;
-      var _this$config5 = this.config, definition = _this$config5.definition, url = _this$config5.url;
+      var _this14 = this;
+      var _this$config6 = this.config, definition = _this$config6.definition, url = _this$config6.url;
       if (!url && definition && definition.list && definition.list.length > 0 && definition.defaultDefinition) {
         definition.list.map(function(item) {
           if (item.definition === definition.defaultDefinition) {
-            _this13.config.url = item.url;
-            _this13.curDefinition = item;
+            _this14.config.url = item.url;
+            _this14.curDefinition = item;
           }
         });
       }
@@ -705,12 +817,12 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "changeDefinition",
     value: function changeDefinition(to, from) {
-      var _this14 = this;
+      var _this15 = this;
       var definition = this.config.definition;
       if (Array.isArray(definition === null || definition === void 0 ? void 0 : definition.list)) {
         definition.list.forEach(function(item) {
           if ((to === null || to === void 0 ? void 0 : to.definition) === item.definition) {
-            _this14.curDefinition = item;
+            _this15.curDefinition = item;
           }
         });
       }
@@ -730,7 +842,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       }, to));
       if (ret && ret.then) {
         ret.then(function() {
-          _this14.emit(AFTER_DEFINITION_CHANGE, {
+          _this15.emit(AFTER_DEFINITION_CHANGE, {
             from,
             to
           });
@@ -754,7 +866,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "resetState",
     value: function resetState() {
-      var _this15 = this;
+      var _this16 = this;
       var NOT_ALLOW_AUTOPLAY = STATE_CLASS.NOT_ALLOW_AUTOPLAY, PLAYING = STATE_CLASS.PLAYING, NO_START = STATE_CLASS.NO_START, PAUSED = STATE_CLASS.PAUSED, REPLAY2 = STATE_CLASS.REPLAY, ENTER = STATE_CLASS.ENTER, ENDED = STATE_CLASS.ENDED, ERROR2 = STATE_CLASS.ERROR, LOADING = STATE_CLASS.LOADING;
       var clsList = [NOT_ALLOW_AUTOPLAY, PLAYING, NO_START, PAUSED, REPLAY2, ENTER, ENDED, ERROR2, LOADING];
       this.hasStart = false;
@@ -765,15 +877,15 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       this._accPlayed.t = 0;
       this._accPlayed.loopAcc = 0;
       clsList.forEach(function(cls) {
-        _this15.removeClass(cls);
+        _this16.removeClass(cls);
       });
-      this.addClass(STATE_CLASS.ENTER);
+      this.addClass(STATE_CLASS.NO_START);
       this.emit(RESET);
     }
   }, {
     key: "reset",
     value: function reset() {
-      var _this16 = this;
+      var _this17 = this;
       var unregisterPlugins = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
       var isResetConfig = arguments.length > 1 ? arguments[1] : void 0;
       this.resetState();
@@ -782,13 +894,13 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
         return;
       }
       unregisterPlugins.map(function(pn) {
-        _this16.deregister(pn);
+        _this17.deregister(pn);
       });
       if (isResetConfig) {
         var de = getDefaultConfig();
         Object.keys(this.config).keys(function(k) {
-          if (_this16.config[k] !== "undefined" && (k === "plugins" || k === "presets" || k === "el" || k === "id")) {
-            _this16.config[k] = de[k];
+          if (_this17.config[k] !== "undefined" && (k === "plugins" || k === "presets" || k === "el" || k === "id")) {
+            _this17.config[k] = de[k];
           }
         });
       }
@@ -796,7 +908,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this17 = this;
+      var _this18 = this;
       var innerContainer = this.innerContainer, root = this.root, media = this.media;
       if (!root || !media) {
         return;
@@ -807,7 +919,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       this.updateAcc("destroy");
       this._unbindEvents();
       this._detachSourceEvents(this.media);
-      clearAllTimers(this);
+      util.clearAllTimers(this);
       this.emit(DESTROY);
       pluginsManager.destroy(this);
       delHooksDescriptor(this);
@@ -823,10 +935,11 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       }
       !innerContainer && media instanceof window.Node && root.contains(media) && root.removeChild(media);
       ["topBar", "leftBar", "rightBar", "innerContainer"].map(function(item) {
-        _this17[item] && root.removeChild(_this17[item]);
-        _this17[item] = null;
+        _this18[item] && root.removeChild(_this18[item]);
+        _this18[item] = null;
       });
       var cList = root.className.split(" ");
+      var isBuildIn = util.hasClass(this.root, STATE_CLASS.BUILTIN_CLASS);
       if (cList.length > 0) {
         root.className = cList.filter(function(name) {
           return name.indexOf("xgplayer") < 0;
@@ -836,49 +949,242 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       }
       this.removeAttribute("data-xgfill");
       ["isSeeking", "isCanplay", "isActive", "cssfullscreen", "fullscreen"].forEach(function(key) {
-        _this17[key] = false;
+        _this18[key] = false;
       });
+      isBuildIn && this.root.parentNode && this.root.parentNode.removeChild(this.root);
     }
   }, {
     key: "replay",
     value: function replay() {
-      var _this18 = this;
+      var _this19 = this;
       this.removeClass(STATE_CLASS.ENDED);
       this.currentTime = 0;
       this.isSeeking = false;
       runHooks(this, "replay", function() {
-        _this18.once(SEEKED, function() {
-          var playPromise = _this18.mediaPlay();
+        _this19.once(SEEKED, function() {
+          var playPromise = _this19.mediaPlay();
           if (playPromise && playPromise.catch) {
             playPromise.catch(function(err) {
               console.log(err);
             });
           }
         });
-        _this18.play();
-        _this18.emit(REPLAY);
-        _this18.onPlay();
+        _this19.play();
+        _this19.emit(REPLAY);
+        _this19.onPlay();
       });
     }
   }, {
     key: "retry",
     value: function retry() {
-      var _this19 = this;
+      var _this20 = this;
       this.removeClass(STATE_CLASS.ERROR);
       this.addClass(STATE_CLASS.LOADING);
       runHooks(this, "retry", function() {
-        var cur = _this19.currentTime;
-        var url = _this19.config.url;
-        var _srcRet = !isMSE(_this19.media) ? _this19.preProcessUrl(url) : {
+        var cur = _this20.currentTime;
+        var url = _this20.config.url;
+        var _srcRet = !util.isMSE(_this20.media) ? _this20.preProcessUrl(url) : {
           url
         };
-        _this19.src = _srcRet.url;
-        !_this19.config.isLive && (_this19.currentTime = cur);
-        _this19.once(CANPLAY, function() {
-          _this19.mediaPlay();
+        _this20.src = _srcRet.url;
+        !_this20.config.isLive && (_this20.currentTime = cur);
+        _this20.once(CANPLAY, function() {
+          _this20.mediaPlay();
         });
       });
     }
+  }, {
+    key: "changeFullStyle",
+    value: function changeFullStyle(root, el, rootClass, pClassName) {
+      if (!root) {
+        return;
+      }
+      if (!pClassName) {
+        pClassName = STATE_CLASS.PARENT_FULLSCREEN;
+      }
+      if (!this._orgCss) {
+        this._orgCss = util.filterStyleFromText(root);
+      }
+      util.addClass(root, rootClass);
+      if (el && el !== root && !this._orgPCss) {
+        this._orgPCss = util.filterStyleFromText(el);
+        util.addClass(el, pClassName);
+        el.setAttribute(PLATER_ID, this.playerId);
+      }
+    }
+  }, {
+    key: "recoverFullStyle",
+    value: function recoverFullStyle(root, el, rootClass, pClassName) {
+      if (!pClassName) {
+        pClassName = STATE_CLASS.PARENT_FULLSCREEN;
+      }
+      if (this._orgCss) {
+        util.setStyleFromCsstext(root, this._orgCss);
+        this._orgCss = "";
+      }
+      util.removeClass(root, rootClass);
+      if (el && el !== root && this._orgPCss) {
+        util.setStyleFromCsstext(el, this._orgPCss);
+        this._orgPCss = "";
+        util.removeClass(el, pClassName);
+        el.removeAttribute(PLATER_ID);
+      }
+    }
+  }, {
+    key: "getFullscreen",
+    value: function getFullscreen() {
+      var el = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.config.fullscreenTarget;
+      var root = this.root, media = this.media;
+      if (!el) {
+        el = root;
+      }
+      this._fullScreenOffset = {
+        top: util.scrollTop(),
+        left: util.scrollLeft()
+      };
+      this._fullscreenEl = el;
+      this._fullActionFrom = "get";
+      var fullEl = util.getFullScreenEl();
+      if (fullEl === this._fullscreenEl) {
+        this.onFullscreenChange();
+        return Promise.resolve();
+      }
+      try {
+        for (var i = 0; i < GET_FULLSCREEN_API.length; i++) {
+          var key = GET_FULLSCREEN_API[i];
+          if (el[key]) {
+            var ret = key === "webkitRequestFullscreen" ? el.webkitRequestFullscreen(window.Element.ALLOW_KEYBOARD_INPUT) : el[key]();
+            if (ret && ret.then) {
+              return ret;
+            } else {
+              return Promise.resolve();
+            }
+          }
+        }
+        if (media.fullscreenEnabled || media.webkitSupportsFullscreen) {
+          media.webkitEnterFullscreen();
+          return Promise.resolve();
+        }
+        return Promise.reject(new Error("call getFullscreen fail"));
+      } catch (err) {
+        return Promise.reject(new Error("call getFullscreen fail"));
+      }
+    }
+  }, {
+    key: "exitFullscreen",
+    value: function exitFullscreen(el) {
+      if (this.isRotateFullscreen) {
+        this.exitRotateFullscreen();
+      }
+      if (!this._fullscreenEl && !util.getFullScreenEl()) {
+        return;
+      }
+      this.root;
+      var media = this.media;
+      this._fullActionFrom = "exit";
+      try {
+        for (var i = 0; i < EXIT_FULLSCREEN_API.length; i++) {
+          var key = EXIT_FULLSCREEN_API[i];
+          if (document[key]) {
+            var ret = document[key]();
+            if (ret && ret.then) {
+              return ret;
+            } else {
+              return Promise.resolve();
+            }
+          }
+        }
+        if (media && media.webkitSupportsFullscreen) {
+          media.webkitExitFullScreen();
+          return Promise.resolve();
+        }
+        return Promise.reject(new Error("call exitFullscreen fail"));
+      } catch (err) {
+        return Promise.reject(new Error("call exitFullscreen fail"));
+      }
+    }
+  }, {
+    key: "getCssFullscreen",
+    value: function getCssFullscreen() {
+      var el = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.config.fullscreenTarget;
+      if (this.isRotateFullscreen) {
+        this.exitRotateFullscreen();
+      } else if (this.fullscreen) {
+        this.exitFullscreen();
+      }
+      var _class = el ? "".concat(STATE_CLASS.INNER_FULLSCREEN, " ").concat(STATE_CLASS.CSS_FULLSCREEN) : STATE_CLASS.CSS_FULLSCREEN;
+      this.changeFullStyle(this.root, el, _class);
+      var _this$config$fullscre = this.config.fullscreen, fullscreen = _this$config$fullscre === void 0 ? {} : _this$config$fullscre;
+      var useCssFullscreen = fullscreen.useCssFullscreen === true || typeof fullscreen.useCssFullscreen === "function" && fullscreen.useCssFullscreen();
+      if (useCssFullscreen) {
+        this.fullscreen = true;
+        this.emit(FULLSCREEN_CHANGE, true);
+      }
+      this._cssfullscreenEl = el;
+      this.cssfullscreen = true;
+      this.emit(CSS_FULLSCREEN_CHANGE, true);
+    }
+  }, {
+    key: "exitCssFullscreen",
+    value: function exitCssFullscreen() {
+      var _class = this._cssfullscreenEl ? "".concat(STATE_CLASS.INNER_FULLSCREEN, " ").concat(STATE_CLASS.CSS_FULLSCREEN) : STATE_CLASS.CSS_FULLSCREEN;
+      if (!this.fullscreen) {
+        this.recoverFullStyle(this.root, this._cssfullscreenEl, _class);
+      } else {
+        var _this$config$fullscre2 = this.config.fullscreen, fullscreen = _this$config$fullscre2 === void 0 ? {} : _this$config$fullscre2;
+        var useCssFullscreen = fullscreen.useCssFullscreen === true || typeof fullscreen.useCssFullscreen === "function" && fullscreen.useCssFullscreen();
+        if (useCssFullscreen) {
+          this.recoverFullStyle(this.root, this._cssfullscreenEl, _class);
+          this.fullscreen = false;
+          this.emit(FULLSCREEN_CHANGE, false);
+        } else {
+          this.removeClass(_class);
+        }
+      }
+      this._cssfullscreenEl = null;
+      this.cssfullscreen = false;
+      this.emit(CSS_FULLSCREEN_CHANGE, false);
+    }
+  }, {
+    key: "getRotateFullscreen",
+    value: function getRotateFullscreen() {
+      var el = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : this.config.fullscreenTarget;
+      if (this.cssfullscreen) {
+        this.exitCssFullscreen(el);
+      }
+      var _class = el ? "".concat(STATE_CLASS.INNER_FULLSCREEN, " ").concat(STATE_CLASS.ROTATE_FULLSCREEN) : STATE_CLASS.ROTATE_FULLSCREEN;
+      this._fullscreenEl = el || this.root;
+      this.changeFullStyle(this.root, el, _class, STATE_CLASS.PARENT_ROTATE_FULLSCREEN);
+      this.isRotateFullscreen = true;
+      this.fullscreen = true;
+      this.setRotateDeg(90);
+      this._rootStyle = this.root.getAttribute("style");
+      this.root.style.width = "".concat(window.innerHeight, "px");
+      this.emit(FULLSCREEN_CHANGE, true);
+    }
+  }, {
+    key: "exitRotateFullscreen",
+    value: function exitRotateFullscreen(el) {
+      var _class = this._fullscreenEl !== this.root ? "".concat(STATE_CLASS.INNER_FULLSCREEN, " ").concat(STATE_CLASS.ROTATE_FULLSCREEN) : STATE_CLASS.ROTATE_FULLSCREEN;
+      this.recoverFullStyle(this.root, this._fullscreenEl, _class, STATE_CLASS.PARENT_ROTATE_FULLSCREEN);
+      this.isRotateFullscreen = false;
+      this.fullscreen = false;
+      this.setRotateDeg(0);
+      this.emit(FULLSCREEN_CHANGE, false);
+      if (this._rootStyle) {
+        this.root.style.style = this._rootStyle;
+        this._rootStyle = false;
+      }
+    }
+  }, {
+    key: "setRotateDeg",
+    value: function setRotateDeg(deg) {
+      if (window.orientation === 90 || window.orientation === -90) {
+        this.rotateDeg = 0;
+      } else {
+        this.rotateDeg = deg;
+      }
+    }
   }, {
     key: "focus",
     value: function focus() {
@@ -913,7 +1219,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "onFocus",
     value: function onFocus() {
-      var _this20 = this;
+      var _this21 = this;
       var data = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
         autoHide: true,
         delay: 3e3
@@ -922,7 +1228,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       this.isActive = true;
       this.removeClass(STATE_CLASS.INACTIVE);
       if (this.userTimer) {
-        clearTimeout(this, this.userTimer);
+        util.clearTimeout(this, this.userTimer);
         this.userTimer = null;
       }
       if (data.isLock !== void 0) {
@@ -930,15 +1236,15 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       }
       if (data.autoHide === false || data.isLock === true || innerStates.isActiveLocked) {
         if (this.userTimer) {
-          clearTimeout(this, this.userTimer);
+          util.clearTimeout(this, this.userTimer);
           this.userTimer = null;
         }
         return;
       }
       var time = data && data.delay ? data.delay : this.config.inactive;
-      this.userTimer = setTimeout(this, function() {
-        _this20.userTimer = null;
-        _this20.blur();
+      this.userTimer = util.setTimeout(this, function() {
+        _this21.userTimer = null;
+        _this21.blur();
       }, time);
     }
   }, {
@@ -966,7 +1272,15 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       this.removeClass(STATE_CLASS.ERROR);
       this.removeClass(STATE_CLASS.LOADING);
       this.isCanplay = true;
-      this.waitTimer && clearTimeout(this, this.waitTimer);
+      this.waitTimer && util.clearTimeout(this, this.waitTimer);
+    }
+  }, {
+    key: "onDurationchange",
+    value: function onDurationchange() {
+      if (this.__startTime > 0 && this.duration > 0) {
+        this.currentTime = this.__startTime;
+        this.__startTime = -1;
+      }
     }
   }, {
     key: "onLoadeddata",
@@ -997,7 +1311,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       this.updateAcc("pause");
       if (!this.config.closePauseVideoFocus) {
         if (this.userTimer) {
-          clearTimeout(this, this.userTimer);
+          util.clearTimeout(this, this.userTimer);
           this.userTimer = null;
         }
         this.focus();
@@ -1013,12 +1327,12 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "onError",
     value: function onError() {
-      var _this21 = this;
       this.isError = true;
       this.updateAcc("error");
-      [STATE_CLASS.NOT_ALLOW_AUTOPLAY, STATE_CLASS.NO_START, STATE_CLASS.ENTER, STATE_CLASS.LOADING].forEach(function(item) {
-        _this21.removeClass(item);
-      });
+      this.removeClass(STATE_CLASS.NOT_ALLOW_AUTOPLAY);
+      this.removeClass(STATE_CLASS.NO_START);
+      this.removeClass(STATE_CLASS.ENTER);
+      this.removeClass(STATE_CLASS.LOADING);
       this.addClass(STATE_CLASS.ERROR);
     }
   }, {
@@ -1035,7 +1349,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     value: function onSeeked() {
       this.isSeeking = false;
       if (this.waitTimer) {
-        clearTimeout(this, this.waitTimer);
+        util.clearTimeout(this, this.waitTimer);
       }
       this.removeClass(STATE_CLASS.LOADING);
       this.removeClass(STATE_CLASS.SEEKING);
@@ -1045,12 +1359,12 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     value: function onWaiting() {
       var _this22 = this;
       if (this.waitTimer) {
-        clearTimeout(this, this.waitTimer);
+        util.clearTimeout(this, this.waitTimer);
       }
       this.updateAcc("waiting");
-      this.waitTimer = setTimeout(this, function() {
+      this.waitTimer = util.setTimeout(this, function() {
         _this22.addClass(STATE_CLASS.LOADING);
-        clearTimeout(_this22, _this22.waitTimer);
+        util.clearTimeout(_this22, _this22.waitTimer);
         _this22.waitTimer = null;
       }, this.config.minWaitDelay);
     }
@@ -1074,7 +1388,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       !this._videoHeight && this.media.videoHeight && this.resize();
       if ((this.waitTimer || this.hasClass(STATE_CLASS.LOADING)) && this.media.readyState > 2) {
         this.removeClass(STATE_CLASS.LOADING);
-        clearTimeout(this, this.waitTimer);
+        util.clearTimeout(this, this.waitTimer);
         this.waitTimer = null;
       }
       if (!this.paused && this.state < STATES.RUNNING && this.duration) {
@@ -1088,7 +1402,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "onVolumechange",
     value: function onVolumechange() {
-      typeOf(this.config.volume) === "Number" && (this.config.volume = this.volume);
+      util.typeOf(this.config.volume) === "Number" && (this.config.volume = this.volume);
     }
   }, {
     key: "onRatechange",
@@ -1101,8 +1415,8 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       if (!this.media || !action || !event) {
         return;
       }
-      var eventType = typeOf(event) === "String" ? event : event.type || "";
-      if (params.props && typeOf(params.props) !== "Array") {
+      var eventType = util.typeOf(event) === "String" ? event : event.type || "";
+      if (params.props && util.typeOf(params.props) !== "Array") {
         params.props = [params.props];
       }
       this.emit(USER_ACTION, _objectSpread2({
@@ -1142,6 +1456,77 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       }
       return false;
     }
+  }, {
+    key: "resizePosition",
+    value: function resizePosition() {
+      var _this$videoPos = this.videoPos, rotate = _this$videoPos.rotate, vy = _this$videoPos.vy, vx = _this$videoPos.vx, h = _this$videoPos.h, w = _this$videoPos.w;
+      if (rotate < 0 && !vy && !vx) {
+        return;
+      }
+      var _pi = this.videoPos._pi;
+      if (!_pi && this.media.videoHeight) {
+        _pi = this.media.videoWidth / this.media.videoHeight * 100;
+      }
+      if (!_pi) {
+        return;
+      }
+      this.videoPos.pi = _pi;
+      var _pos = {
+        rotate
+      };
+      var offsetY = 0;
+      var offsetX = 0;
+      var scale = 1;
+      var _t = rotate < 0 ? 0 : Math.abs(rotate / 90);
+      var root = this.root, innerContainer = this.innerContainer;
+      var width = root.offsetWidth;
+      var height = innerContainer ? innerContainer.offsetHeight : root.offsetHeight;
+      var rHeight = height;
+      var rWidth = width;
+      if (_t % 2 === 0) {
+        scale = h > 0 ? 100 / h : w > 0 ? 100 / w : 1;
+        _pos.scale = scale;
+        offsetY = vy > 0 ? (100 - h) / 2 - vy : 0;
+        _pos.y = _t === 2 ? 0 - offsetY : offsetY;
+        offsetX = vx > 0 ? (100 - w) / 2 - vx : 0;
+        _pos.x = _t === 2 ? 0 - offsetX : offsetX;
+        this.media.style.width = "".concat(rWidth, "px");
+        this.media.style.height = "".concat(rHeight, "px");
+      } else if (_t % 2 === 1) {
+        rWidth = height;
+        rHeight = width;
+        var offset = height - width;
+        offsetX = -offset / 2 / rWidth * 100;
+        _pos.x = _t === 3 ? offsetX + vy / 2 : offsetX - vy / 2;
+        offsetY = offset / 2 / rHeight * 100;
+        _pos.y = _t === 3 ? offsetY + vx / 2 : offsetY - vx / 2;
+        _pos.scale = scale;
+        this.media.style.width = "".concat(rWidth, "px");
+        this.media.style.height = "".concat(rHeight, "px");
+      }
+      var formStyle = util.getTransformStyle(_pos, this.media.style.transform || this.media.style.webkitTransform);
+      this.media.style.transform = formStyle;
+      this.media.style.webkitTransform = formStyle;
+    }
+  }, {
+    key: "position",
+    value: function position() {
+      var pos = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
+        h: 0,
+        y: 0,
+        x: 0,
+        w: 0
+      };
+      if (!this.media || !pos || !pos.h) {
+        return;
+      }
+      var videoPos = this.videoPos;
+      videoPos.h = pos.h * 100 || 0;
+      videoPos.w = pos.w * 100 || 0;
+      videoPos.vx = pos.x * 100 || 0;
+      videoPos.vy = pos.y * 100 || 0;
+      this.resizePosition();
+    }
   }, {
     key: "setConfig",
     value: function setConfig(config) {
@@ -1153,7 +1538,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
         if (key !== "plugins") {
           _this24.config[key] = config[key];
           var plugin = _this24.plugins[key.toLowerCase()];
-          if (plugin && typeOf(plugin.setConfig) === "Function") {
+          if (plugin && util.typeOf(plugin.setConfig) === "Function") {
             plugin.setConfig(config[key]);
           }
         }
@@ -1175,6 +1560,61 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "resize",
     value: function resize() {
+      var _this26 = this;
+      if (!this.media || !this.root) {
+        return;
+      }
+      var containerSize = this.root.getBoundingClientRect();
+      this.sizeInfo.width = containerSize.width;
+      this.sizeInfo.height = containerSize.height;
+      this.sizeInfo.left = containerSize.left;
+      this.sizeInfo.top = containerSize.top;
+      var _this$media = this.media, videoWidth = _this$media.videoWidth, videoHeight = _this$media.videoHeight;
+      var _this$config7 = this.config, fitVideoSize = _this$config7.fitVideoSize, videoFillMode = _this$config7.videoFillMode;
+      if (videoFillMode === "fill" || videoFillMode === "cover" || videoFillMode === "contain") {
+        this.setAttribute("data-xgfill", videoFillMode);
+      }
+      if (!videoHeight || !videoWidth) {
+        return;
+      }
+      this._videoHeight = videoHeight;
+      this._videoWidth = videoWidth;
+      var controlsHeight = this.controls && this.innerContainer ? this.controls.root.getBoundingClientRect().height : 0;
+      var width = containerSize.width;
+      var height = containerSize.height - controlsHeight;
+      var videoFit = parseInt(videoWidth / videoHeight * 1e3, 10);
+      var fit = parseInt(width / height * 1e3, 10);
+      var rWidth = width;
+      var rHeight = height;
+      var _style = {};
+      if (fitVideoSize === "auto" && fit > videoFit || fitVideoSize === "fixWidth") {
+        rHeight = width / videoFit * 1e3;
+        if (this.config.fluid) {
+          _style.paddingTop = "".concat(rHeight * 100 / rWidth, "%");
+        } else {
+          _style.height = "".concat(rHeight + controlsHeight, "px");
+        }
+      } else if (fitVideoSize === "auto" && fit < videoFit || fitVideoSize === "fixHeight") {
+        rWidth = videoFit * height / 1e3;
+        _style.width = "".concat(rWidth, "px");
+      }
+      if (!this.fullscreen && !this.cssfullscreen) {
+        Object.keys(_style).forEach(function(key) {
+          _this26.root.style[key] = _style[key];
+        });
+      }
+      if (videoFillMode === "fillHeight" && fit < videoFit || videoFillMode === "fillWidth" && fit > videoFit) {
+        this.setAttribute("data-xgfill", "cover");
+      }
+      var data = {
+        videoScale: videoFit,
+        vWidth: rWidth,
+        vHeight: rHeight,
+        cWidth: rWidth,
+        cHeight: rHeight + controlsHeight
+      };
+      this.resizePosition();
+      this.emit(VIDEO_RESIZE, data);
     }
   }, {
     key: "updateObjectPosition",
@@ -1197,7 +1637,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     key: "preProcessUrl",
     value: function preProcessUrl(url, ext) {
       var preProcessUrl2 = this.config.preProcessUrl;
-      return !isBlob(url) && preProcessUrl2 && typeof preProcessUrl2 === "function" ? preProcessUrl2(url, ext) : {
+      return !util.isBlob(url) && preProcessUrl2 && typeof preProcessUrl2 === "function" ? preProcessUrl2(url, ext) : {
         url
       };
     }
@@ -1251,15 +1691,15 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       return this.config.definition.list || [];
     },
     set: function set(list) {
-      var _this26 = this;
+      var _this27 = this;
       var definition = this.config.definition;
       var curDef = null;
       var targetDef = null;
       definition.list = list;
       this.emit("resourceReady", list);
       list.forEach(function(item) {
-        var _this26$curDefinition;
-        if (((_this26$curDefinition = _this26.curDefinition) === null || _this26$curDefinition === void 0 ? void 0 : _this26$curDefinition.definition) === item.definition) {
+        var _this27$curDefinition;
+        if (((_this27$curDefinition = _this27.curDefinition) === null || _this27$curDefinition === void 0 ? void 0 : _this27$curDefinition.definition) === item.definition) {
           curDef = item;
         }
         if (definition.defaultDefinition === item.definition) {
@@ -1294,6 +1734,41 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       }
       return ret;
     }
+  }, {
+    key: "controls",
+    get: function get() {
+      return this.plugins.controls;
+    }
+  }, {
+    key: "lang",
+    get: function get() {
+      return this.config.lang;
+    },
+    set: function set(lang) {
+      var result = I18N.langKeys.filter(function(key) {
+        return key === lang;
+      });
+      if (result.length === 0 && lang !== "zh") {
+        console.error("Sorry, set lang fail, because the language [".concat(lang, "] is not supported now, list of all supported languages is [").concat(I18N.langKeys.join(), "] "));
+        return;
+      }
+      this.config.lang = lang;
+      pluginsManager.setLang(lang, this);
+    }
+  }, {
+    key: "i18n",
+    get: function get() {
+      var _l = this.config.lang;
+      if (_l === "zh") {
+        _l = "zh-cn";
+      }
+      return this.__i18n.lang[_l] || this.__i18n.lang.en;
+    }
+  }, {
+    key: "i18nKeys",
+    get: function get() {
+      return this.__i18n.textKeys || {};
+    }
   }, {
     key: "version",
     get: function get() {
@@ -1355,6 +1830,19 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     set: function set(value) {
       this.config.zoom = value;
     }
+  }, {
+    key: "videoRotateDeg",
+    get: function get() {
+      return this.videoPos.rotate;
+    },
+    set: function set(val) {
+      val = util.convertDeg(val);
+      if (val % 90 !== 0 || val === this.videoPos.rotate) {
+        return;
+      }
+      this.videoPos.rotate = val;
+      this.resizePosition();
+    }
   }, {
     key: "avgSpeed",
     get: function get() {
@@ -1455,6 +1943,24 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
     value: function probeConfigSupported(info) {
       return sniffer.probeConfigSupported(info);
     }
+  }, {
+    key: "install",
+    value: function install(name, descriptor) {
+      if (!Player2.plugins) {
+        Player2.plugins = {};
+      }
+      if (!Player2.plugins[name]) {
+        Player2.plugins[name] = descriptor;
+      }
+    }
+  }, {
+    key: "use",
+    value: function use(name, descriptor) {
+      if (!Player2.plugins) {
+        Player2.plugins = {};
+      }
+      Player2.plugins[name] = descriptor;
+    }
   }]);
   return Player2;
 }(MediaProxy);