@volcengine/veplayer 2.1.0 → 2.2.0-rc.1

package/umd/veplayer.development.js

@@ -1020,7 +1020,7 @@ var __publicField = (obj, key, value) => {
     return /^blob/.test(video.currentSrc) || /^blob/.test(video.src);
   };
   util$1.isBlob = function(url) {
-    return /^blob/.test(url);
+    return typeof url === "string" && /^blob/.test(url);
   };
   util$1.generateSessionId = function() {
     var did = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
@@ -1074,7 +1074,24 @@ var __publicField = (obj, key, value) => {
       scale: 1,
       rotate: 0
     };
-    return "scale(".concat(pos.scale || 1, ") translate(").concat(pos.x || 0, "%, ").concat(pos.y || 0, "%) rotate(").concat(pos.rotate || 0, "deg)");
+    var transformValue = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "";
+    var styles = {
+      scale: "".concat(pos.scale || 1),
+      translate: "".concat(pos.x || 0, "%, ").concat(pos.y || 0, "%"),
+      rotate: "".concat(pos.rotate || 0, "deg")
+    };
+    var stylesKeys = Object.keys(styles);
+    stylesKeys.forEach(function(key) {
+      var reg = new RegExp("".concat(key, "\\([^\\(]+\\)"), "g");
+      var fn = "".concat(key, "(").concat(styles[key], ")");
+      if (reg.test(transformValue)) {
+        reg.lastIndex = -1;
+        transformValue = transformValue.replace(reg, fn);
+      } else {
+        transformValue += "".concat(fn, " ");
+      }
+    });
+    return transformValue;
   };
   util$1.convertDeg = function(val) {
     if (Math.abs(val) <= 1) {
@@ -1327,10 +1344,10 @@ var __publicField = (obj, key, value) => {
       var isSymbian = /(?:SymbianOS)/.test(ua2) || isWindowsPhone;
       var isAndroid2 = /(?:Android)/.test(ua2);
       var isFireFox = /(?:Firefox)/.test(ua2);
-      var isTablet = /(?:iPad|PlayBook)/.test(ua2) || isAndroid2 && !/(?:Mobile)/.test(ua2) || isFireFox && /(?:Tablet)/.test(ua2);
+      var isIpad = /(?:iPad|PlayBook)/.test(ua2) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+      var isTablet = isIpad || isAndroid2 && !/(?:Mobile)/.test(ua2) || isFireFox && /(?:Tablet)/.test(ua2);
       var isPhone = /(?:iPhone)/.test(ua2) && !isTablet;
       var isPc = !isPhone && !isAndroid2 && !isSymbian && !isTablet;
-      var isIpad = /(?:iPad|PlayBook)/.test(ua2);
       return {
         isTablet,
         isPhone,
@@ -1441,7 +1458,7 @@ var __publicField = (obj, key, value) => {
       }
     }
   };
-  var version = "3.0.10-alpha.4";
+  var version = "3.0.11-alpha.2";
   var ERROR_TYPE_MAP = {
     1: "media",
     2: "media",
@@ -5666,6 +5683,9 @@ var __publicField = (obj, key, value) => {
         clsList.forEach(function(cls) {
           _this23.removeClass(cls);
         });
+        if (!this._accPlayed.t && !this.paused && !this.ended) {
+          this._accPlayed.t = (/* @__PURE__ */ new Date()).getTime();
+        }
       }
     }, {
       key: "onTimeupdate",
@@ -5789,7 +5809,7 @@ var __publicField = (obj, key, value) => {
           this.media.style.width = "".concat(rWidth, "px");
           this.media.style.height = "".concat(rHeight, "px");
         }
-        var formStyle = util$1.getTransformStyle(_pos);
+        var formStyle = util$1.getTransformStyle(_pos, this.media.style.transform || this.media.style.webkitTransform);
         this.media.style.transform = formStyle;
         this.media.style.webkitTransform = formStyle;
       }
@@ -6600,11 +6620,31 @@ var __publicField = (obj, key, value) => {
         this.config.poster = poster;
         this.root.style.backgroundImage = "url(".concat(poster, ")");
       }
+    }, {
+      key: "getBgSize",
+      value: function getBgSize(mode) {
+        var _bg = "";
+        switch (mode) {
+          case "cover":
+            _bg = "cover";
+            break;
+          case "container":
+            _bg = "container";
+            break;
+          case "fixHeight":
+            _bg = "auto 100%";
+            break;
+          default:
+            _bg = "";
+        }
+        return _bg ? "background-size: ".concat(_bg, ";") : "";
+      }
     }, {
       key: "render",
       value: function render() {
-        var _this$config = this.config, poster = _this$config.poster, hideCanplay = _this$config.hideCanplay;
-        var style = poster ? "background-image:url(".concat(poster, ");") : "";
+        var _this$config = this.config, poster = _this$config.poster, hideCanplay = _this$config.hideCanplay, fillMode = _this$config.fillMode;
+        var _bg = this.getBgSize(fillMode);
+        var style = poster ? "background-image:url(".concat(poster, ");").concat(_bg) : _bg;
         return '<xg-poster class="xgplayer-poster '.concat(hideCanplay ? "xg-showplay" : "", '" style="').concat(style, '">\n    </xg-poster>');
       }
     }], [{
@@ -6618,7 +6658,8 @@ var __publicField = (obj, key, value) => {
         return {
           isEndedShow: true,
           hideCanplay: false,
-          poster: ""
+          poster: "",
+          fillMode: "fixWidth"
         };
       }
     }]);
