@volcengine/veplayer 2.6.0 → 2.6.1-rc.1

package/umd/veplayer.d.ts

@@ -1526,6 +1526,13 @@ interface VePlayerBaseOptions extends Omit<PlayerOptions, "autoplay" | "i18n"> {
      * @default false
      */
     closeVideoDblclick?: boolean;
+    /** {zh}
+     * @brief 支持传入 video dom，常应用于多播放器复用同一 video 场景。
+     */
+    /** {en}
+     * @brief Supports passing in video DOM, commonly used for reusing the same video scene across multiple players.
+     */
+    mediaElement?: HTMLVideoElement | null;
 }
 /** {zh}
  * @list option
@@ -1763,6 +1770,7 @@ declare class VePlayerBase {
     private _previousPrepareResult?;
     private _i18nManager;
     private _events;
+    private _customMedia?;
     private _errorCallback;
     /** {zh}
      * @hidden
@@ -3902,6 +3910,13 @@ declare namespace strategy {
          * @default false
          */
         closeVideoDblclick?: boolean;
+        /** {zh}
+         * @brief 支持传入 video dom，常应用于多播放器复用同一 video 场景。
+         */
+        /** {en}
+         * @brief Supports passing in video DOM, commonly used for reusing the same video scene across multiple players.
+         */
+        mediaElement?: HTMLVideoElement | null;
     }
     /** {zh}
      * @list option
@@ -4276,6 +4291,9 @@ declare const util: {
     isMMSSupported: typeof isMMSSupported;
     appendSearchParams: (url?: string | undefined, searchParams?: Record<string, string> | undefined) => string;
     getUrlObject: (url?: string | undefined) => URL | undefined;
+    getAttributes(dom: HTMLMediaElement): Record<string, any>;
+    setAttributes(dom: HTMLMediaElement, attrs?: Record<string, any>): HTMLMediaElement;
+    replaceAttributes(dom: HTMLMediaElement, attrs?: Record<string, any>): HTMLMediaElement;
     createDom(el?: string | undefined, tpl?: string | undefined, attrs?: {
         [propName: string]: any;
     } | undefined, cname?: string | undefined): HTMLElement;
@@ -9210,6 +9228,13 @@ declare namespace live {
          * @default false
          */
         closeVideoDblclick?: boolean;
