ranui 0.1.7 → 0.1.9

package/dist/{index-b2be6bef.js → index-e2e5d725.js}

@@ -4,8 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { c as createDocumentFragment, S as SyncHook, r as removeClassToElement, a as addClassToElement, b as timeFormat, d as range, e as throttle$1 } from "./index-d2d69b06.js";
-import "./index-f6d6982d.js";
+import { c as createDocumentFragment, S as SyncHook, r as removeClassToElement, a as addClassToElement, d as timeFormat, e as range, b as generateThrottle } from "./index-7913ec46.js";
+import "./index-1b73beee.js";
 !function t(e) {
   var r, i;
   r = this, i = function() {
@@ -9314,1100 +9314,1116 @@ import "./index-f6d6982d.js";
 }(false);
 const index$2 = "";
 const PLAY_STATE_LIST = ["play", "playing", "timeupdate"];
+const throttle = generateThrottle();
 const SPEED = [
   { label: "2.0X", value: 2 },
   { label: "1.5X", value: 1.5 },
   { label: "1.0X", value: 1 },
   { label: "0.5X", value: 0.5 }
 ];
-function Custom() {
-  if (typeof document !== "undefined" && !customElements.get("r-player")) {
-    class RanPlayer extends HTMLElement {
-      /**
-       * @description: 初始化view和video的全局上下文
-       * @return {*}
-       */
-      constructor() {
-        super();
-        __publicField(this, "ctx");
-        __publicField(this, "_player");
-        __publicField(this, "_container");
-        __publicField(this, "_slot");
-        __publicField(this, "_playerController");
-        __publicField(this, "_playerBtn");
-        __publicField(this, "_progress");
-        __publicField(this, "_progressDot");
-        __publicField(this, "_progressWrap");
-        __publicField(this, "_progressWrapValue");
-        __publicField(this, "requestAnimationFrameId");
-        __publicField(this, "moveProgress");
-        __publicField(this, "_playerControllerBottom");
-        __publicField(this, "_playerControllerBottomRight");
-        __publicField(this, "_playerControllerBottomLeft");
-        __publicField(this, "_playerControllerBottomPlayBtn");
-        __publicField(this, "_playerControllerBottomTimeCurrent");
-        __publicField(this, "_playerControllerBottomTimeDuration");
-        __publicField(this, "_playerControllerBottomTimeDivide");
-        __publicField(this, "_playControllerBottomClarity");
-        __publicField(this, "_playControllerBottomSpeed");
-        __publicField(this, "_playControllerBottomSpeedIcon");
-        __publicField(this, "_playControllerBottomVolumeProgress");
-        __publicField(this, "_playControllerBottomRightFullScreen");
-        __publicField(this, "_playControllerBottomVolume");
-        __publicField(this, "_playControllerBottomSpeedPopover");
-        __publicField(this, "controllerBarTimeId");
-        __publicField(this, "_playerTip");
-        __publicField(this, "_playerTipTime");
-        __publicField(this, "_playerTipText");
-        __publicField(this, "_volume");
-        __publicField(this, "_video");
-        __publicField(this, "_hls");
-        __publicField(this, "changeClarityToSetVideo", () => {
-          const { currentTime, playbackRate, volume, currentState } = this.ctx;
-          this.setCurrentTime(currentTime);
-          this.setPlaybackRate(playbackRate);
-          this.setVolume(volume);
-          if (PLAY_STATE_LIST.includes(currentState)) {
-            this.play();
-          } else {
-            this.pause();
-          }
-        });
-        __publicField(this, "changeClarity", (e) => {
-          this.ctx.clarity = e.detail.value;
-          const url = this.ctx.levelMap.get(e.detail.value);
-          if (url && this._hls) {
-            this._hls.loadSource(url);
-            this._hls.startLoad();
-            this.changeClarityToSetVideo();
-          }
-        });
-        __publicField(this, "createClaritySelect", () => {
-          const { levels, url } = this.ctx;
-          this._playControllerBottomClarity.innerHTML = "";
-          if (levels.length <= 0)
+class RanPlayer extends HTMLElement {
+  /**
+   * @description: 初始化view和video的全局上下文
+   * @return {*}
+   */
+  constructor() {
+    super();
+    __publicField(this, "ctx");
+    __publicField(this, "_player");
+    __publicField(this, "_container");
+    __publicField(this, "_slot");
+    __publicField(this, "_playerController");
+    __publicField(this, "_playerBtn");
+    __publicField(this, "_progress");
+    __publicField(this, "_progressDot");
+    __publicField(this, "_progressWrap");
+    __publicField(this, "_progressWrapValue");
+    __publicField(this, "requestAnimationFrameId");
+    __publicField(this, "moveProgress");
+    __publicField(this, "_playerControllerBottom");
+    __publicField(this, "_playerControllerBottomRight");
+    __publicField(this, "_playerControllerBottomLeft");
+    __publicField(this, "_playerControllerBottomPlayBtn");
+    __publicField(this, "_playerControllerBottomTimeCurrent");
+    __publicField(this, "_playerControllerBottomTimeDuration");
+    __publicField(this, "_playerControllerBottomTimeDivide");
+    __publicField(this, "_playControllerBottomClarity");
+    __publicField(this, "_playControllerBottomSpeed");
+    __publicField(this, "_playControllerBottomSpeedIcon");
+    __publicField(this, "_playControllerBottomVolumeProgress");
+    __publicField(this, "_playControllerBottomRightFullScreen");
+    __publicField(this, "_playControllerBottomVolume");
+    __publicField(this, "_playControllerBottomSpeedPopover");
+    __publicField(this, "controllerBarTimeId");
+    __publicField(this, "_playerTip");
+    __publicField(this, "_playerTipTime");
+    __publicField(this, "_playerTipText");
+    __publicField(this, "_volume");
+    __publicField(this, "_video");
+    __publicField(this, "_hls");
+    __publicField(this, "changeClarityToSetVideo", () => {
+      const { currentTime, playbackRate, volume, currentState } = this.ctx;
+      this.setCurrentTime(currentTime);
+      this.setPlaybackRate(playbackRate);
+      this.setVolume(volume);
+      if (PLAY_STATE_LIST.includes(currentState)) {
+        this.play();
+      } else {
+        this.pause();
+      }
+    });
+    __publicField(this, "changeClarity", (e) => {
+      this.ctx.clarity = e.detail.value;
+      const url = this.ctx.levelMap.get(e.detail.value);
+      if (url && this._hls) {
+        this._hls.loadSource(url);
+        this._hls.startLoad();
+        this.changeClarityToSetVideo();
+      }
+    });
+    __publicField(this, "createClaritySelect", () => {
+      const { levels, url } = this.ctx;
+      this._playControllerBottomClarity.innerHTML = "";
+      if (levels.length <= 0)
+        return;
+      const Fragment = document.createDocumentFragment();
+      levels.forEach((item) => {
+        const { name, url: url2 } = item;
+        if (!name || !url2)
+          return;
+        this.ctx.levelMap.set(name, url2);
+        const option = document.createElement("r-option");
+        option.setAttribute("value", name);
+        option.innerHTML = name;
+        Fragment.appendChild(option);
+      });
+      const select = document.createElement("r-select");
+      select.setAttribute("value", this.ctx.clarity || "Auto");
+      select.appendChild(Fragment);
+      select.setAttribute("type", "text");
+      select.setAttribute("action", "hover,click");
+      select.setAttribute("placement", "top");
+      const id = this._player.getAttribute("id");
+      id && select.setAttribute("getPopupContainerId", id);
+      select.setAttribute("dropdownclass", "video-clarity-dropdown");
+      select.addEventListener("change", this.changeClarity);
+      this._playControllerBottomClarity.appendChild(select);
+    });
+    __publicField(this, "manifestLoaded", (type, data) => {
+      if (type === "hlsManifestLoaded") {
+        const { url, levels = [] } = data;
+        if (levels.length <= 0)
+          return;
+        levels.forEach((item) => {
+          if (this.ctx.levelMap.get(item.name) === item.url)
             return;
-          const Fragment = document.createDocumentFragment();
-          levels.forEach((item) => {
-            const { name, url: url2 } = item;
-            if (!name || !url2)
-              return;
-            this.ctx.levelMap.set(name, url2);
-            const option = document.createElement("r-option");
-            option.setAttribute("value", name);
-            option.innerHTML = name;
-            Fragment.appendChild(option);
-          });
-          const select = document.createElement("r-select");
-          select.setAttribute("value", this.ctx.clarity || "Auto");
-          select.appendChild(Fragment);
-          select.setAttribute("type", "text");
-          select.setAttribute("action", "hover,click");
-          select.setAttribute("placement", "top");
-          const id = this._player.getAttribute("id");
-          id && select.setAttribute("getPopupContainerId", id);
-          select.setAttribute("dropdownclass", "video-clarity-dropdown");
-          select.addEventListener("change", this.changeClarity);
-          this._playControllerBottomClarity.appendChild(select);
-        });
-        __publicField(this, "manifestLoaded", (type, data) => {
-          if (type === "hlsManifestLoaded") {
-            const { url, levels = [] } = data;
-            if (levels.length <= 0)
-              return;
-            levels.forEach((item) => {
-              if (this.ctx.levelMap.get(item.name) === item.url)
-                return;
-              this.ctx.levels.push(item);
-            });
-            if (!this.ctx.levelMap.get("Auto")) {
-              this.ctx.levels.push({ name: "Auto", url });
-              this.ctx.levelMap.set("Auto", url);
-            }
-            this.ctx.url = url;
-            this.createClaritySelect();
-          }
-        });
-        /**
-         * @description: 初始化 video 和更新 video 方法
-         * @return {*}
-         */
-        __publicField(this, "updatePlayer", () => {
-          var _a;
-          const { Hls } = window;
-          if (!this.contains(this._player))
-            this.appendChild(this._player);
-          if (this._hls) {
-            this._hls.destroy();
-            this._hls = void 0;
-          }
-          this._video = document.createElement("video");
-          this._video.setAttribute("class", "ran-player-video");
-          this._video.setAttribute("preload", "auto");
-          this._video.setAttribute("x5-video-player-type", "h5");
-          this._video.setAttribute("x5-video-orientation", "portrait");
-          this._video.setAttribute("webkit-playsinline", "true");
-          this._video.setAttribute("playsinline", "true");
-          this._video.setAttribute("controls", "false");
-          this._video.controls = false;
-          this._video.setAttribute("initial-time", "0.01");
-          if ((Hls == null ? void 0 : Hls.isSupported()) && this.src) {
-            this._hls = new Hls();
-            if (this._hls) {
-              this._hls.off(Hls.Events.MANIFEST_LOADED, this.manifestLoaded);
-              this._hls.on(Hls.Events.MANIFEST_LOADED, this.manifestLoaded);
-              this._hls.loadSource(this.src);
-              this._hls.attachMedia(this._video);
-            }
-            this._container.appendChild(this._video);
-            (_a = this._video.parentElement) == null ? void 0 : _a.setAttribute(
-              "class",
-              "ran-player-contain"
-            );
-          }
-          this.listenEvent();
-        });
-        __publicField(this, "change", (name, value) => {
-          const currentTime = this.getCurrentTime();
-          const duration = this.getTotalTime();
-          this.dispatchEvent(
-            new CustomEvent("change", {
-              detail: {
-                type: name,
-                data: value,
-                currentTime,
-                duration,
-                tag: this
-              }
-            })
-          );
-        });
-        __publicField(this, "onCanplay", (e) => {
-          this.ctx.currentState = e.type;
-          removeClassToElement(
-            this._playerControllerBottomPlayBtn,
-            "ran-player-controller-bottom-left-btn-pause"
-          );
-          addClassToElement(
-            this._playerControllerBottomPlayBtn,
-            "ran-player-controller-bottom-left-btn-play"
-          );
-          this.change("canplay", e);
-          this.resize();
-        });
-        __publicField(this, "onCanplaythrough", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("canplaythrough", e);
-        });
-        __publicField(this, "onComplete", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("complete", e);
-        });
-        __publicField(this, "onDurationchange", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("durationchange", e);
-        });
-        __publicField(this, "onEmptied", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("emptied", e);
+          this.ctx.levels.push(item);
         });
-        __publicField(this, "onEnded", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("ended", e);
-        });
-        __publicField(this, "onError", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("error", e);
-        });
-        __publicField(this, "onLoadedmetadata", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("loadedmetadata", e);
-        });
-        __publicField(this, "onLoadstart", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("loadstart", e);
-        });
-        __publicField(this, "onProgress", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("progress", e);
-        });
-        __publicField(this, "onRatechange", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("ratechange", e);
-        });
-        __publicField(this, "onSeeked", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("seeked", e);
-        });
-        __publicField(this, "onSeeking", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("seeking", e);
-        });
-        __publicField(this, "onStalled", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("stalled", e);
-        });
-        __publicField(this, "onSuspend", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("suspend", e);
-        });
-        __publicField(this, "onLoadeddata", (e) => {
-          this.ctx.currentState = e.type;
-          const duration = this.getTotalTime();
-          this.ctx.duration = duration;
-          this._playerControllerBottomTimeCurrent.innerText = "00:00";
-          this._playerControllerBottomTimeDivide.innerText = "/";
-          this._playerControllerBottomTimeDuration.innerText = timeFormat(
-            this.ctx.duration
-          );
-          this.change("loadeddata", e);
-        });
-        __publicField(this, "onTimeupdate", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("timeupdate", e);
-        });
-        __publicField(this, "onVolumechange", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("volumechange", e);
-        });
-        __publicField(this, "onWaiting", (e) => {
-          this.ctx.currentState = e.type;
-          this.change("waiting", e);
-        });
-        __publicField(this, "onPlay", (e) => {
-          this.ctx.currentState = e.type;
-          this.requestAnimationFrame(this.updateCurrentProgress);
-          removeClassToElement(
-            this._playerControllerBottomPlayBtn,
-            "ran-player-controller-bottom-left-btn-play"
-          );
-          addClassToElement(
-            this._playerControllerBottomPlayBtn,
-            "ran-player-controller-bottom-left-btn-pause"
-          );
-          this.showControllerBar();
-          this.change("play", e);
-        });
-        __publicField(this, "onPlaying", (e) => {
-          this.ctx.currentState = e.type;
-          this._playerBtn.style.setProperty("display", "none");
-          removeClassToElement(
-            this._playerControllerBottomPlayBtn,
-            "ran-player-controller-bottom-left-btn-play"
-          );
-          addClassToElement(
-            this._playerControllerBottomPlayBtn,
-            "ran-player-controller-bottom-left-btn-pause"
-          );
-          this.requestAnimationFrame(this.updateCurrentProgress);
-          this.showControllerBar();
-          this.change("playing", e);
-        });
-        __publicField(this, "onPause", (e) => {
-          this.ctx.currentState = e.type;
-          this._playerBtn.style.setProperty("display", "block");
-          this.change("pause", e);
-          removeClassToElement(
-            this._playerControllerBottomPlayBtn,
-            "ran-player-controller-bottom-left-btn-pause"
-          );
-          addClassToElement(
-            this._playerControllerBottomPlayBtn,
-            "ran-player-controller-bottom-left-btn-play"
-          );
-          this.cancelAnimationFrame();
+        if (!this.ctx.levelMap.get("Auto")) {
+          this.ctx.levels.push({ name: "Auto", url });
+          this.ctx.levelMap.set("Auto", url);
+        }
+        this.ctx.url = url;
+        this.createClaritySelect();
+      }
+    });
+    /**
+     * @description: 初始化 video 和更新 video 方法
+     * @return {*}
+     */
+    __publicField(this, "updatePlayer", () => {
+      var _a;
+      const { Hls } = window;
+      if (!this.contains(this._player))
+        this.appendChild(this._player);
+      if (this._hls) {
+        this._hls.destroy();
+        this._hls = void 0;
+      }
+      this._video = document.createElement("video");
+      this._video.setAttribute("class", "ran-player-video");
+      this._video.setAttribute("preload", "auto");
+      this._video.setAttribute("x5-video-player-type", "h5");
+      this._video.setAttribute("x5-video-orientation", "portrait");
+      this._video.setAttribute("webkit-playsinline", "true");
+      this._video.setAttribute("playsinline", "true");
+      this._video.setAttribute("controls", "false");
+      this._video.controls = false;
+      this._video.setAttribute("initial-time", "0.01");
+      if ((Hls == null ? void 0 : Hls.isSupported()) && this.src) {
+        this._hls = new Hls();
+        if (this._hls) {
+          this._hls.off(Hls.Events.MANIFEST_LOADED, this.manifestLoaded);
+          this._hls.on(Hls.Events.MANIFEST_LOADED, this.manifestLoaded);
+          this._hls.loadSource(this.src);
+          this._hls.attachMedia(this._video);
+        }
+        this._container.appendChild(this._video);
+        (_a = this._video.parentElement) == null ? void 0 : _a.setAttribute(
+          "class",
+          "ran-player-contain"
+        );
+      }
+      this.listenEvent();
+    });
+    __publicField(this, "change", (name, value) => {
+      const currentTime = this.getCurrentTime();
+      const duration = this.getTotalTime();
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            type: name,
+            data: value,
+            currentTime,
+            duration,
+            tag: this
+          }
+        })
+      );
+    });
+    __publicField(this, "onCanplay", (e) => {
+      this.ctx.currentState = e.type;
+      removeClassToElement(
+        this._playerControllerBottomPlayBtn,
+        "ran-player-controller-bottom-left-btn-pause"
+      );
+      addClassToElement(
+        this._playerControllerBottomPlayBtn,
+        "ran-player-controller-bottom-left-btn-play"
+      );
+      this.change("canplay", e);
+      this.resize();
+    });
+    __publicField(this, "onCanplaythrough", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("canplaythrough", e);
+    });
+    __publicField(this, "onComplete", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("complete", e);
+    });
+    __publicField(this, "onDurationchange", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("durationchange", e);
+    });
+    __publicField(this, "onEmptied", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("emptied", e);
+    });
+    __publicField(this, "onEnded", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("ended", e);
+    });
+    __publicField(this, "onError", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("error", e);
+    });
+    __publicField(this, "onLoadedmetadata", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("loadedmetadata", e);
+    });
+    __publicField(this, "onLoadstart", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("loadstart", e);
+    });
+    __publicField(this, "onProgress", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("progress", e);
+    });
+    __publicField(this, "onRatechange", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("ratechange", e);
+    });
+    __publicField(this, "onSeeked", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("seeked", e);
+    });
+    __publicField(this, "onSeeking", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("seeking", e);
+    });
+    __publicField(this, "onStalled", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("stalled", e);
+    });
+    __publicField(this, "onSuspend", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("suspend", e);
+    });
+    __publicField(this, "onLoadeddata", (e) => {
+      this.ctx.currentState = e.type;
+      const duration = this.getTotalTime();
+      this.ctx.duration = duration;
+      this._playerControllerBottomTimeCurrent.innerText = "00:00";
+      this._playerControllerBottomTimeDivide.innerText = "/";
+      this._playerControllerBottomTimeDuration.innerText = timeFormat(
+        this.ctx.duration
+      );
+      this.change("loadeddata", e);
+    });
+    __publicField(this, "onTimeupdate", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("timeupdate", e);
+    });
+    __publicField(this, "onVolumechange", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("volumechange", e);
+    });
+    __publicField(this, "onWaiting", (e) => {
+      this.ctx.currentState = e.type;
+      this.change("waiting", e);
+    });
+    __publicField(this, "onPlay", (e) => {
+      this.ctx.currentState = e.type;
+      this.requestAnimationFrame(this.updateCurrentProgress);
+      removeClassToElement(
+        this._playerControllerBottomPlayBtn,
+        "ran-player-controller-bottom-left-btn-play"
+      );
+      addClassToElement(
+        this._playerControllerBottomPlayBtn,
+        "ran-player-controller-bottom-left-btn-pause"
+      );
+      this.showControllerBar();
+      this.change("play", e);
+    });
+    __publicField(this, "onPlaying", (e) => {
+      this.ctx.currentState = e.type;
+      this._playerBtn.style.setProperty("display", "none");
+      removeClassToElement(
+        this._playerControllerBottomPlayBtn,
+        "ran-player-controller-bottom-left-btn-play"
+      );
+      addClassToElement(
+        this._playerControllerBottomPlayBtn,
+        "ran-player-controller-bottom-left-btn-pause"
+      );
+      this.requestAnimationFrame(this.updateCurrentProgress);
+      this.showControllerBar();
+      this.change("playing", e);
+    });
+    __publicField(this, "onPause", (e) => {
+      this.ctx.currentState = e.type;
+      this._playerBtn.style.setProperty("display", "block");
+      this.change("pause", e);
+      removeClassToElement(
+        this._playerControllerBottomPlayBtn,
+        "ran-player-controller-bottom-left-btn-pause"
+      );
+      addClassToElement(
+        this._playerControllerBottomPlayBtn,
+        "ran-player-controller-bottom-left-btn-play"
+      );
+      this.cancelAnimationFrame();
+      this._playerController.style.setProperty("opacity", "1");
+      if (this.controllerBarTimeId) {
+        clearTimeout(this.controllerBarTimeId);
+        this.controllerBarTimeId = void 0;
+      }
+    });
+    __publicField(this, "clearListenerEvent", () => {
+      if (!this._video)
+        return;
+      this._video.removeEventListener("canplay", this.onCanplay);
+      this._video.removeEventListener(
+        "canplaythrough",
+        this.onCanplaythrough
+      );
+      this._video.removeEventListener("complete", this.onComplete);
+      this._video.removeEventListener(
+        "durationchange",
+        this.onDurationchange
+      );
+      this._video.removeEventListener("emptied", this.onEmptied);
+      this._video.removeEventListener("ended", this.onEnded);
+      this._video.removeEventListener("error", this.onError);
+      this._video.removeEventListener("loadeddata", this.onLoadeddata);
+      this._video.removeEventListener(
+        "loadedmetadata",
+        this.onLoadedmetadata
+      );
+      this._video.removeEventListener("loadstart", this.onLoadstart);
+      this._video.removeEventListener("pause", this.onPause);
+      this._video.removeEventListener("play", this.onPlay);
+      this._video.removeEventListener("playing", this.onPlaying);
+      this._video.removeEventListener("progress", this.onProgress);
+      this._video.removeEventListener("ratechange", this.onRatechange);
+      this._video.removeEventListener("seeked", this.onSeeked);
+      this._video.removeEventListener("seeking", this.onSeeking);
+      this._video.removeEventListener("stalled", this.onStalled);
+      this._video.removeEventListener("suspend", this.onSuspend);
+      this._video.removeEventListener("timeupdate", this.onTimeupdate);
+      this._video.removeEventListener("volumechange", this.onVolumechange);
+      this._video.removeEventListener("waiting", this.onWaiting);
+    });
+    /**
+     * @description: 用户行为和 video 之间的交互
+     * @return {*}
+     */
+    __publicField(this, "listenEvent", () => {
+      if (!this._video)
+        return;
+      this.clearListenerEvent();
+      this._video.addEventListener("canplay", this.onCanplay);
+      this._video.addEventListener("canplaythrough", this.onCanplaythrough);
+      this._video.addEventListener("complete", this.onComplete);
+      this._video.addEventListener("durationchange", this.onDurationchange);
+      this._video.addEventListener("emptied", this.onEmptied);
+      this._video.addEventListener("ended", this.onEnded);
+      this._video.addEventListener("error", this.onError);
+      this._video.addEventListener("loadeddata", this.onLoadeddata);
+      this._video.addEventListener("loadedmetadata", this.onLoadedmetadata);
+      this._video.addEventListener("loadstart", this.onLoadstart);
+      this._video.addEventListener("pause", this.onPause);
+      this._video.addEventListener("play", this.onPlay);
+      this._video.addEventListener("playing", this.onPlaying);
+      this._video.addEventListener("progress", this.onProgress);
+      this._video.addEventListener("ratechange", this.onRatechange);
+      this._video.addEventListener("seeked", this.onSeeked);
+      this._video.addEventListener("seeking", this.onSeeking);
+      this._video.addEventListener("stalled", this.onStalled);
+      this._video.addEventListener("suspend", this.onSuspend);
+      this._video.addEventListener("timeupdate", this.onTimeupdate);
+      this._video.addEventListener("volumechange", this.onVolumechange);
+      this._video.addEventListener("waiting", this.onWaiting);
+    });
+    __publicField(this, "showControllerBar", (e) => {
+      if (e) {
+        const dom = e.target;
+        if (dom.classList.value.includes("ran-player-controller")) {
           this._playerController.style.setProperty("opacity", "1");
           if (this.controllerBarTimeId) {
             clearTimeout(this.controllerBarTimeId);
             this.controllerBarTimeId = void 0;
           }
+          return;
+        }
+      }
+      if (PLAY_STATE_LIST.includes(this.ctx.currentState)) {
+        this._playerController.style.setProperty("opacity", "1");
+        if (this.controllerBarTimeId) {
+          clearTimeout(this.controllerBarTimeId);
+          this.controllerBarTimeId = void 0;
+        }
+        this.controllerBarTimeId = setTimeout(() => {
+          this._playerController.style.setProperty("opacity", "0");
+          clearTimeout(this.controllerBarTimeId);
+          this.controllerBarTimeId = void 0;
+        }, 2e3);
+      } else {
+        this._playerController.style.setProperty("opacity", "1");
+        if (this.controllerBarTimeId) {
+          clearTimeout(this.controllerBarTimeId);
+          this.controllerBarTimeId = void 0;
+        }
+      }
+    });
+    /**
+     * @description: 进度条点击事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    __publicField(this, "progressClick", (e) => {
+      const rect = this._progressWrap.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left;
+      const percentage = range(offsetX / this._progress.offsetWidth);
+      this.setCurrentTime(this.ctx.duration * percentage);
+      this.updateCurrentProgress();
+    });
+    /**
+     * @description: 进度条鼠标按下事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    __publicField(this, "progressDotMouseDown", (e) => {
+      this._playerBtn.style.setProperty("display", "none");
+      this.moveProgress.mouseDown = true;
+      this.cancelAnimationFrame();
+    });
+    /**
+     * @description: 进度条鼠标移动事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    __publicField(this, "progressDotMouseMove", (e) => {
+      this.showControllerBar(e);
+      if (!this.moveProgress.mouseDown)
+        return;
+      const rect = this._progress.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left - 9;
+      const percentage = range(offsetX / this._progress.offsetWidth);
+      this._progressWrapValue.style.setProperty(
+        "transform",
+        `scaleX(${percentage})`
+      );
+      this._progressDot.style.setProperty(
+        "transform",
+        `translateX(${percentage * this._progress.offsetWidth}px)`
+      );
+      this.moveProgress.percentage = Math.floor(percentage * 100) / 100;
+    });
+    /**
+     * @description: 进度条鼠标松开事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    __publicField(this, "progressDotMouseUp", () => {
+      if (!this.moveProgress.mouseDown)
+        return;
+      const percentage = this.moveProgress.percentage;
+      this.setCurrentTime(this.ctx.duration * percentage);
+      this.play();
+      this.moveProgress.mouseDown = false;
+      this.requestAnimationFrame(this.updateCurrentProgress);
+    });
+    /**
+     * @description: 更新页面样式
+     * @param {Function} fn
+     * @return {*}
+     */
+    __publicField(this, "requestAnimationFrame", (fn) => {
+      if (this.requestAnimationFrameId)
+        return;
+      this.requestAnimationFrameId = window.requestAnimationFrame(() => {
+        fn();
+        this.requestAnimationFrameId && cancelAnimationFrame(this.requestAnimationFrameId);
+        this.requestAnimationFrameId = void 0;
+        this.requestAnimationFrame(fn);
+      });
+    });
+    /**
+     * @description: 取消页面动画
+     * @param {Function} fn
+     * @return {*}
+     */
+    __publicField(this, "cancelAnimationFrame", () => {
+      if (!this.requestAnimationFrameId)
+        return;
+      cancelAnimationFrame(this.requestAnimationFrameId);
+      this.requestAnimationFrameId = void 0;
+    });
+    /**
+     * @description: 更新进度条
+     * @param {*} void
+     * @return {*}
+     */
+    __publicField(this, "updateCurrentProgress", () => {
+      const currentTime = this.getCurrentTime();
+      this.ctx.currentTime = currentTime;
+      const { duration } = this.ctx;
+      this._progressWrapValue.style.setProperty(
+        "transform",
+        `scaleX(${currentTime / duration})`
+      );
+      this._progressDot.style.setProperty(
+        "transform",
+        `translateX(${currentTime / duration * this._progress.offsetWidth}px)`
+      );
+      if (currentTime >= 0) {
+        this._playerControllerBottomTimeCurrent.innerText = timeFormat(currentTime);
+      }
+    });
+    __publicField(this, "changeAttribute", (k, o, n, attribute, callback) => {
+      if (k === attribute && o !== n)
+        throttle(callback)();
+    });
+    /**
+     * @description: 点击整个视频时，触发的事件
+     * @param {*} void
+     * @return {*}
+     */
+    __publicField(this, "dispatchClickPlayerContainerAction", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (PLAY_STATE_LIST.includes(this.ctx.currentState)) {
+        this.pause();
+        this._playerBtn.style.setProperty("display", "block");
+      } else {
+        this.play();
+        this._playerBtn.style.setProperty("display", "none");
+      }
+    });
+    /**
+     * @description: 空格事件
+     * @param {KeyboardEvent} e
+     * @return {*}
+     */
+    __publicField(this, "SpaceKeyDown", (e) => {
+      const { currentTime, duration } = this.ctx;
+      if (e.code === "Space") {
+        this.dispatchClickPlayerBtnAction(e);
+      }
+      if (e.code === "Escape") {
+        this.customExitFullscreen().then(() => {
+          this.ctx.fullScreen = false;
+        }).catch((error) => {
         });
-        __publicField(this, "clearListenerEvent", () => {
-          if (!this._video)
-            return;
-          this._video.removeEventListener("canplay", this.onCanplay);
-          this._video.removeEventListener(
-            "canplaythrough",
-            this.onCanplaythrough
-          );
-          this._video.removeEventListener("complete", this.onComplete);
-          this._video.removeEventListener(
-            "durationchange",
-            this.onDurationchange
-          );
-          this._video.removeEventListener("emptied", this.onEmptied);
-          this._video.removeEventListener("ended", this.onEnded);
-          this._video.removeEventListener("error", this.onError);
-          this._video.removeEventListener("loadeddata", this.onLoadeddata);
-          this._video.removeEventListener(
-            "loadedmetadata",
-            this.onLoadedmetadata
-          );
-          this._video.removeEventListener("loadstart", this.onLoadstart);
-          this._video.removeEventListener("pause", this.onPause);
-          this._video.removeEventListener("play", this.onPlay);
-          this._video.removeEventListener("playing", this.onPlaying);
-          this._video.removeEventListener("progress", this.onProgress);
-          this._video.removeEventListener("ratechange", this.onRatechange);
-          this._video.removeEventListener("seeked", this.onSeeked);
-          this._video.removeEventListener("seeking", this.onSeeking);
-          this._video.removeEventListener("stalled", this.onStalled);
-          this._video.removeEventListener("suspend", this.onSuspend);
-          this._video.removeEventListener("timeupdate", this.onTimeupdate);
-          this._video.removeEventListener("volumechange", this.onVolumechange);
-          this._video.removeEventListener("waiting", this.onWaiting);
-        });
-        /**
-         * @description: 用户行为和 video 之间的交互
-         * @return {*}
-         */
-        __publicField(this, "listenEvent", () => {
-          if (!this._video)
-            return;
-          this.clearListenerEvent();
-          this._video.addEventListener("canplay", this.onCanplay);
-          this._video.addEventListener("canplaythrough", this.onCanplaythrough);
-          this._video.addEventListener("complete", this.onComplete);
-          this._video.addEventListener("durationchange", this.onDurationchange);
-          this._video.addEventListener("emptied", this.onEmptied);
-          this._video.addEventListener("ended", this.onEnded);
-          this._video.addEventListener("error", this.onError);
-          this._video.addEventListener("loadeddata", this.onLoadeddata);
-          this._video.addEventListener("loadedmetadata", this.onLoadedmetadata);
-          this._video.addEventListener("loadstart", this.onLoadstart);
-          this._video.addEventListener("pause", this.onPause);
-          this._video.addEventListener("play", this.onPlay);
-          this._video.addEventListener("playing", this.onPlaying);
-          this._video.addEventListener("progress", this.onProgress);
-          this._video.addEventListener("ratechange", this.onRatechange);
-          this._video.addEventListener("seeked", this.onSeeked);
-          this._video.addEventListener("seeking", this.onSeeking);
-          this._video.addEventListener("stalled", this.onStalled);
-          this._video.addEventListener("suspend", this.onSuspend);
-          this._video.addEventListener("timeupdate", this.onTimeupdate);
-          this._video.addEventListener("volumechange", this.onVolumechange);
-          this._video.addEventListener("waiting", this.onWaiting);
-        });
-        __publicField(this, "showControllerBar", (e) => {
-          if (e) {
-            const dom = e.target;
-            if (dom.classList.value.includes("ran-player-controller")) {
-              this._playerController.style.setProperty("opacity", "1");
-              if (this.controllerBarTimeId) {
-                clearTimeout(this.controllerBarTimeId);
-                this.controllerBarTimeId = void 0;
-              }
-              return;
-            }
-          }
-          if (PLAY_STATE_LIST.includes(this.ctx.currentState)) {
-            this._playerController.style.setProperty("opacity", "1");
-            if (this.controllerBarTimeId) {
-              clearTimeout(this.controllerBarTimeId);
-              this.controllerBarTimeId = void 0;
-            }
-            this.controllerBarTimeId = setTimeout(() => {
-              this._playerController.style.setProperty("opacity", "0");
-              clearTimeout(this.controllerBarTimeId);
-              this.controllerBarTimeId = void 0;
-            }, 2e3);
-          } else {
-            this._playerController.style.setProperty("opacity", "1");
-            if (this.controllerBarTimeId) {
-              clearTimeout(this.controllerBarTimeId);
-              this.controllerBarTimeId = void 0;
-            }
-          }
-        });
-        /**
-         * @description: 进度条点击事件
-         * @param {MouseEvent} e
-         * @return {*}
-         */
-        __publicField(this, "progressClick", (e) => {
-          const rect = this._progressWrap.getBoundingClientRect();
-          const offsetX = e.clientX - rect.left;
-          const percentage = range(offsetX / this._progress.offsetWidth);
-          this.setCurrentTime(this.ctx.duration * percentage);
-          this.updateCurrentProgress();
-        });
-        /**
-         * @description: 进度条鼠标按下事件
-         * @param {MouseEvent} e
-         * @return {*}
-         */
-        __publicField(this, "progressDotMouseDown", (e) => {
-          this._playerBtn.style.setProperty("display", "none");
-          this.moveProgress.mouseDown = true;
-          this.cancelAnimationFrame();
-        });
-        /**
-         * @description: 进度条鼠标移动事件
-         * @param {MouseEvent} e
-         * @return {*}
-         */
-        __publicField(this, "progressDotMouseMove", (e) => {
-          this.showControllerBar(e);
-          if (!this.moveProgress.mouseDown)
-            return;
-          const rect = this._progress.getBoundingClientRect();
-          const offsetX = e.clientX - rect.left - 9;
-          const percentage = range(offsetX / this._progress.offsetWidth);
-          this._progressWrapValue.style.setProperty(
-            "transform",
-            `scaleX(${percentage})`
-          );
-          this._progressDot.style.setProperty(
-            "transform",
-            `translateX(${percentage * this._progress.offsetWidth}px)`
-          );
-          this.moveProgress.percentage = Math.floor(percentage * 100) / 100;
-        });
-        /**
-         * @description: 进度条鼠标松开事件
-         * @param {MouseEvent} e
-         * @return {*}
-         */
-        __publicField(this, "progressDotMouseUp", () => {
-          if (!this.moveProgress.mouseDown)
-            return;
-          const percentage = this.moveProgress.percentage;
-          this.setCurrentTime(this.ctx.duration * percentage);
-          this.play();
-          this.moveProgress.mouseDown = false;
-          this.requestAnimationFrame(this.updateCurrentProgress);
-        });
-        /**
-         * @description: 更新页面样式
-         * @param {Function} fn
-         * @return {*}
-         */
-        __publicField(this, "requestAnimationFrame", (fn) => {
-          if (this.requestAnimationFrameId)
-            return;
-          this.requestAnimationFrameId = window.requestAnimationFrame(() => {
-            fn();
-            this.requestAnimationFrameId && cancelAnimationFrame(this.requestAnimationFrameId);
-            this.requestAnimationFrameId = void 0;
-            this.requestAnimationFrame(fn);
-          });
-        });
-        /**
-         * @description: 取消页面动画
-         * @param {Function} fn
-         * @return {*}
-         */
-        __publicField(this, "cancelAnimationFrame", () => {
-          if (!this.requestAnimationFrameId)
-            return;
-          cancelAnimationFrame(this.requestAnimationFrameId);
-          this.requestAnimationFrameId = void 0;
-        });
-        /**
-         * @description: 更新进度条
-         * @param {*} void
-         * @return {*}
-         */
-        __publicField(this, "updateCurrentProgress", () => {
-          const currentTime = this.getCurrentTime();
-          this.ctx.currentTime = currentTime;
-          const { duration } = this.ctx;
-          this._progressWrapValue.style.setProperty(
-            "transform",
-            `scaleX(${currentTime / duration})`
-          );
-          this._progressDot.style.setProperty(
-            "transform",
-            `translateX(${currentTime / duration * this._progress.offsetWidth}px)`
-          );
-          if (currentTime >= 0) {
-            this._playerControllerBottomTimeCurrent.innerText = timeFormat(currentTime);
-          }
-        });
-        __publicField(this, "changeAttribute", (k, o, n, attribute, callback) => {
-          if (k === attribute && o !== n)
-            throttle$1(callback)();
-        });
-        /**
-         * @description: 点击整个视频时，触发的事件
-         * @param {*} void
-         * @return {*}
-         */
-        __publicField(this, "dispatchClickPlayerContainerAction", (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          if (PLAY_STATE_LIST.includes(this.ctx.currentState)) {
-            this.pause();
-            this._playerBtn.style.setProperty("display", "block");
-          } else {
-            this.play();
-            this._playerBtn.style.setProperty("display", "none");
-          }
-        });
-        /**
-         * @description: 空格事件
-         * @param {KeyboardEvent} e
-         * @return {*}
-         */
-        __publicField(this, "SpaceKeyDown", (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          const { currentTime, duration } = this.ctx;
-          if (e.code === "Space") {
-            this.dispatchClickPlayerBtnAction(e);
-          }
-          if (e.code === "Escape") {
-            document.exitFullscreen().then(() => {
-              this.ctx.fullScreen = false;
-            }).catch((error) => {
-            });
-          }
-          if (e.code === "ArrowLeft") {
-            const time = range(currentTime - 5, 0, duration);
-            this.setCurrentTime(time);
-            this.play();
-          }
-          if (e.code === "ArrowRight") {
-            const time = range(currentTime + 5, 0, duration);
-            this.setCurrentTime(time);
-            this.play();
-          }
-        });
-        /**
-         * @description: 点击player-btn，触发的事件
-         * @param {*} void
-         * @return {*}
-         */
-        __publicField(this, "dispatchClickPlayerBtnAction", (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          if (PLAY_STATE_LIST.includes(this.ctx.currentState)) {
-            this.pause();
-            this._playerBtn.style.setProperty("display", "block");
-          } else {
-            this.play();
-            this._playerBtn.style.setProperty("display", "none");
-          }
-        });
-        __publicField(this, "changeVolumeProgress", (e) => {
-          if (this._video) {
-            this.setVolume(e.detail.value);
-            this.change("volume", e.detail.value);
-            if (e.detail.value > 0) {
-              this._volume = e.detail.value;
-            }
-          }
-        });
-        __publicField(this, "openFullScreen", () => {
-          if (!this.ctx.fullScreen) {
-            this._player.requestFullscreen().then(() => {
-              this.resize();
-              this.ctx.fullScreen = true;
-            }).catch((error) => {
-            });
-          } else {
-            document.exitFullscreen().then(() => {
-              this.resize();
-              this.ctx.fullScreen = false;
-            }).catch((error) => {
-            });
-          }
-        });
-        __publicField(this, "changeSpeed", (e) => {
-          this.change("speed", e.detail.value);
-          this.setPlaybackRate(e.detail.value);
-        });
-        __publicField(this, "progressMouseEnter", (e) => {
-          this._playerTip.style.setProperty("opacity", "1");
-          const rect = this._progress.getBoundingClientRect();
-          const offsetX = e.clientX - rect.left;
-          if (this._playerTipText.innerText) {
-            this._playerTip.style.setProperty(
-              "transform",
-              `translate(calc(${offsetX}px - 50%),-20px)`
-            );
-          } else {
-            this._playerTip.style.setProperty(
-              "transform",
-              `translateX(calc(${offsetX}px - 50%))`
-            );
-          }
-          this._playerTipTime.innerText = timeFormat(
-            offsetX / this._progress.clientWidth * this.ctx.duration
-          );
-        });
-        __publicField(this, "progressMouseLeave", (e) => {
-          if (e.target.classList.contains(
-            "ran-player-controller-progress-wrap-dot"
-          )) {
-            return;
-          }
-          this._playerTip.style.setProperty("opacity", "0");
-        });
-        __publicField(this, "progressMouseMove", (e) => {
-          const rect = this._progress.getBoundingClientRect();
-          this._playerTip.style.setProperty("opacity", "1");
-          const offsetX = e.clientX - rect.left;
-          if (this._playerTipText.innerText) {
-            this._playerTip.style.setProperty(
-              "transform",
-              `translate(calc(${offsetX}px - 50%),-20px)`
-            );
-          } else {
-            this._playerTip.style.setProperty(
-              "transform",
-              `translateX(calc(${offsetX}px - 50%))`
-            );
-          }
-          this._playerTipTime.innerText = timeFormat(
-            offsetX / this._progress.clientWidth * this.ctx.duration
-          );
-        });
-        __publicField(this, "changePlayerVolume", () => {
-          if (!this._video)
-            return;
-          const { volume } = this.ctx;
-          if (volume > 0) {
-            addClassToElement(
-              this._playControllerBottomSpeedIcon,
-              "ran-player-controller-bottom-right-volume-icon-mute"
-            );
-            removeClassToElement(
-              this._playControllerBottomSpeedIcon,
-              "ran-player-controller-bottom-right-volume-icon-volume"
-            );
-            this._playControllerBottomVolumeProgress.setAttribute("percent", "0");
-            this.setVolume(0);
-            this.change("volume", 0);
-          } else {
-            addClassToElement(
-              this._playControllerBottomSpeedIcon,
-              "ran-player-controller-bottom-right-volume-icon-volume"
-            );
-            removeClassToElement(
-              this._playControllerBottomSpeedIcon,
-              "ran-player-controller-bottom-right-volume-icon-mute"
-            );
-            this._playControllerBottomVolumeProgress.setAttribute(
-              "percent",
-              `${this._volume || 0.5}`
-            );
-            this.setVolume(0.5);
-            this.change("volume", this._volume || 0.5);
-          }
-        });
-        __publicField(this, "resize", () => {
-          if (this._video) {
-            const { width, height } = this._player.getBoundingClientRect();
-            this._video.style.setProperty("width", `${width}px`);
-            this._video.style.setProperty("height", `${height}px`);
-          }
-          this.updateCurrentProgress();
-        });
-        __publicField(this, "fullScreenChange", () => {
-          var _a;
-          if ((_a = document.fullscreenElement) == null ? void 0 : _a.classList.contains("ran-player")) {
-            this.change("fullscreen", true);
-            this.ctx.fullScreen = true;
-          } else {
-            this.change("fullscreen", false);
-            this.ctx.fullScreen = false;
-          }
-        });
-        __publicField(this, "getPlaybackRate", () => {
-          if (this._video) {
-            this.ctx.playbackRate = this._video.playbackRate || 0;
-          }
-          return this.ctx.playbackRate;
-        });
-        __publicField(this, "setPlaybackRate", (n) => {
-          if (this._video) {
-            this.ctx.playbackRate = n;
-            this._video.playbackRate = n;
-          }
-          return this.ctx.playbackRate;
-        });
-        __publicField(this, "setVolume", (n) => {
-          if (this._video) {
-            this.ctx.volume = n;
-            this._video.volume = n;
-          }
-          return this.ctx.volume;
-        });
-        __publicField(this, "getVolume", () => {
-          if (this._video) {
-            this.ctx.volume = this._video.volume || 0;
-          }
-          return this.ctx.volume;
-        });
-        __publicField(this, "setCurrentTime", (n) => {
-          if (this._video) {
-            this.ctx.currentTime = n;
-            this._video.currentTime = n;
-          }
-          return this.ctx.currentTime;
-        });
-        __publicField(this, "getCurrentTime", () => {
-          if (this._video) {
-            this.ctx.currentTime = this._video.currentTime || 0;
-          }
-          return this.ctx.currentTime;
-        });
-        __publicField(this, "getTotalTime", () => {
-          if (this._video) {
-            this.ctx.duration = this._video.duration || 0;
-          }
-          return this.ctx.duration;
-        });
-        __publicField(this, "play", (n) => {
-          if (this._video) {
-            if (n !== void 0 && n >= 0) {
-              this.ctx.currentTime = n;
-              this._video.currentTime = n;
-            }
-            this._video.play();
-          }
-        });
-        __publicField(this, "pause", () => {
-          if (this._video) {
-            this._video.pause();
-          }
+      }
+      if (e.code === "ArrowLeft") {
+        const time = range(currentTime - 5, 0, duration);
+        this.setCurrentTime(time);
+        this.play();
+      }
+      if (e.code === "ArrowRight") {
+        const time = range(currentTime + 5, 0, duration);
+        this.setCurrentTime(time);
+        this.play();
+      }
+    });
+    /**
+     * @description: 点击player-btn，触发的事件
+     * @param {*} void
+     * @return {*}
+     */
+    __publicField(this, "dispatchClickPlayerBtnAction", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (PLAY_STATE_LIST.includes(this.ctx.currentState)) {
+        this.pause();
+        this._playerBtn.style.setProperty("display", "block");
+      } else {
+        this.play();
+        this._playerBtn.style.setProperty("display", "none");
+      }
+    });
+    __publicField(this, "changeVolumeProgress", (e) => {
+      if (this._video) {
+        this.setVolume(e.detail.value);
+        this.change("volume", e.detail.value);
+        if (e.detail.value > 0) {
+          this._volume = e.detail.value;
+        }
+      }
+    });
+    __publicField(this, "customRequestFullscreen", (options) => {
+      return this._player.requestFullscreen() || this._player.mozRequestFullScreen() || this._player.msRequestFullscreen() || this._player.oRequestFullscreen() || this._player.webkitRequestFullscreen() || this._player.webkitEnterFullscreen();
+    });
+    __publicField(this, "customExitFullscreen", () => {
+      return document.exitFullscreen() || document.msExitFullscreen() || document.mozCancelFullScreen() || document.oCancelFullScreen() || document.webkitExitFullscreen();
+    });
+    __publicField(this, "openFullScreen", () => {
+      if (!this.ctx.fullScreen) {
+        this.customRequestFullscreen().then(() => {
+          this.resize();
+          this.ctx.fullScreen = true;
+        }).catch((error) => {
         });
-        this._player = document.createElement("div");
-        this._container = document.createElement("div");
-        this._slot = document.createElement("slot");
-        this._playerBtn = document.createElement("div");
-        this._progress = document.createElement("div");
-        this._progressWrap = document.createElement("div");
-        this._progressWrapValue = document.createElement("div");
-        this._progressDot = document.createElement("div");
-        this._playerControllerBottom = document.createElement("div");
-        this._playerControllerBottomRight = document.createElement("div");
-        this._playerControllerBottomLeft = document.createElement("div");
-        this._player.setAttribute("class", "ran-player");
-        this._player.setAttribute(
-          "id",
-          "ran-player" + `${performance.now()}`.replace(".", "")
-        );
-        this._playerBtn.setAttribute("class", "ran-player-play-btn");
-        this._progress.setAttribute("class", "ran-player-controller-progress");
-        this._progressWrap.setAttribute(
-          "class",
-          "ran-player-controller-progress-wrap"
-        );
-        this._progressWrapValue.setAttribute(
-          "class",
-          "ran-player-controller-progress-wrap-value"
-        );
-        this._progressDot.setAttribute(
-          "class",
-          "ran-player-controller-progress-dot"
-        );
-        this._playerControllerBottom.setAttribute(
-          "class",
-          "ran-player-controller-bottom"
-        );
-        this._playerControllerBottomRight.setAttribute(
-          "class",
-          "ran-player-controller-bottom-right"
-        );
-        this._playerControllerBottomLeft.setAttribute(
-          "class",
-          "ran-player-controller-bottom-left"
-        );
-        this._playerControllerBottomPlayBtn = document.createElement("div");
-        this._playerControllerBottomPlayBtn.setAttribute(
-          "class",
-          "ran-player-controller-bottom-left-btn"
-        );
-        this._playerControllerBottomTimeCurrent = document.createElement("div");
-        this._playerControllerBottomTimeCurrent.setAttribute(
-          "class",
-          "ran-player-controller-bottom-left-time-current"
-        );
-        this._playerControllerBottomTimeDivide = document.createElement("div");
-        this._playerControllerBottomTimeDivide.setAttribute(
-          "class",
-          "ran-player-controller-bottom-left-time-divide"
-        );
-        this._playerControllerBottomTimeDuration = document.createElement("div");
-        this._playerControllerBottomTimeDuration.setAttribute(
-          "class",
-          "ran-player-controller-bottom-left-time-duration"
-        );
-        this._playControllerBottomSpeed = document.createElement("div");
-        this._playControllerBottomSpeed.setAttribute(
-          "class",
-          "ran-player-controller-bottom-right-speed"
-        );
-        this._playControllerBottomSpeedPopover = document.createElement("r-select");
-        this._playControllerBottomSpeedPopover.setAttribute("value", "1");
-        this._playControllerBottomSpeedPopover.setAttribute(
-          "action",
-          "hover,click"
-        );
-        this._playControllerBottomSpeedPopover.setAttribute("type", "text");
-        this._playControllerBottomSpeedPopover.setAttribute("placement", "top");
-        const id = this._player.getAttribute("id");
-        id && this._playControllerBottomSpeedPopover.setAttribute(
-          "getPopupContainerId",
-          id
-        );
-        this._playControllerBottomSpeedPopover.setAttribute(
-          "dropdownclass",
-          "video-speed-dropdown"
-        );
-        this._playControllerBottomSpeedPopover.addEventListener(
-          "change",
-          this.changeSpeed
-        );
-        const Fragment = document.createDocumentFragment();
-        SPEED.forEach((item) => {
-          const { label, value } = item;
-          const option = document.createElement("r-option");
-          option.innerHTML = label;
-          option.setAttribute("value", `${value}`);
-          Fragment.appendChild(option);
+      } else {
+        this.customExitFullscreen().then(() => {
+          this.resize();
+          this.ctx.fullScreen = false;
+        }).catch((error) => {
         });
-        this._playControllerBottomSpeedPopover.appendChild(Fragment);
-        this._playControllerBottomSpeed.appendChild(
-          this._playControllerBottomSpeedPopover
-        );
-        this._playControllerBottomVolume = document.createElement("div");
-        this._playControllerBottomVolume.setAttribute(
-          "class",
-          "ran-player-controller-bottom-right-volume"
-        );
-        this._playControllerBottomVolumeProgress = document.createElement("r-progress");
-        this._playControllerBottomVolumeProgress.setAttribute(
-          "class",
-          "ran-player-controller-bottom-right-volume-progress"
-        );
-        this._playControllerBottomVolumeProgress.setAttribute("percent", "0.5");
-        this._playControllerBottomVolumeProgress.setAttribute("type", "drag");
-        this._playControllerBottomSpeedIcon = document.createElement("div");
-        this._playControllerBottomSpeedIcon.setAttribute(
-          "class",
-          "ran-player-controller-bottom-right-volume-icon ran-player-controller-bottom-right-volume-icon-volume"
-        );
-        this._playControllerBottomClarity = document.createElement("div");
-        this._playControllerBottomClarity.setAttribute(
-          "class",
-          "ran-player-controller-bottom-right-clarity"
-        );
-        this._playControllerBottomRightFullScreen = document.createElement("div");
-        this._playControllerBottomRightFullScreen.setAttribute(
-          "class",
-          "ran-player-controller-bottom-right-full"
-        );
-        this._playerController = document.createElement("div");
-        this._playerController.setAttribute("class", "ran-player-controller");
-        this._playerTip = document.createElement("div");
-        this._playerTip.setAttribute("class", "ran-player-controller-tip");
-        this._playerTipTime = document.createElement("div");
-        this._playerTipTime.setAttribute(
-          "class",
-          "ran-player-controller-tip-time"
-        );
-        this._playerTipText = document.createElement("div");
-        this._playerTipText.setAttribute(
-          "class",
-          "ran-player-controller-tip-text"
-        );
-        this._playerTip.appendChild(
-          createDocumentFragment([this._playerTipTime, this._playerTipText])
-        );
-        this._playerController.appendChild(
-          createDocumentFragment([
-            this._playerTip,
-            this._progress,
-            this._playerControllerBottom
-          ])
-        );
-        this._player.appendChild(
-          createDocumentFragment([
-            this._container,
-            this._slot,
-            this._playerBtn,
-            this._playerController
-          ])
-        );
-        this._progressWrap.appendChild(this._progressWrapValue);
-        this._progress.appendChild(
-          createDocumentFragment([this._progressWrap, this._progressDot])
-        );
-        this._playerControllerBottom.appendChild(
-          createDocumentFragment([
-            this._playerControllerBottomLeft,
-            this._playerControllerBottomRight
-          ])
-        );
-        this._playerControllerBottomLeft.appendChild(
-          createDocumentFragment([
-            this._playerControllerBottomPlayBtn,
-            this._playerControllerBottomTimeCurrent,
-            this._playerControllerBottomTimeDivide,
-            this._playerControllerBottomTimeDuration
-          ])
-        );
-        this._playControllerBottomVolume.appendChild(
-          createDocumentFragment([
-            this._playControllerBottomSpeedIcon,
-            this._playControllerBottomVolumeProgress
-          ])
-        );
-        this._playerControllerBottomRight.appendChild(
-          createDocumentFragment([
-            this._playControllerBottomClarity,
-            this._playControllerBottomSpeed,
-            this._playControllerBottomVolume,
-            this._playControllerBottomRightFullScreen
-          ])
-        );
-        this.ctx = {
-          currentTime: 0,
-          // 当前时间
-          duration: 0,
-          // 总时长
-          currentState: "",
-          // 当前视频状态
-          action: new SyncHook(),
-          // 不同时期触发的状态
-          volume: 0.5,
-          // 当前音量
-          playbackRate: 1,
-          // 当前倍速
-          clarity: "",
-          // 当前清晰度
-          fullScreen: false,
-          // 是否全屏
-          levels: [],
-          // 清晰度列表
-          url: "",
-          // 当前播放的地址
-          levelMap: /* @__PURE__ */ new Map()
-          // 清晰度和名字的映射关系
-        };
-        this.moveProgress = {
-          percentage: 0,
-          mouseDown: false
-        };
-      }
-      static get observedAttributes() {
-        return ["src", "volume", "currentTime", "playbackRate"];
-      }
-      get src() {
-        return this.getAttribute("src") || "";
-      }
-      set src(value) {
-        this.setAttribute("src", value || "");
-      }
-      get volume() {
-        return this.getAttribute("volume") || "";
       }
-      set volume(value) {
-        this.setAttribute("volume", value || "");
-      }
-      get currentTime() {
-        return this.getAttribute("currentTime") || "";
-      }
-      set currentTime(value) {
-        this.setAttribute("currentTime", value || "");
-      }
-      get playbackRate() {
-        return this.getAttribute("playbackRate") || "";
-      }
-      set playbackRate(value) {
-        this.setAttribute("playbackRate", value || "");
-      }
-      connectedCallback() {
-        this._container.addEventListener(
-          "click",
-          this.dispatchClickPlayerContainerAction
-        );
-        this._playerBtn.addEventListener(
-          "click",
-          this.dispatchClickPlayerBtnAction
-        );
-        document.body.addEventListener("keydown", this.SpaceKeyDown);
-        this._progressDot.addEventListener(
-          "mousedown",
-          this.progressDotMouseDown
-        );
-        this._playerControllerBottomPlayBtn.addEventListener(
-          "click",
-          this.dispatchClickPlayerBtnAction
+    });
+    __publicField(this, "changeSpeed", (e) => {
+      this.change("speed", e.detail.value);
+      this.setPlaybackRate(e.detail.value);
+    });
+    __publicField(this, "progressMouseEnter", (e) => {
+      this._playerTip.style.setProperty("opacity", "1");
+      const rect = this._progress.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left;
+      if (this._playerTipText.innerText) {
+        this._playerTip.style.setProperty(
+          "transform",
+          `translate(calc(${offsetX}px - 50%),-20px)`
         );
-        this._progress.addEventListener("click", this.progressClick);
-        this._progress.addEventListener("mouseenter", this.progressMouseEnter);
-        this._progress.addEventListener("mousemove", this.progressMouseMove);
-        this._progress.addEventListener("mouseleave", this.progressMouseLeave);
-        this._player.addEventListener("mousemove", this.progressDotMouseMove);
-        this._player.addEventListener("mouseup", this.progressDotMouseUp);
-        this._playControllerBottomVolumeProgress.addEventListener(
-          "change",
-          this.changeVolumeProgress
+      } else {
+        this._playerTip.style.setProperty(
+          "transform",
+          `translateX(calc(${offsetX}px - 50%))`
         );
-        this._playControllerBottomRightFullScreen.addEventListener(
-          "click",
-          this.openFullScreen
-        );
-        this._playControllerBottomSpeedIcon.addEventListener(
-          "click",
-          this.changePlayerVolume
-        );
-        document.addEventListener("fullscreenchange", this.fullScreenChange);
-        window.addEventListener("resize", this.resize);
-        this.updatePlayer();
-      }
-      disconnectCallback() {
-        this._container.removeEventListener(
-          "click",
-          this.dispatchClickPlayerContainerAction
-        );
-        this._playerBtn.removeEventListener(
-          "click",
-          this.dispatchClickPlayerBtnAction
-        );
-        this._playerControllerBottomPlayBtn.removeEventListener(
-          "click",
-          this.dispatchClickPlayerBtnAction
+      }
+      this._playerTipTime.innerText = timeFormat(
+        offsetX / this._progress.clientWidth * this.ctx.duration
+      );
+    });
+    __publicField(this, "progressMouseLeave", (e) => {
+      if (e.target.classList.contains(
+        "ran-player-controller-progress-wrap-dot"
+      )) {
+        return;
+      }
+      this._playerTip.style.setProperty("opacity", "0");
+    });
+    __publicField(this, "progressMouseMove", (e) => {
+      const rect = this._progress.getBoundingClientRect();
+      this._playerTip.style.setProperty("opacity", "1");
+      const offsetX = e.clientX - rect.left;
+      if (this._playerTipText.innerText) {
+        this._playerTip.style.setProperty(
+          "transform",
+          `translate(calc(${offsetX}px - 50%),-20px)`
         );
-        this.cancelAnimationFrame();
-        document.removeEventListener("keydown", this.SpaceKeyDown);
-        this._progress.removeEventListener("click", this.progressClick);
-        this._progress.removeEventListener(
-          "mouseenter",
-          this.progressMouseEnter
+      } else {
+        this._playerTip.style.setProperty(
+          "transform",
+          `translateX(calc(${offsetX}px - 50%))`
         );
-        this._progress.removeEventListener("mousemove", this.progressMouseMove);
-        this._progress.removeEventListener(
-          "mouseleave",
-          this.progressMouseLeave
+      }
+      this._playerTipTime.innerText = timeFormat(
+        offsetX / this._progress.clientWidth * this.ctx.duration
+      );
+    });
+    __publicField(this, "changePlayerVolume", () => {
+      if (!this._video)
+        return;
+      const { volume } = this.ctx;
+      if (volume > 0) {
+        addClassToElement(
+          this._playControllerBottomSpeedIcon,
+          "ran-player-controller-bottom-right-volume-icon-mute"
         );
-        this._progressDot.removeEventListener(
-          "mousedown",
-          this.progressDotMouseDown
+        removeClassToElement(
+          this._playControllerBottomSpeedIcon,
+          "ran-player-controller-bottom-right-volume-icon-volume"
         );
-        this._player.removeEventListener(
-          "mousemove",
-          this.progressDotMouseMove
+        this._playControllerBottomVolumeProgress.setAttribute("percent", "0");
+        this.setVolume(0);
+        this.change("volume", 0);
+      } else {
+        addClassToElement(
+          this._playControllerBottomSpeedIcon,
+          "ran-player-controller-bottom-right-volume-icon-volume"
         );
-        this._player.removeEventListener("mouseup", this.progressDotMouseUp);
-        this._playControllerBottomVolumeProgress.removeEventListener(
-          "change",
-          this.changeVolumeProgress
+        removeClassToElement(
+          this._playControllerBottomSpeedIcon,
+          "ran-player-controller-bottom-right-volume-icon-mute"
         );
-        this._playControllerBottomRightFullScreen.removeEventListener(
-          "click",
-          this.openFullScreen
+        this._playControllerBottomVolumeProgress.setAttribute(
+          "percent",
+          `${this._volume || 0.5}`
         );
-        window.removeEventListener("resize", this.resize);
-        document.removeEventListener("fullscreenchange", this.fullScreenChange);
-      }
-      attributeChangedCallback(k, o, n) {
+        this.setVolume(0.5);
+        this.change("volume", this._volume || 0.5);
+      }
+    });
+    __publicField(this, "resize", () => {
+      if (this._video) {
+        const { width, height } = this._player.getBoundingClientRect();
+        this._video.style.setProperty("width", `${width}px`);
+        this._video.style.setProperty("height", `${height}px`);
+        if (document.body.clientWidth < 500) {
+          this._playControllerBottomVolume.style.setProperty(
+            "display",
+            "none"
+          );
+        } else {
+          this._playControllerBottomVolume.style.setProperty(
+            "display",
+            "flex"
+          );
+        }
       }
-    }
+      this.updateCurrentProgress();
+    });
+    __publicField(this, "fullScreenChange", () => {
+      var _a;
+      if ((_a = document.fullscreenElement) == null ? void 0 : _a.classList.contains("ran-player")) {
+        this.change("fullscreen", true);
+        this.ctx.fullScreen = true;
+      } else {
+        this.change("fullscreen", false);
+        this.ctx.fullScreen = false;
+      }
+    });
+    __publicField(this, "getPlaybackRate", () => {
+      if (this._video) {
+        this.ctx.playbackRate = this._video.playbackRate || 0;
+      }
+      return this.ctx.playbackRate;
+    });
+    __publicField(this, "setPlaybackRate", (n) => {
+      if (this._video) {
+        this.ctx.playbackRate = n;
+        this._video.playbackRate = n;
+      }
+      return this.ctx.playbackRate;
+    });
+    __publicField(this, "setVolume", (n) => {
+      if (this._video) {
+        this.ctx.volume = n;
+        this._video.volume = n;
+      }
+      return this.ctx.volume;
+    });
+    __publicField(this, "getVolume", () => {
+      if (this._video) {
+        this.ctx.volume = this._video.volume || 0;
+      }
+      return this.ctx.volume;
+    });
+    __publicField(this, "setCurrentTime", (n) => {
+      if (this._video) {
+        this.ctx.currentTime = n;
+        this._video.currentTime = n;
+      }
+      return this.ctx.currentTime;
+    });
+    __publicField(this, "getCurrentTime", () => {
+      if (this._video) {
+        this.ctx.currentTime = this._video.currentTime || 0;
+      }
+      return this.ctx.currentTime;
+    });
+    __publicField(this, "getTotalTime", () => {
+      if (this._video) {
+        this.ctx.duration = this._video.duration || 0;
+      }
+      return this.ctx.duration;
+    });
+    __publicField(this, "play", (n) => {
+      if (this._video) {
+        if (n !== void 0 && n >= 0) {
+          this.ctx.currentTime = n;
+          this._video.currentTime = n;
+        }
+        this._video.play();
+      }
+    });
+    __publicField(this, "pause", () => {
+      if (this._video) {
+        this._video.pause();
+      }
+    });
+    this._player = document.createElement("div");
+    this._container = document.createElement("div");
+    this._slot = document.createElement("slot");
+    this._playerBtn = document.createElement("div");
+    this._progress = document.createElement("div");
+    this._progressWrap = document.createElement("div");
+    this._progressWrapValue = document.createElement("div");
+    this._progressDot = document.createElement("div");
+    this._playerControllerBottom = document.createElement("div");
+    this._playerControllerBottomRight = document.createElement("div");
+    this._playerControllerBottomLeft = document.createElement("div");
+    this._player.setAttribute("class", "ran-player");
+    this._player.setAttribute(
+      "id",
+      "ran-player" + `${performance.now()}`.replace(".", "")
+    );
+    this._playerBtn.setAttribute("class", "ran-player-play-btn");
+    this._progress.setAttribute("class", "ran-player-controller-progress");
+    this._progressWrap.setAttribute(
+      "class",
+      "ran-player-controller-progress-wrap"
+    );
+    this._progressWrapValue.setAttribute(
+      "class",
+      "ran-player-controller-progress-wrap-value"
+    );
+    this._progressDot.setAttribute(
+      "class",
+      "ran-player-controller-progress-dot"
+    );
+    this._playerControllerBottom.setAttribute(
+      "class",
+      "ran-player-controller-bottom"
+    );
+    this._playerControllerBottomRight.setAttribute(
+      "class",
+      "ran-player-controller-bottom-right"
+    );
+    this._playerControllerBottomLeft.setAttribute(
+      "class",
+      "ran-player-controller-bottom-left"
+    );
+    this._playerControllerBottomPlayBtn = document.createElement("div");
+    this._playerControllerBottomPlayBtn.setAttribute(
+      "class",
+      "ran-player-controller-bottom-left-btn"
+    );
+    this._playerControllerBottomTimeCurrent = document.createElement("div");
+    this._playerControllerBottomTimeCurrent.setAttribute(
+      "class",
+      "ran-player-controller-bottom-left-time-current"
+    );
+    this._playerControllerBottomTimeDivide = document.createElement("div");
+    this._playerControllerBottomTimeDivide.setAttribute(
+      "class",
+      "ran-player-controller-bottom-left-time-divide"
+    );
+    this._playerControllerBottomTimeDuration = document.createElement("div");
+    this._playerControllerBottomTimeDuration.setAttribute(
+      "class",
+      "ran-player-controller-bottom-left-time-duration"
+    );
+    this._playControllerBottomSpeed = document.createElement("div");
+    this._playControllerBottomSpeed.setAttribute(
+      "class",
+      "ran-player-controller-bottom-right-speed"
+    );
+    this._playControllerBottomSpeedPopover = document.createElement("r-select");
+    this._playControllerBottomSpeedPopover.setAttribute("value", "1");
+    this._playControllerBottomSpeedPopover.setAttribute(
+      "action",
+      "hover,click"
+    );
+    this._playControllerBottomSpeedPopover.setAttribute("type", "text");
+    this._playControllerBottomSpeedPopover.setAttribute("placement", "top");
+    const id = this._player.getAttribute("id");
+    id && this._playControllerBottomSpeedPopover.setAttribute(
+      "getPopupContainerId",
+      id
+    );
+    this._playControllerBottomSpeedPopover.setAttribute(
+      "dropdownclass",
+      "video-speed-dropdown"
+    );
+    this._playControllerBottomSpeedPopover.addEventListener(
+      "change",
+      this.changeSpeed
+    );
+    const Fragment = document.createDocumentFragment();
+    SPEED.forEach((item) => {
+      const { label, value } = item;
+      const option = document.createElement("r-option");
+      option.innerHTML = label;
+      option.setAttribute("value", `${value}`);
+      Fragment.appendChild(option);
+    });
+    this._playControllerBottomSpeedPopover.appendChild(Fragment);
+    this._playControllerBottomSpeed.appendChild(
+      this._playControllerBottomSpeedPopover
+    );
+    this._playControllerBottomVolume = document.createElement("div");
+    this._playControllerBottomVolume.setAttribute(
+      "class",
+      "ran-player-controller-bottom-right-volume"
+    );
+    this._playControllerBottomVolumeProgress = document.createElement("r-progress");
+    this._playControllerBottomVolumeProgress.setAttribute(
+      "class",
+      "ran-player-controller-bottom-right-volume-progress"
+    );
+    this._playControllerBottomVolumeProgress.setAttribute("percent", "0.5");
+    this._playControllerBottomVolumeProgress.setAttribute("type", "drag");
+    this._playControllerBottomSpeedIcon = document.createElement("div");
+    this._playControllerBottomSpeedIcon.setAttribute(
+      "class",
+      "ran-player-controller-bottom-right-volume-icon ran-player-controller-bottom-right-volume-icon-volume"
+    );
+    this._playControllerBottomClarity = document.createElement("div");
+    this._playControllerBottomClarity.setAttribute(
+      "class",
+      "ran-player-controller-bottom-right-clarity"
+    );
+    this._playControllerBottomRightFullScreen = document.createElement("div");
+    this._playControllerBottomRightFullScreen.setAttribute(
+      "class",
+      "ran-player-controller-bottom-right-full"
+    );
+    this._playerController = document.createElement("div");
+    this._playerController.setAttribute("class", "ran-player-controller");
+    this._playerTip = document.createElement("div");
+    this._playerTip.setAttribute("class", "ran-player-controller-tip");
+    this._playerTipTime = document.createElement("div");
+    this._playerTipTime.setAttribute(
+      "class",
+      "ran-player-controller-tip-time"
+    );
+    this._playerTipText = document.createElement("div");
+    this._playerTipText.setAttribute(
+      "class",
+      "ran-player-controller-tip-text"
+    );
+    this._playerTip.appendChild(
+      createDocumentFragment([this._playerTipTime, this._playerTipText])
+    );
+    this._playerController.appendChild(
+      createDocumentFragment([
+        this._playerTip,
+        this._progress,
+        this._playerControllerBottom
+      ])
+    );
+    this._player.appendChild(
+      createDocumentFragment([
+        this._container,
+        this._slot,
+        this._playerBtn,
+        this._playerController
+      ])
+    );
+    this._progressWrap.appendChild(this._progressWrapValue);
+    this._progress.appendChild(
+      createDocumentFragment([this._progressWrap, this._progressDot])
+    );
+    this._playerControllerBottom.appendChild(
+      createDocumentFragment([
+        this._playerControllerBottomLeft,
+        this._playerControllerBottomRight
+      ])
+    );
+    this._playerControllerBottomLeft.appendChild(
+      createDocumentFragment([
+        this._playerControllerBottomPlayBtn,
+        this._playerControllerBottomTimeCurrent,
+        this._playerControllerBottomTimeDivide,
+        this._playerControllerBottomTimeDuration
+      ])
+    );
+    this._playControllerBottomVolume.appendChild(
+      createDocumentFragment([
+        this._playControllerBottomSpeedIcon,
+        this._playControllerBottomVolumeProgress
+      ])
+    );
+    this._playerControllerBottomRight.appendChild(
+      createDocumentFragment([
+        this._playControllerBottomClarity,
+        this._playControllerBottomSpeed,
+        this._playControllerBottomVolume,
+        this._playControllerBottomRightFullScreen
+      ])
+    );
+    this.ctx = {
+      currentTime: 0,
+      // 当前时间
+      duration: 0,
+      // 总时长
+      currentState: "",
+      // 当前视频状态
+      action: new SyncHook(),
+      // 不同时期触发的状态
+      volume: 0.5,
+      // 当前音量
+      playbackRate: 1,
+      // 当前倍速
+      clarity: "",
+      // 当前清晰度
+      fullScreen: false,
+      // 是否全屏
+      levels: [],
+      // 清晰度列表
+      url: "",
+      // 当前播放的地址
+      levelMap: /* @__PURE__ */ new Map()
+      // 清晰度和名字的映射关系
+    };
+    this.moveProgress = {
+      percentage: 0,
+      mouseDown: false
+    };
+  }
+  static get observedAttributes() {
+    return ["src", "volume", "currentTime", "playbackRate"];
+  }
+  get src() {
+    return this.getAttribute("src") || "";
+  }
+  set src(value) {
+    this.setAttribute("src", value || "");
+  }
+  get volume() {
+    return this.getAttribute("volume") || "";
+  }
+  set volume(value) {
+    this.setAttribute("volume", value || "");
+  }
+  get currentTime() {
+    return this.getAttribute("currentTime") || "";
+  }
+  set currentTime(value) {
+    this.setAttribute("currentTime", value || "");
+  }
+  get playbackRate() {
+    return this.getAttribute("playbackRate") || "";
+  }
+  set playbackRate(value) {
+    this.setAttribute("playbackRate", value || "");
+  }
+  connectedCallback() {
+    this._container.addEventListener(
+      "click",
+      this.dispatchClickPlayerContainerAction
+    );
+    this._playerBtn.addEventListener(
+      "click",
+      this.dispatchClickPlayerBtnAction
+    );
+    this.addEventListener("keydown", this.SpaceKeyDown);
+    this._progressDot.addEventListener(
+      "mousedown",
+      this.progressDotMouseDown
+    );
+    this._playerControllerBottomPlayBtn.addEventListener(
+      "click",
+      this.dispatchClickPlayerBtnAction
+    );
+    this._progress.addEventListener("click", this.progressClick);
+    this._progress.addEventListener("mouseenter", this.progressMouseEnter);
+    this._progress.addEventListener("mousemove", this.progressMouseMove);
+    this._progress.addEventListener("mouseleave", this.progressMouseLeave);
+    this._player.addEventListener("mousemove", this.progressDotMouseMove);
+    this._player.addEventListener("mouseup", this.progressDotMouseUp);
+    this._playControllerBottomVolumeProgress.addEventListener(
+      "change",
+      this.changeVolumeProgress
+    );
+    this._playControllerBottomRightFullScreen.addEventListener(
+      "click",
+      this.openFullScreen
+    );
+    this._playControllerBottomSpeedIcon.addEventListener(
+      "click",
+      this.changePlayerVolume
+    );
+    document.addEventListener("fullscreenchange", this.fullScreenChange);
+    window.addEventListener("resize", this.resize);
+    this.updatePlayer();
+  }
+  disconnectCallback() {
+    this._container.removeEventListener(
+      "click",
+      this.dispatchClickPlayerContainerAction
+    );
+    this._playerBtn.removeEventListener(
+      "click",
+      this.dispatchClickPlayerBtnAction
+    );
+    this._playerControllerBottomPlayBtn.removeEventListener(
+      "click",
+      this.dispatchClickPlayerBtnAction
+    );
+    this.cancelAnimationFrame();
+    this.removeEventListener("keydown", this.SpaceKeyDown);
+    this._progress.removeEventListener("click", this.progressClick);
+    this._progress.removeEventListener(
+      "mouseenter",
+      this.progressMouseEnter
+    );
+    this._progress.removeEventListener("mousemove", this.progressMouseMove);
+    this._progress.removeEventListener(
+      "mouseleave",
+      this.progressMouseLeave
+    );
+    this._progressDot.removeEventListener(
+      "mousedown",
+      this.progressDotMouseDown
+    );
+    this._player.removeEventListener(
+      "mousemove",
+      this.progressDotMouseMove
+    );
+    this._player.removeEventListener("mouseup", this.progressDotMouseUp);
+    this._playControllerBottomVolumeProgress.removeEventListener(
+      "change",
+      this.changeVolumeProgress
+    );
+    this._playControllerBottomRightFullScreen.removeEventListener(
+      "click",
+      this.openFullScreen
+    );
+    window.removeEventListener("resize", this.resize);
+    document.removeEventListener("fullscreenchange", this.fullScreenChange);
+  }
+  attributeChangedCallback(k, o, n) {
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-player")) {
     customElements.define("r-player", RanPlayer);
     return RanPlayer;
   }
@@ -10415,9 +10431,11 @@ function Custom() {
 const index = Custom();
 const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
+  RanPlayer,
   default: index
 }, Symbol.toStringTag, { value: "Module" }));
 export {
+  RanPlayer as R,
   index as a,
   index$1 as i
 };