@volcengine/veplayer 2.1.0 → 2.2.0-rc.1

package/esm/veplayer.development.js

@@ -1016,7 +1016,7 @@ util$1.isMSE = function(video) {
   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;
@@ -1070,7 +1070,24 @@ util$1.getTransformStyle = function() {
     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) {
@@ -1323,10 +1340,10 @@ var sniffer$1 = {
     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,
@@ -1437,7 +1454,7 @@ var sniffer$1 = {
     }
   }
 };
-var version = "3.0.10-alpha.4";
+var version = "3.0.11-alpha.2";
 var ERROR_TYPE_MAP = {
   1: "media",
   2: "media",
@@ -5662,6 +5679,9 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       clsList.forEach(function(cls) {
         _this23.removeClass(cls);
       });
+      if (!this._accPlayed.t && !this.paused && !this.ended) {
+        this._accPlayed.t = (/* @__PURE__ */ new Date()).getTime();
+      }
     }
   }, {
     key: "onTimeupdate",
@@ -5785,7 +5805,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
         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;
     }
@@ -6596,11 +6616,31 @@ var Poster = /* @__PURE__ */ function(_Plugin) {
       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>');
     }
   }], [{
@@ -6614,7 +6654,8 @@ var Poster = /* @__PURE__ */ function(_Plugin) {
       return {
         isEndedShow: true,
         hideCanplay: false,
-        poster: ""
+        poster: "",
+        fillMode: "fixWidth"
       };
     }
   }]);
@@ -8646,7 +8687,7 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
       var keyCode = e3.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(e3.target) || !_this.checkIsVisible() || e3.metaKey || e3.altKey || e3.ctrlKey) {
+      if (disable || disableBodyTrigger || !(player.isUserActive || isIgnoreUserActive) || isDisableTag(e3.target) || !_this.checkIsVisible() || e3.metaKey || e3.altKey || e3.ctrlKey) {
         _keyState.isBodyKeyDown = false;
         return;
       }
@@ -8675,9 +8716,6 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
         if (_this.config.disable || _this.config.disableRootTrigger || e3.metaKey || e3.altKey || e3.ctrlKey) {
           return;
         }
-        if (!_this.player.isUserActive && !_this.config.isIgnoreUserActive) {
-          return;
-        }
         if (e3 && (e3.keyCode === 37 || _this.checkCode(e3.keyCode)) && (e3.target === _this.player.root || e3.target === _this.player.video || e3.target === _this.player.controls.el)) {
           _keyState.isKeyDown = true;
         }
@@ -8950,7 +8988,6 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
         }
         _keyState.tt = _t;
       }
-      preventDefault(e3);
       this.handleKeyCode(e3.keyCode, e3, _keyState.isPress);
     }
   }, {
@@ -8987,6 +9024,7 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
               isPress
             }, this.keyCodeMap[arr[i2]]));
           }
+          preventDefault(event);
           break;
         }
       }
@@ -9022,11 +9060,11 @@ var Keyboard = /* @__PURE__ */ function(_BasePlugin) {
         checkVisible: false,
         disableBodyTrigger: false,
         disableRootTrigger: false,
-        isGlobalTrigger: false,
+        isGlobalTrigger: true,
         keyCodeMap: {},
         disable: false,
         playbackRate: 2,
-        isIgnoreUserActive: false
+        isIgnoreUserActive: true
       };
     }
   }]);
@@ -12335,6 +12373,41 @@ async function load(name, src2) {
     });
   }
 }
+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);
@@ -12370,14 +12443,16 @@ function isMseSupported(codec = Codec.H264) {
   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;
@@ -18187,9 +18262,11 @@ class Lite {
   }
 }
 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) {
@@ -18206,11 +18283,21 @@ const getFlvStrategy = async (options) => {
     (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) => {
@@ -18233,26 +18320,31 @@ const getHlsStrategy = async (options) => {
     (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) ?? {}
     }
   },
@@ -18371,13 +18463,13 @@ function create(errorCode, i18n) {
   return new VeError2(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 = {
@@ -18395,7 +18487,12 @@ const getRtmStrategy = async (options, player) => {
   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)) {
@@ -18404,8 +18501,16 @@ const getRtmStrategy = async (options, player) => {
     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((module) => {
+      return module.RtmPlugin;
+    }).catch(() => void 0),
+    backupStrategy && load(backupStrategy.module).then((module) => {
+      if ((backupStrategy == null ? void 0 : backupStrategy.module) === DynamicModule.PluginFlv) {
+        return module.FlvPlugin;
+      } else if ((backupStrategy == null ? void 0 : backupStrategy.module) === DynamicModule.PluginHls) {
+        return module.HlsPlugin;
+      }
+    }).catch(() => void 0)
   ]);
   const [RTMSupported, RTMSupportCodec] = await Promise.all([
     isRTMSupported(),
@@ -18438,6 +18543,7 @@ const getRtmStrategy = async (options, player) => {
   return {
     options: {
       ...(backupStrategy == null ? void 0 : backupStrategy.options) || {},
+      url: enableRTMAutoTranscode ? util.appendSearchParams(url, { enableRTMAutoTranscode: "true" }) : void 0,
       _RTMdegrade: void 0,
       rts: {
         retryCount: 0,
@@ -18647,7 +18753,7 @@ class Refresh extends Plugin {
     `;
   }
   _handleRefresh(e3) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     const { player } = this;
     if (!player)
       return;
@@ -18658,6 +18764,7 @@ class Refresh extends Plugin {
     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");
@@ -21108,24 +21215,12 @@ const getUserId2 = () => {
   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;
 };
@@ -21226,9 +21321,9 @@ class Logger extends Plugin {
       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/esm/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