@@ -8650,7 +8691,7 @@ var __publicField = (obj, key, value) => {
         var keyCode = e2.keyCode;
         var _assertThisInitialize = _assertThisInitialized(_this), _keyState = _assertThisInitialize._keyState, player = _assertThisInitialize.player;
         var _this$config = _this.config, disable = _this$config.disable, disableBodyTrigger = _this$config.disableBodyTrigger, isIgnoreUserActive = _this$config.isIgnoreUserActive;
-        if (disable || disableBodyTrigger || !player.isUserActive && !isIgnoreUserActive || isDisableTag(e2.target) || !_this.checkIsVisible() || e2.metaKey || e2.altKey || e2.ctrlKey) {
+        if (disable || disableBodyTrigger || !(player.isUserActive || isIgnoreUserActive) || isDisableTag(e2.target) || !_this.checkIsVisible() || e2.metaKey || e2.altKey || e2.ctrlKey) {
           _keyState.isBodyKeyDown = false;
           return;
         }
@@ -8679,9 +8720,6 @@ var __publicField = (obj, key, value) => {
           if (_this.config.disable || _this.config.disableRootTrigger || e2.metaKey || e2.altKey || e2.ctrlKey) {
             return;
           }
-          if (!_this.player.isUserActive && !_this.config.isIgnoreUserActive) {
-            return;
-          }
           if (e2 && (e2.keyCode === 37 || _this.checkCode(e2.keyCode)) && (e2.target === _this.player.root || e2.target === _this.player.video || e2.target === _this.player.controls.el)) {
             _keyState.isKeyDown = true;
           }
@@ -8954,7 +8992,6 @@ var __publicField = (obj, key, value) => {
           }
           _keyState.tt = _t;
         }
-        preventDefault(e2);
         this.handleKeyCode(e2.keyCode, e2, _keyState.isPress);
       }
     }, {
@@ -8991,6 +9028,7 @@ var __publicField = (obj, key, value) => {
                 isPress
               }, this.keyCodeMap[arr[i2]]));
             }
+            preventDefault(event);
             break;
           }
         }
@@ -9026,11 +9064,11 @@ var __publicField = (obj, key, value) => {
           checkVisible: false,
           disableBodyTrigger: false,
           disableRootTrigger: false,
-          isGlobalTrigger: false,
+          isGlobalTrigger: true,
           keyCodeMap: {},
           disable: false,
           playbackRate: 2,
-          isIgnoreUserActive: false
+          isIgnoreUserActive: true
         };
       }
     }]);
@@ -12339,6 +12377,41 @@ var __publicField = (obj, key, value) => {
       });
     }
   }