+        /** {zh}
+         * @brief 支持传入 video dom，常应用于多播放器复用同一 video 场景。
+         */
+        /** {en}
+         * @brief Supports passing in video DOM, commonly used for reusing the same video scene across multiple players.
+         */
+        mediaElement?: HTMLVideoElement | null;
     }
     /** {zh}
      * @list option
@@ -9448,6 +9473,7 @@ declare namespace live {
         private _previousPrepareResult?;
         private _i18nManager;
         private _events;
+        private _customMedia?;
         private _errorCallback;
         /** {zh}
          * @hidden
@@ -10186,6 +10212,9 @@ declare namespace live {
         isMMSSupported: typeof isMMSSupported;
         appendSearchParams: (url?: string | undefined, searchParams?: Record<string, string> | undefined) => string;
         getUrlObject: (url?: string | undefined) => URL | undefined;
+        getAttributes(dom: HTMLMediaElement): Record<string, any>;
+        setAttributes(dom: HTMLMediaElement, attrs?: Record<string, any>): HTMLMediaElement;
+        replaceAttributes(dom: HTMLMediaElement, attrs?: Record<string, any>): HTMLMediaElement;
         createDom(el?: string | undefined, tpl?: string | undefined, attrs?: {
             [propName: string]: any;
         } | undefined, cname?: string | undefined): HTMLElement;

package/umd/veplayer.development.js

@@ -1461,7 +1461,7 @@ var __publicField = (obj, key, value) => {
       }
     }
   };
-  var version = "3.0.21-rc.5";
+  var version = "3.0.21-rc.21";
   var ERROR_TYPE_MAP = {
     1: "media",
     2: "media",
@@ -1763,7 +1763,7 @@ var __publicField = (obj, key, value) => {
       if (options.autoplayMuted && !Object.prototype.hasOwnProperty.call(_this.mediaConfig, "muted")) {
         _this.mediaConfig.muted = true;
       }
-      _this.media = util$1.createDom(_this.mediaConfig.mediaType, "", _this.mediaConfig, "");
+      _this.media = options.mediaEl instanceof HTMLMediaElement ? options.mediaEl : typeof options.mediaEl === "function" ? options.mediaEl(_this.mediaConfig) : util$1.createDom(_this.mediaConfig.mediaType, "", _this.mediaConfig, "");
       if (options.defaultPlaybackRate) {
         _this.media.defaultPlaybackRate = _this.media.playbackRate = options.defaultPlaybackRate;
       }
@@ -1777,6 +1777,9 @@ var __publicField = (obj, key, value) => {
       if (options.autoplay) {
         _this.media.autoplay = true;
       }
+      if (options.playsinline) {
+        _this.media.playsinline = true;
+      }
       _this._interval = {};
       _this.mediaEventMiddleware = {};
       _this.attachVideoEvents();
@@ -2497,8 +2500,9 @@ var __publicField = (obj, key, value) => {
       if (index !== -1) {
         hooks.splice(index, 1);
       }
+    } else if (__hooks[hookName]) {
+      __hooks[hookName] = null;
     }
-    delete __hooks[hookName];
   }
   function usePluginHooks(pluginName) {
     if (!this.plugins || !this.plugins[pluginName.toLowerCase()]) {
@@ -4754,18 +4758,10 @@ var __publicField = (obj, key, value) => {
           ret.destroy();
         }
         this.root.setAttribute(PLATER_ID, this.playerId);
+        this.media.setAttribute(PLATER_ID, this.playerId);
         (_instManager = instManager) === null || _instManager === void 0 ? void 0 : _instManager.add(this);
         pluginsManager.init(this);
         this._initBaseDoms();
-        var XgVideoProxy = this.constructor.XgVideoProxy;
-        if (XgVideoProxy && this.mediaConfig.mediaType === XgVideoProxy.mediaType) {
-          var _el = this.innerContainer || this.root;
-          this.detachVideoEvents(this.media);
-          var _nVideo = new XgVideoProxy(_el, this.config, this.mediaConfig);
-          this.attachVideoEvents(_nVideo);
-          this.media = _nVideo;
-        }
-        this.media.setAttribute(PLATER_ID, this.playerId);
         if (this.config.controls) {
           var _root = this.config.controls.root || null;
           var controls = pluginsManager.register(this, Controls, {
@@ -5431,6 +5427,7 @@ var __publicField = (obj, key, value) => {
         this.hasStart = false;
         this._useAutoplay = false;
         root2.removeAttribute(PLATER_ID);
+        media.removeAttribute(PLATER_ID);
         this.updateAcc("destroy");
         this._unbindEvents();
         this._detachSourceEvents(this.media);
@@ -5449,7 +5446,7 @@ var __publicField = (obj, key, value) => {
             innerContainer.removeChild(_c[i2]);
           }
         }
-        !innerContainer && media instanceof window.Node && root2.contains(media) && root2.removeChild(media);
+        !innerContainer && media instanceof window.Node && root2.contains(media) && !this.config.remainMediaAfterDestroy && root2.removeChild(media);
         ["topBar", "leftBar", "rightBar", "innerContainer"].map(function(item) {
           _this18[item] && root2.removeChild(_this18[item]);
           _this18[item] = null;
@@ -5975,6 +5972,7 @@ var __publicField = (obj, key, value) => {
     }, {
       key: "resizePosition",
       value: function resizePosition() {
+        var _this25 = this;
         var _this$videoPos = this.videoPos, vy = _this$videoPos.vy, vx = _this$videoPos.vx, h2 = _this$videoPos.h, w2 = _this$videoPos.w;
         var rotate = this.videoPos.rotate;
         if (rotate < 0 && h2 < 0 && w2 < 0) {
@@ -5999,6 +5997,7 @@ var __publicField = (obj, key, value) => {
         var root2 = this.root, innerContainer = this.innerContainer;
         var width = root2.offsetWidth;
         var height = innerContainer ? innerContainer.offsetHeight : root2.offsetHeight;
+        var styles = {};
         var rHeight = height;
         var rWidth = width;
         if (_t % 2 === 0) {
@@ -6008,8 +6007,10 @@ var __publicField = (obj, key, value) => {
           _pos.y = _t === 2 ? 0 - offsetY : offsetY;
           offsetX = vx > 0 ? (100 - w2) / 2 - vx : 0;
           _pos.x = _t === 2 ? 0 - offsetX : offsetX;
-          this.media.style.width = "".concat(rWidth, "px");
-          this.media.style.height = "".concat(rHeight, "px");
+          styles.width = "".concat(rWidth, "px");
+          styles.height = "".concat(rHeight, "px");
+          styles.maxWidth = "";
+          styles.maxHeight = "";
         } else if (_t % 2 === 1) {
           rWidth = height;
           rHeight = width;
@@ -6019,12 +6020,17 @@ var __publicField = (obj, key, value) => {
           offsetY = offset / 2 / rHeight * 100;
           _pos.y = _t === 3 ? offsetY + vx / 2 : offsetY - vx / 2;
           _pos.scale = scale;
-          this.media.style.width = "".concat(rWidth, "px");
-          this.media.style.height = "".concat(rHeight, "px");
+          styles.width = "".concat(rWidth, "px");
+          styles.maxWidth = "".concat(rWidth, "px");
+          styles.height = "".concat(rHeight, "px");
+          styles.maxHeight = "".concat(rHeight, "px");
         }
         var formStyle = util$1.getTransformStyle(_pos, this.media.style.transform || this.media.style.webkitTransform);
-        this.media.style.transform = formStyle;
-        this.media.style.webkitTransform = formStyle;
+        styles.transform = formStyle;
+        styles.webkitTransform = formStyle;
+        Object.keys(styles).map(function(key) {
+          _this25.media.style[key] = styles[key];
+        });
       }
     }, {
       key: "position",
@@ -6048,14 +6054,14 @@ var __publicField = (obj, key, value) => {
     }, {
       key: "setConfig",
       value: function setConfig(config) {
-        var _this25 = this;
+        var _this26 = this;
         if (!config) {
           return;
         }
         Object.keys(config).map(function(key) {
           if (key !== "plugins") {
-            _this25.config[key] = config[key];
-            var plugin = _this25.plugins[key.toLowerCase()];
+            _this26.config[key] = config[key];
+            var plugin = _this26.plugins[key.toLowerCase()];
             if (plugin && util$1.typeOf(plugin.setConfig) === "Function") {
               plugin.setConfig(config[key]);
             }
@@ -6065,20 +6071,20 @@ var __publicField = (obj, key, value) => {
     }, {
       key: "playNext",
       value: function playNext(config) {
-        var _this26 = this;
+        var _this27 = this;
         this.resetState();
         this.setConfig(config);
         this._currentTime = 0;
         this._duration = 0;
         runHooks(this, "playnext", function() {
-          _this26.start();
-          _this26.emit(PLAYNEXT, config);
+          _this27.start();
+          _this27.emit(PLAYNEXT, config);
         });
       }
     }, {
       key: "resize",
       value: function resize() {
-        var _this27 = this;
+        var _this28 = this;
         if (!this.media) {
           return;
         }
@@ -6118,7 +6124,7 @@ var __publicField = (obj, key, value) => {
         }
         if (!this.fullscreen && !this.cssfullscreen) {
           Object.keys(_style).forEach(function(key) {
-            _this27.root.style[key] = _style[key];
+            _this28.root.style[key] = _style[key];
           });
         }
         if (videoFillMode === "fillHeight" && fit < videoFit || videoFillMode === "fillWidth" && fit > videoFit) {
@@ -6218,15 +6224,15 @@ var __publicField = (obj, key, value) => {
         return this.config.definition.list || [];
       },
       set: function set(list) {
-        var _this28 = this;
+        var _this29 = this;
         var definition = this.config.definition;
         var curDef = null;
         var targetDef = null;
         definition.list = list;
         this.emit("resourceReady", list);
         list.forEach(function(item) {
-          var _this28$curDefinition;
-          if (((_this28$curDefinition = _this28.curDefinition) === null || _this28$curDefinition === void 0 ? void 0 : _this28$curDefinition.definition) === item.definition) {
+          var _this29$curDefinition;
+          if (((_this29$curDefinition = _this29.curDefinition) === null || _this29$curDefinition === void 0 ? void 0 : _this29$curDefinition.definition) === item.definition) {
             curDef = item;
           }
           if (definition.defaultDefinition === item.definition) {
@@ -13390,6 +13396,40 @@ var __publicField = (obj, key, value) => {
       return;
     }
   };
+  function getAttributes(dom) {
+    const attributes = {};
+    for (const attr of dom.attributes) {
+      attributes[attr.name] = attr.value;
+    }
+    return attributes;
+  }
+  function setAttributes(dom, attrs = {}) {
+    Object.keys(attrs).forEach((item) => {
+      const key = item;
+      const value = attrs[item];
+      if (value) {
+        dom == null ? void 0 : dom.setAttribute(key, value);
+      }
+    });
+    return dom;
+  }
+  function replaceAttributes(dom, attrs = {}) {
+    const attributes = getAttributes(dom);
+    Object.keys(attributes).forEach((attr) => {
+      if (attrs[attr]) {
+        dom == null ? void 0 : dom.setAttribute(attr, attrs[attr]);
+      } else {
+        dom == null ? void 0 : dom.removeAttribute(attr);
+      }
+    });
+    return dom;
+  }
+  var DomUtils = /* @__PURE__ */ Object.freeze({
+    __proto__: null,
+    getAttributes,
+    replaceAttributes,
+    setAttributes
+  });
   const H264_MIME = 'video/mp4; codecs="avc1.42E01E,mp4a.40.2"';
   const H265_MIME = [
     'video/mp4;codecs="hev1.1.6.L120.90"',
@@ -13452,6 +13492,7 @@ var __publicField = (obj, key, value) => {
   }
   const util = {
     ...util$1,
+    ...DomUtils,
     getStreamType,
     isMseSupported: isMseSupported$1,
     isSoftDecodeSupported,
@@ -14114,6 +14155,25 @@ var __publicField = (obj, key, value) => {
     }
   }
   var veplayerBase = "";
+  class CustomMedia {
+    constructor(el) {
+      __publicField(this, "_videoAttributes");
+      __publicField(this, "_el");
+      this._videoAttributes = getAttributes(el);
+      this._el = el;
+    }
+    get options() {
+      return {
+        remainMediaAfterDestroy: true,
+        mediaEl: (mediaConfig) => {
+          return setAttributes(this._el, mediaConfig);
+        }
+      };
+    }
+    destroy() {
+      replaceAttributes(this._el, this._videoAttributes);
+    }
+  }
   const { POSITIONS: XGPosition } = Plugin;
   const POSITIONS$1 = {
     ...XGPosition,
@@ -14169,20 +14229,25 @@ var __publicField = (obj, key, value) => {
       __publicField(this, "_previousPrepareResult");
       __publicField(this, "_i18nManager");
       __publicField(this, "_events", {});
+      __publicField(this, "_customMedia");
       __publicField(this, "_errorCallback");
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f;
       this._sourceManager = options.sourceManager;
       this._preparePlugins = options.preparePlugins;
       this._previousPrepareResult = options.prepareResult;
       this._i18nManager = options.i18nManager ?? new VeI18n({
         i18n: options.i18n
       });
+      if (options.mediaElement) {
+        this._customMedia = new CustomMedia(options.mediaElement);
+      }
       const xgOptions = transformOption({
         ...options,
-        ...(_a = this._previousPrepareResult) == null ? void 0 : _a.options
+        ...(_a = this._customMedia) == null ? void 0 : _a.options,
+        ...(_b = this._previousPrepareResult) == null ? void 0 : _b.options
       });
       const plugins = [
-        ...((_b = this._previousPrepareResult) == null ? void 0 : _b.plugins) ?? [],
+        ...((_c = this._previousPrepareResult) == null ? void 0 : _c.plugins) ?? [],
         ...options.plugins ?? DEFAULT_PLUGINS
       ];
       const topRightPlugins = [];
@@ -14194,11 +14259,11 @@ var __publicField = (obj, key, value) => {
         ...DEFAULT_OPTIONS,
         ...xgOptions,
         definition: {
-          list: ((_c = this._sourceManager.source) == null ? void 0 : _c.definitions) ?? [],
-          defaultDefinition: (_d = this._sourceManager.definition) == null ? void 0 : _d.definition,
+          list: ((_d = this._sourceManager.source) == null ? void 0 : _d.definitions) ?? [],
+          defaultDefinition: (_e = this._sourceManager.definition) == null ? void 0 : _e.definition,
           ...options.definition ?? {}
         },
-        url: (_e = this._sourceManager.definition) == null ? void 0 : _e.url,
+        url: (_f = this._sourceManager.definition) == null ? void 0 : _f.url,
         sources: {
           ...options.sources ?? {},
           sourceManager: this._sourceManager
@@ -14378,7 +14443,7 @@ var __publicField = (obj, key, value) => {
      * @brief Retrieve the player SDK version number.
      */
     get playerVersion() {
-      return "2.6.0";
+      return "2.6.1-rc.1";
     }
     /** {zh}
      * @brief 获取当前播放视频的清晰度唯一标识（definition）。
@@ -14852,8 +14917,10 @@ var __publicField = (obj, key, value) => {
      * @brief Destroys the player instance.
      */
     destroy() {
+      var _a;
       this._player.off(ERROR, this._errorCallback);
       this._player.destroy();
+      (_a = this._customMedia) == null ? void 0 : _a.destroy();
     }
     /** {zh}
      * @hidden
@@ -22743,9 +22810,9 @@ var __publicField = (obj, key, value) => {
         device_id: this._deviceId,
         error_report_stop: true,
         ext: {
-          veplayer_version: "2.6.0",
-          flv_version: "3.0.21-rc.5",
-          hls_version: "3.0.21-rc.5",
+          veplayer_version: "2.6.1-rc.1",
+          flv_version: "3.0.21-rc.21",
+          hls_version: "3.0.21-rc.21",
           rts_version: "0.2.1-alpha.14"
         }
       });

package/umd/veplayer.live.d.ts

@@ -1526,6 +1526,13 @@ interface VePlayerBaseOptions extends Omit<PlayerOptions, "autoplay" | "i18n"> {
      * @default false
      */
     closeVideoDblclick?: boolean;
+    /** {zh}
+     * @brief 支持传入 video dom，常应用于多播放器复用同一 video 场景。
+     */
+    /** {en}
+     * @brief Supports passing in video DOM, commonly used for reusing the same video scene across multiple players.
+     */
+    mediaElement?: HTMLVideoElement | null;
 }
 /** {zh}
  * @list option
@@ -1763,6 +1770,7 @@ declare class VePlayerBase {
     private _previousPrepareResult?;
     private _i18nManager;
     private _events;
+    private _customMedia?;
     private _errorCallback;
     /** {zh}
      * @hidden
@@ -3902,6 +3910,13 @@ declare namespace strategy {
          * @default false
          */
         closeVideoDblclick?: boolean;
+        /** {zh}
+         * @brief 支持传入 video dom，常应用于多播放器复用同一 video 场景。
+         */
+        /** {en}
+         * @brief Supports passing in video DOM, commonly used for reusing the same video scene across multiple players.
+         */
+        mediaElement?: HTMLVideoElement | null;
     }
     /** {zh}
      * @list option
@@ -4276,6 +4291,9 @@ declare const util: {
     isMMSSupported: typeof isMMSSupported;
     appendSearchParams: (url?: string | undefined, searchParams?: Record<string, string> | undefined) => string;
     getUrlObject: (url?: string | undefined) => URL | undefined;
+    getAttributes(dom: HTMLMediaElement): Record<string, any>;
+    setAttributes(dom: HTMLMediaElement, attrs?: Record<string, any>): HTMLMediaElement;
+    replaceAttributes(dom: HTMLMediaElement, attrs?: Record<string, any>): HTMLMediaElement;
     createDom(el?: string | undefined, tpl?: string | undefined, attrs?: {
         [propName: string]: any;
     } | undefined, cname?: string | undefined): HTMLElement;
@@ -9210,6 +9228,13 @@ declare namespace live {
          * @default false
          */
         closeVideoDblclick?: boolean;
+        /** {zh}
+         * @brief 支持传入 video dom，常应用于多播放器复用同一 video 场景。
+         */
+        /** {en}
+         * @brief Supports passing in video DOM, commonly used for reusing the same video scene across multiple players.
+         */
+        mediaElement?: HTMLVideoElement | null;
     }
     /** {zh}
      * @list option
@@ -9448,6 +9473,7 @@ declare namespace live {
         private _previousPrepareResult?;
         private _i18nManager;
         private _events;
+        private _customMedia?;
         private _errorCallback;
         /** {zh}
          * @hidden
@@ -10186,6 +10212,9 @@ declare namespace live {
         isMMSSupported: typeof isMMSSupported;
         appendSearchParams: (url?: string | undefined, searchParams?: Record<string, string> | undefined) => string;
         getUrlObject: (url?: string | undefined) => URL | undefined;
+        getAttributes(dom: HTMLMediaElement): Record<string, any>;
+        setAttributes(dom: HTMLMediaElement, attrs?: Record<string, any>): HTMLMediaElement;
+        replaceAttributes(dom: HTMLMediaElement, attrs?: Record<string, any>): HTMLMediaElement;
         createDom(el?: string | undefined, tpl?: string | undefined, attrs?: {
             [propName: string]: any;
         } | undefined, cname?: string | undefined): HTMLElement;