@volcengine/veplayer 2.6.0-rc.5 → 2.6.1-rc.0

package/esm/veplayer.vod.d.ts

@@ -1395,6 +1395,7 @@ interface VePlayerBaseOptions extends Omit<PlayerOptions, "autoplay" | "i18n"> {
      * @default false
      */
     closeVideoDblclick?: boolean;
+    mediaElement?: HTMLVideoElement | null;
 }
 /** {zh}
  * @list option
@@ -1595,6 +1596,7 @@ declare class VePlayerBase {
     private _previousPrepareResult?;
     private _i18nManager;
     private _events;
+    private _customMedia?;
     private _errorCallback;
     /** {zh}
      * @hidden
@@ -3729,6 +3731,7 @@ declare namespace strategy {
          * @default false
          */
         closeVideoDblclick?: boolean;
+        mediaElement?: HTMLVideoElement | null;
     }
     /** {zh}
      * @list option

package/esm/veplayer.vod.development.js

@@ -1452,7 +1452,7 @@ var sniffer = {
     }
   }
 };
-var version = "3.0.21-rc.5";
+var version = "3.0.21-alpha.13";
 var ERROR_TYPE_MAP = {
   1: "media",
   2: "media",
@@ -1754,7 +1754,7 @@ var MediaProxy = /* @__PURE__ */ function(_EventEmitter) {
     if (options.autoplayMuted && !Object.prototype.hasOwnProperty.call(_this.mediaConfig, "muted")) {
       _this.mediaConfig.muted = true;
     }
-    _this.media = util.createDom(_this.mediaConfig.mediaType, "", _this.mediaConfig, "");
+    _this.media = options.mediaEl instanceof HTMLMediaElement ? options.mediaEl : typeof options.mediaEl === "function" ? options.mediaEl(_this.mediaConfig) : util.createDom(_this.mediaConfig.mediaType, "", _this.mediaConfig, "");
     if (options.defaultPlaybackRate) {
       _this.media.defaultPlaybackRate = _this.media.playbackRate = options.defaultPlaybackRate;
     }
@@ -1768,6 +1768,9 @@ var MediaProxy = /* @__PURE__ */ function(_EventEmitter) {
     if (options.autoplay) {
       _this.media.autoplay = true;
     }
+    if (options.playsinline) {
+      _this.media.playsinline = true;
+    }
     _this._interval = {};
     _this.mediaEventMiddleware = {};
     _this.attachVideoEvents();
@@ -2488,8 +2491,9 @@ function removeHooks(hookName, handler) {
     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()]) {
@@ -4745,18 +4749,10 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
         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, {
@@ -5422,6 +5418,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       this.hasStart = false;
       this._useAutoplay = false;
       root2.removeAttribute(PLATER_ID);
+      media.removeAttribute(PLATER_ID);
       this.updateAcc("destroy");
       this._unbindEvents();
       this._detachSourceEvents(this.media);
@@ -5440,7 +5437,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
           innerContainer.removeChild(_c[i]);
         }
       }
-      !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;
@@ -5966,6 +5963,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     key: "resizePosition",
     value: function resizePosition() {
+      var _this25 = this;
       var _this$videoPos = this.videoPos, vy = _this$videoPos.vy, vx = _this$videoPos.vx, h = _this$videoPos.h, w = _this$videoPos.w;
       var rotate = this.videoPos.rotate;
       if (rotate < 0 && h < 0 && w < 0) {
@@ -5990,6 +5988,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       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) {
@@ -5999,8 +5998,10 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
         _pos.y = _t === 2 ? 0 - offsetY : offsetY;
         offsetX = vx > 0 ? (100 - w) / 2 - vx : 0;
         _pos.x = _t === 2 ? 0 - offsetX : offsetX;
-        this.media.style.width = "".concat(rWidth, "px");
-        this.media.style.height = "".concat(rHeight, "px");
+        styles.width = "".concat(rWidth, "px");
+        styles.height = "".concat(rHeight, "px");
+        styles.maxWidth = "";
+        styles.maxHeight = "";
       } else if (_t % 2 === 1) {
         rWidth = height;
         rHeight = width;
@@ -6010,12 +6011,17 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
         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.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",
@@ -6039,14 +6045,14 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     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.typeOf(plugin.setConfig) === "Function") {
             plugin.setConfig(config[key]);
           }
@@ -6056,20 +6062,20 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
   }, {
     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;
       }
@@ -6109,7 +6115,7 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       }
       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) {
@@ -6209,15 +6215,15 @@ var Player = /* @__PURE__ */ function(_MediaProxy) {
       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) {
@@ -13277,6 +13283,40 @@ const getUrlObject = (url) => {
     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"',
@@ -13339,6 +13379,7 @@ function isMMSSupported(codec = Codec.H264) {
 }
 ({
   ...util,
+  ...DomUtils,
   getStreamType,
   isMseSupported,
   isSoftDecodeSupported,
@@ -13947,6 +13988,25 @@ class VeI18n {
   }
 }
 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 = {
   ...XGPosition,
@@ -14002,20 +14062,25 @@ class VePlayerBase {
     __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 = [];
@@ -14027,11 +14092,11 @@ class VePlayerBase {
       ...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
@@ -14211,7 +14276,7 @@ class VePlayerBase {
    * @brief Retrieve the player SDK version number.
    */
   get playerVersion() {
-    return "2.6.0-rc.5";
+    return "2.6.1-rc.0";
   }
   /** {zh}
    * @brief 获取当前播放视频的清晰度唯一标识（definition）。
@@ -14685,8 +14750,10 @@ class VePlayerBase {
    * @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