+  const appendSearchParams = (url, searchParams) => {
+    var _a, _b;
+    const urlObject = getUrlObject(url);
+    if (!url || !urlObject) {
+      return url ?? "";
+    }
+    const withoutProtocol = url.startsWith("//");
+    for (const key in searchParams) {
+      const value = searchParams[key];
+      if (urlObject == null ? void 0 : urlObject.searchParams.has(key)) {
+        (_a = urlObject == null ? void 0 : urlObject.searchParams) == null ? void 0 : _a.set(key, value);
+      } else {
+        (_b = urlObject == null ? void 0 : urlObject.searchParams) == null ? void 0 : _b.append(key, value);
+      }
+    }
+    url = urlObject.toString();
+    if (withoutProtocol) {
+      return url == null ? void 0 : url.replace(location.protocol, "");
+    }
+    return url;
+  };
+  const getUrlObject = (url) => {
+    if (!url) {
+      return;
+    }
+    const withoutProtocol = url.startsWith("//");
+    if (withoutProtocol) {
+      url = location.protocol + url;
+    }
+    try {
+      return new URL(url);
+    } catch (error2) {
+      return;
+    }
+  };
   function isType(suffix) {
     return function(url) {
       return url == null ? void 0 : url.split("?")[0].toLowerCase().includes(suffix);
@@ -12374,14 +12447,16 @@ var __publicField = (obj, key, value) => {
     return sniffer$1.isMSESupport();
   }
   async function isSoftDecodeSupported() {
-    const pluginXgvideo = await load(DynamicModule.PluginXgvideo);
-    return pluginXgvideo == null ? void 0 : pluginXgvideo.isSupported();
+    const { XGVideoPlugin } = await load(DynamicModule.PluginXgvideo);
+    return XGVideoPlugin == null ? void 0 : XGVideoPlugin.isSupported();
   }
   const util = {
     ...util$1,
     getStreamType,
     isMseSupported,
-    isSoftDecodeSupported
+    isSoftDecodeSupported,
+    appendSearchParams,
+    getUrlObject
   };
   var autoplay = "";
   const { isWeixin, os, device } = sniffer$1;
@@ -18191,9 +18266,11 @@ var __publicField = (obj, key, value) => {
     }
   }
   const getFlvStrategy = async (options) => {
-    var _a;
+    var _a, _b, _c;
     let mseStrategy;
     let softStrategy;
+    const enableLowLatency = ((_a = options == null ? void 0 : options.flv) == null ? void 0 : _a.enableLowLatency) && sniffer$1.device === "pc";
+    const abrPts = ((_b = options == null ? void 0 : options.flv) == null ? void 0 : _b.abrPts) ?? "-800";
     const codec = await getCodec(options);
     const isSoftDecode$1 = await isSoftDecode(options, codec);
     if (isSoftDecode$1) {
@@ -18210,11 +18287,21 @@ var __publicField = (obj, key, value) => {
       (mseStrategy == null ? void 0 : mseStrategy.module) && load(mseStrategy.module).catch(() => void 0),
       (softStrategy == null ? void 0 : softStrategy.module) && load(softStrategy.module).catch(() => void 0)
     ]);
-    softModule && ((_a = softStrategy == null ? void 0 : softStrategy.afterLoad) == null ? void 0 : _a.call(softStrategy, softModule));
+    (softModule == null ? void 0 : softModule.XGVideoPlugin) && ((_c = softStrategy == null ? void 0 : softStrategy.afterLoad) == null ? void 0 : _c.call(softStrategy, softModule == null ? void 0 : softModule.XGVideoPlugin));
     const combineOptions$1 = combineOptions([mseStrategy, softStrategy]);
+    const plugins = [];
+    if (enableLowLatency) {
+      combineOptions$1.url = appendSearchParams(options.url, { abr_pt: abrPts });
+    }
+    if (mseModule) {
+      plugins.push(mseModule.FlvPlugin);
+      if (enableLowLatency) {
+        plugins.push(mseModule.Adaptive);
+      }
+    }
     return {
       options: combineOptions$1,
-      plugins: mseModule ? [mseModule] : []
+      plugins
     };
   };
   const getHlsStrategy = async (options) => {
@@ -18237,26 +18324,31 @@ var __publicField = (obj, key, value) => {
       (mseStrategy == null ? void 0 : mseStrategy.module) && load(mseStrategy.module).catch(() => void 0),
       (softStrategy == null ? void 0 : softStrategy.module) && load(softStrategy.module).catch(() => void 0)
     ]);
-    softModule && ((_b = softStrategy == null ? void 0 : softStrategy.afterLoad) == null ? void 0 : _b.call(softStrategy, softModule));
+    (softModule == null ? void 0 : softModule.XGVideoPlugin) && ((_b = softStrategy == null ? void 0 : softStrategy.afterLoad) == null ? void 0 : _b.call(softStrategy, softModule == null ? void 0 : softModule.XGVideoPlugin));
     const combineOptions$1 = combineOptions([mseStrategy, softStrategy]);
     return {
       options: combineOptions$1,
-      plugins: mseModule ? [mseModule] : []
+      plugins: (mseModule == null ? void 0 : mseModule.HlsPlugin) ? [mseModule.HlsPlugin] : []
+    };
+  };
+  const createFlvMseStrategy = (options) => {
+    var _a;
+    return {
+      options: {
+        flv: {
+          retryCount: 0,
+          disconnectRetryCount: ((_a = options == null ? void 0 : options.flv) == null ? void 0 : _a.retryCount) ?? void 0,
+          ...(options == null ? void 0 : options.flv) ?? {}
+        }
+      },
+      module: DynamicModule.PluginFlv
     };
   };
-  const createFlvMseStrategy = (options) => ({
-    options: {
-      flv: {
-        retryCount: 0,
-        ...(options == null ? void 0 : options.flv) ?? {}
-      }
-    },
-    module: DynamicModule.PluginFlv
-  });
   const createHlsMseStrategy = (options) => ({
     options: {
       hls: {
         retryCount: 0,
+        pollRetryCount: 0,
         ...(options == null ? void 0 : options.hls) ?? {}
       }
     },
@@ -18375,13 +18467,13 @@ var __publicField = (obj, key, value) => {
     return new VeError(ERRORS[errorCode], i18n);
   }
   async function isRTMSupported() {
-    const Rtm = await load(DynamicModule.PluginRtm);
-    return Rtm.isSupported();
+    const { RtmPlugin } = await load(DynamicModule.PluginRtm);
+    return RtmPlugin.isSupported();
   }
   async function isRTMSupportCodec(codec = RTMCodec.H264) {
-    const Rtm = await load(DynamicModule.PluginRtm);
+    const { RtmPlugin } = await load(DynamicModule.PluginRtm);
     if (codec === RTMCodec.H264)
-      return Rtm.isSupportedH264();
+      return RtmPlugin.isSupportedH264();
     return false;
   }
   const rtmStrategy = {
@@ -18399,7 +18491,12 @@ var __publicField = (obj, key, value) => {
     var _a;
     let backupStrategy;
     const { url } = options;
-    const { fallbackUrl, enableFallback = true, ...ret } = options.rtm || {};
+    const {
+      fallbackUrl,
+      enableFallback = true,
+      enableRTMAutoTranscode,
+      ...ret
+    } = options.rtm || {};
     const actualFallbackUrl = !enableFallback ? "" : !fallbackUrl && url ? generateFallbackUrl(url) : fallbackUrl;
     const backupType = actualFallbackUrl && util.getStreamType(actualFallbackUrl);
     if (backupType === "flv" && util.isMseSupported(Codec.H264)) {
@@ -18408,8 +18505,16 @@ var __publicField = (obj, key, value) => {
       backupStrategy = createHlsMseStrategy(options);
     }
     const [rtmCdn, backupCdn] = await Promise.all([
-      load(rtmStrategy.module).catch(() => void 0),
-      backupStrategy && load(backupStrategy.module).catch(() => void 0)
+      load(rtmStrategy.module).then((module2) => {
+        return module2.RtmPlugin;
+      }).catch(() => void 0),
+      backupStrategy && load(backupStrategy.module).then((module2) => {
+        if ((backupStrategy == null ? void 0 : backupStrategy.module) === DynamicModule.PluginFlv) {
+          return module2.FlvPlugin;
+        } else if ((backupStrategy == null ? void 0 : backupStrategy.module) === DynamicModule.PluginHls) {
+          return module2.HlsPlugin;
+        }
+      }).catch(() => void 0)
     ]);
     const [RTMSupported, RTMSupportCodec] = await Promise.all([
       isRTMSupported(),
@@ -18442,6 +18547,7 @@ var __publicField = (obj, key, value) => {
     return {
       options: {
         ...(backupStrategy == null ? void 0 : backupStrategy.options) || {},
+        url: enableRTMAutoTranscode ? util.appendSearchParams(url, { enableRTMAutoTranscode: "true" }) : void 0,
         _RTMdegrade: void 0,
         rts: {
           retryCount: 0,
@@ -18651,7 +18757,7 @@ var __publicField = (obj, key, value) => {
     `;
     }
     _handleRefresh(e2) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f;
       const { player } = this;
       if (!player)
         return;
@@ -18662,6 +18768,7 @@ var __publicField = (obj, key, value) => {
       if (player) {
         player.emit(Events.REFRESH_CLICK);
         (_c = (_b = (_a = this.player) == null ? void 0 : _a.config) == null ? void 0 : _b.veplayer) == null ? void 0 : _c.retry();
+        (_f = (_e = (_d = this.player) == null ? void 0 : _d.plugins) == null ? void 0 : _e.error) == null ? void 0 : _f.hideError();
       }
       player.once(CANPLAY, () => {
         player.removeClass("xgplayer-is-enter");
@@ -21112,24 +21219,12 @@ var __publicField = (obj, key, value) => {
     return userId;
   };
   const generateUrlWithSessionId = (url) => {
-    var _a, _b;
-    if (!url) {
-      return "";
-    }
-    const withoutProtocol = url.startsWith("//");
-    if (withoutProtocol) {
-      url = location.protocol + url;
+    const urlObject = util.getUrlObject(url);
+    if (!urlObject) {
+      return url ?? "";
     }
-    try {
-      const urlObject = new URL(url);
-      if (!((_a = urlObject == null ? void 0 : urlObject.searchParams) == null ? void 0 : _a.get("_session_id"))) {
-        (_b = urlObject == null ? void 0 : urlObject.searchParams) == null ? void 0 : _b.append("_session_id", generateSessionId());
-      }
-      url = urlObject.toString();
-    } catch (error2) {
-    }
-    if (withoutProtocol) {
-      return url == null ? void 0 : url.replace(location.protocol, "");
+    if (!(urlObject == null ? void 0 : urlObject.searchParams.get("_session_id"))) {
+      return util.appendSearchParams(url, { _session_id: generateSessionId() });
     }
     return url;
   };
@@ -21230,9 +21325,9 @@ var __publicField = (obj, key, value) => {
         user_id: this._userId,
         device_id: this._deviceId,
         ext: {
-          veplayer_version: "2.1.0",
-          flv_version: "3.0.10-alpha.4",
-          hls_version: "3.0.10-alpha.4",
+          veplayer_version: "2.2.0-rc.1",
+          flv_version: "3.0.11-alpha.2",
+          hls_version: "3.0.11-alpha.2",
           rts_version: "0.2.0-alpha.5"
         }
       });

package/umd/veplayer.live.d.ts

@@ -2829,18 +2829,14 @@ declare namespace strategy {
         plugins?: undefined;
     } | {
         options: Partial<VePlayerBaseOptions>;
-        plugins: {
-            [x: string]: any;
-        }[];
+        plugins: any[];
     }>;
     const getHlsStrategy: (options: VePlayerBaseOptions) => Promise<{
         options?: undefined;
         plugins?: undefined;
     } | {
         options: Partial<VePlayerBaseOptions>;
-        plugins: {
-            [x: string]: any;
-        }[];
+        plugins: any[];
     }>;
 }
 declare function getStreamType(url: string): "unknown" | "hls" | "flv" | "rtm" | "mp4" | "dash";
@@ -2863,10 +2859,14 @@ declare const util: {
     getStreamType: typeof getStreamType;
     isMseSupported: typeof isMseSupported;
     isSoftDecodeSupported: typeof isSoftDecodeSupported;
+    appendSearchParams: (url?: string | undefined, searchParams?: Record<string, string> | undefined) => string;
+    getUrlObject: (url?: string | undefined) => URL | undefined;
     createDom(el?: string | undefined, tpl?: string | undefined, attrs?: {
         [propName: string]: any;
     } | undefined, cname?: string | undefined): HTMLElement;
-    createDomFromHtml(html: string, attrs?: string | undefined, classname?: string | undefined): HTMLElement;
+    createDomFromHtml(html: string, attrs?: {
+        [propName: string]: any;
+    } | undefined, classname?: string | undefined): HTMLElement;
     hasClass(el: HTMLElement, className: string): boolean;
     addClass(el: HTMLElement, className: string): void;
     removeClass(el: HTMLElement, className: string): void;
@@ -2933,7 +2933,7 @@ declare const util: {
         y: number;
         scale: number;
         rotate: number;
-    } | undefined): string;
+    } | undefined, transformValue?: string | undefined): string;
     convertDeg(val: number): number;
     getIndexByTime(time: any, segments: any): number;
     getOffsetCurrentTime(currentTime: any, segments: any, index?: number | undefined): any;
@@ -3697,7 +3697,16 @@ interface Rtm {
      * @default 1000
      */
     retryDelay?: number;
+    /** {zh}
+     * @brief 是否开启自动降级。
+     * @default true
+     */
     enableFallback?: boolean;
+    /** {zh}
+     * @brief 是否开启自动转码。
+     * @default false
+     */
+    enableRTMAutoTranscode?: boolean;
 }
 /**
  * @list option
@@ -3719,6 +3728,7 @@ interface Flv {
      * @default 10000
      */
     loadTimeout?: number;
+    enableLowLatency?: boolean;
 }
 /**
  * @list option
@@ -6005,10 +6015,14 @@ declare namespace live {
         getStreamType: typeof getStreamType;
         isMseSupported: typeof isMseSupported;
         isSoftDecodeSupported: typeof isSoftDecodeSupported;
+        appendSearchParams: (url?: string | undefined, searchParams?: Record<string, string> | undefined) => string;
+        getUrlObject: (url?: string | undefined) => URL | undefined;
         createDom(el?: string | undefined, tpl?: string | undefined, attrs?: {
             [propName: string]: any;
         } | undefined, cname?: string | undefined): HTMLElement;
-        createDomFromHtml(html: string, attrs?: string | undefined, classname?: string | undefined): HTMLElement;
+        createDomFromHtml(html: string, attrs?: {
+            [propName: string]: any;
+        } | undefined, classname?: string | undefined): HTMLElement;
         hasClass(el: HTMLElement, className: string): boolean;
         addClass(el: HTMLElement, className: string): void;
         removeClass(el: HTMLElement, className: string): void;
@@ -6075,7 +6089,7 @@ declare namespace live {
             y: number;
             scale: number;
             rotate: number;
-        } | undefined): string;
+        } | undefined, transformValue?: string | undefined): string;
         convertDeg(val: number): number;
         getIndexByTime(time: any, segments: any): number;
         getOffsetCurrentTime(currentTime: any, segments: any, index?: number | undefined): any;
@@ -6644,7 +6658,16 @@ declare namespace live {
          * @default 1000
          */
         retryDelay?: number;
+        /** {zh}
+         * @brief 是否开启自动降级。
+         * @default true
+         */
         enableFallback?: boolean;
+        /** {zh}
+         * @brief 是否开启自动转码。
+         * @default false
+         */
+        enableRTMAutoTranscode?: boolean;
     }
     /**
      * @list option
@@ -6666,6 +6689,7 @@ declare namespace live {
          * @default 10000
          */
         loadTimeout?: number;
+        enableLowLatency?: boolean;
     }
     /**
      * @list option