@realsee/vreo 0.2.0-alpha.8 → 1.0.0-alpha.1

package/lib/Player/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -37,9 +37,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -69,12 +69,21 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     _this.controller = new _Controller.Controller();
     _this.$five = _this.controller.$five = five;
 
-    if (!configs.containter) {
-      var containter = document.querySelector('#vreo-app') || document.createElement('div');
-      ReactDOM.unmountComponentAtNode(containter);
-      containter.setAttribute('id', 'vreo-app');
-      configs.containter = containter;
-      document.body.append(containter);
+    if (!configs.container) {
+      var _five$getElement;
+
+      var container = document.getElementById('vreo-app') || document.createElement('div');
+      ReactDOM.unmountComponentAtNode(container);
+      container.setAttribute('id', 'vreo-app');
+      configs.container = container;
+      var fiveCanvasDomParent = (_five$getElement = five.getElement()) === null || _five$getElement === void 0 ? void 0 : _five$getElement.parentNode;
+
+      if (fiveCanvasDomParent) {
+        fiveCanvasDomParent.append(container);
+      } else {
+        document.body.append(container);
+      } // document.body.append(container)
+
     }
 
     _this.configs = Object.freeze(Object.assign({
@@ -99,12 +108,21 @@ var Player = /*#__PURE__*/function (_Subscribe) {
         },
         five: five
       });
-    })), configs.containter); // 监听播放情况：抛出触发时机
+    })), configs.container); // 监听播放情况：抛出触发时机
 
+    (0, _mobx.reaction)(function () {
+      return _this.controller.ended;
+    }, function (ended) {
+      if (ended) {
+        _this.emit('paused', true);
+      }
+    });
     (0, _mobx.reaction)(function () {
       return _this.controller.playing;
     }, function (playing) {
-      _this.emit(playing ? 'playing' : 'paused');
+      if (!_this.controller.ended) {
+        _this.emit(playing ? 'playing' : 'paused');
+      }
     });
     return _this;
   }
@@ -115,39 +133,44 @@ var Player = /*#__PURE__*/function (_Subscribe) {
       var _load = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(vreoUnit) {
         var _this$controller$vide,
             _this$configs$imageOp,
+            _this$controller$vide2,
+            _this$controller$vide3,
             _this2 = this;
 
         var currentTime,
             preload,
+            force,
             panoIndexMap,
-            panoIndexs,
+            panoIndexes,
             i,
-            _this$controller$vide2,
-            _this$controller$vide3,
             _args = arguments;
-
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 currentTime = _args.length > 1 && _args[1] !== undefined ? _args[1] : 0;
                 preload = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
+                force = _args.length > 3 && _args[3] !== undefined ? _args[3] : false;
+
+                if (force) {
+                  vreoUnit = JSON.parse(JSON.stringify(vreoUnit));
+                }
 
                 if (this.controller.visible) {
-                  _context.next = 6;
+                  _context.next = 8;
                   break;
                 }
 
                 this.controller.setVisible(true); // 延迟 500ms 规避跟 DOM 动画冲突
 
-                _context.next = 6;
+                _context.next = 8;
                 return new Promise(function (resolve) {
                   setTimeout(function () {
                     return resolve(true);
                   }, 500);
                 });
 
-              case 6:
+              case 8:
                 if (this.controller.stopInterval) {
                   this.controller.stopInterval();
                   this.controller.stopInterval = undefined;
@@ -163,7 +186,7 @@ var Player = /*#__PURE__*/function (_Subscribe) {
 
 
                 if (!(preload || preload === undefined && this.configs.autoPreload)) {
-                  _context.next = 20;
+                  _context.next = 22;
                   break;
                 }
 
@@ -188,49 +211,44 @@ var Player = /*#__PURE__*/function (_Subscribe) {
 
                   return accu;
                 }, {});
-                panoIndexs = Object.keys(panoIndexMap);
+                panoIndexes = Object.keys(panoIndexMap);
                 i = 0;
 
-              case 14:
-                if (!(i < panoIndexs.length)) {
-                  _context.next = 20;
+              case 16:
+                if (!(i < panoIndexes.length)) {
+                  _context.next = 22;
                   break;
                 }
 
-                _context.next = 17;
-                return this.$five.preloadPano(Number(panoIndexs[i]));
+                _context.next = 19;
+                return this.$five.preloadPano(Number(panoIndexes[i]));
 
-              case 17:
+              case 19:
                 i++;
-                _context.next = 14;
+                _context.next = 16;
                 break;
 
-              case 20:
+              case 22:
                 // 新数据载入就绪
                 this.emit('loaded', vreoUnit);
-
-                if (!vreoUnit.video.url) {
-                  _context.next = 26;
-                  break;
-                }
+                this.controller.emit('loaded', vreoUnit);
 
                 if ((_this$controller$vide2 = this.controller.videoAgentScene) !== null && _this$controller$vide2 !== void 0 && _this$controller$vide2.videoAgentMesh.videoInstance) {
                   this.controller.videoAgentScene.videoAgentMesh.videoInstance.currentTime = currentTime / 1000;
                 }
 
-                _context.next = 25;
-                return (_this$controller$vide3 = this.controller.videoAgentScene) === null || _this$controller$vide3 === void 0 ? void 0 : _this$controller$vide3.videoAgentMesh.play(vreoUnit.video.url);
+                _context.next = 27;
+                return (_this$controller$vide3 = this.controller.videoAgentScene) === null || _this$controller$vide3 === void 0 ? void 0 : _this$controller$vide3.videoAgentMesh.play(vreoUnit.video.url, currentTime / 1000, vreoUnit.video.duration);
 
-              case 25:
+              case 27:
+                this.controller.setEnded(false);
                 this.play();
-
-              case 26:
                 this.controller.run(function (type, keyframe) {
                   return _this2.emit(type, keyframe);
                 });
                 return _context.abrupt("return", true);
 
-              case 28:
+              case 31:
               case "end":
                 return _context.stop();
             }
@@ -251,8 +269,16 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     }
   }, {
     key: "play",
-    value: function play() {
+    value: function play(currentTime) {
       if (this.controller.playing) return true;
+
+      if (currentTime && this.controller.videoInstance) {
+        this.controller.videoInstance.currentTime = currentTime / 1000;
+      }
+
+      Object.assign(window, {
+        $vreoController: this.controller
+      });
       this.controller.setPlaying(true);
       return true;
     }
@@ -271,14 +297,19 @@ var Player = /*#__PURE__*/function (_Subscribe) {
     value: function hide() {
       this.controller.setVisible(false);
     }
+  }, {
+    key: "getCurrentTime",
+    value: function getCurrentTime() {
+      return this.controller.currentTime;
+    }
   }, {
     key: "dispose",
     value: function dispose() {
       this.pause();
       this.controller.dispose();
 
-      if (this.configs.containter) {
-        ReactDOM.unmountComponentAtNode(this.configs.containter);
+      if (this.configs.container) {
+        ReactDOM.unmountComponentAtNode(this.configs.container);
       }
     }
   }]);

package/lib/Player/modules/Drawer/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/Player/modules/PopUp/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/lib/Player/modules/VideoAgent/VideoAgentMesh.d.ts

@@ -1,6 +1,20 @@
 import * as THREE from 'three';
+import AudioLike from '../../../shared-utils/AduioLike';
 export interface VideoAgentMeshOptions {
+    /**
+     * 自定义视频实例。
+     */
     videoInstance?: HTMLVideoElement;
+    /**
+     * 自定义音频实例。
+     */
+    audioInstance?: HTMLAudioElement;
+    /**
+     * 是否开启音频预载能力。**仅对`.mp3`有效**。
+     *
+     * @description 开启预载能力后会通过 `Fetch/XHR` 方式将音频文件下载转成二进制 [`Blob`](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 提供给多媒体实例。这样的好处是 **能够保障音视频播放过程中不卡顿**。 但在部分 iOS 系统中会存在兼容问题——播 25s 之后会静音（`muted` 为 `false`，但是没有声音）。
+     */
+    preload?: boolean;
 }
 /**
  * 视频经纪人MESH
@@ -11,8 +25,9 @@ export declare class VideoAgentMesh extends THREE.Mesh {
     freeze: boolean;
     paused: boolean;
     audioInstance: HTMLAudioElement;
+    audioLikeInstance: AudioLike;
     $removeEventListener: () => void;
-    get videoInstance(): HTMLAudioElement;
+    get videoInstance(): HTMLAudioElement | AudioLike;
     /**
      *
      * @param width
@@ -23,7 +38,7 @@ export declare class VideoAgentMesh extends THREE.Mesh {
      */
     constructor(width: number, height: number, widthSegments: number, heightSegments: number, options?: VideoAgentMeshOptions);
     private update;
-    play(videoUrl?: string): Promise<unknown>;
+    play(videoUrl?: string, currentTime?: number, duration?: number): Promise<unknown>;
     /**
      * 转成毫秒，保障精准度
      */

package/lib/Player/modules/VideoAgent/VideoAgentMesh.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,6 +13,10 @@ var _Preloader = require("../../../shared-utils/Preloader");
 
 var _mobx = require("mobx");
 
+var _AduioLike = _interopRequireDefault(require("../../../shared-utils/AduioLike"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -25,9 +29,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -66,9 +70,13 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
    * @param options
    */
   function VideoAgentMesh(width, height, widthSegments, heightSegments) {
+    var _this$options$videoIn, _this$options$videoIn2, _this$options$videoIn3;
+
     var _this;
 
-    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
+      preload: true
+    };
 
     _classCallCheck(this, VideoAgentMesh);
 
@@ -106,7 +114,8 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     _this.options = options;
     _this.freeze = false;
     _this.paused = true;
-    {
+
+    if (!options.audioInstance) {
       if (cacheInstance.audioInstance) {
         _this.audioInstance = cacheInstance.audioInstance;
       } else {
@@ -122,7 +131,11 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         _this.audioInstance = audioInstance;
         cacheInstance.audioInstance = audioInstance;
       }
+    } else {
+      _this.audioInstance = options.audioInstance;
     }
+
+    _this.audioLikeInstance = new _AduioLike["default"]();
     (0, _mobx.makeObservable)(_assertThisInitialized(_this), {
       paused: _mobx.observable
     });
@@ -141,14 +154,38 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
       return updatePaused(false);
     };
 
-    _this.videoInstance.addEventListener('pause', onPause);
+    var onEnded = function onEnded() {
+      console.log('vreo: video 播放结束');
+    };
+
+    _this.audioInstance.addEventListener('pause', onPause);
+
+    _this.audioInstance.addEventListener('play', onPlay);
+
+    (_this$options$videoIn = _this.options.videoInstance) === null || _this$options$videoIn === void 0 ? void 0 : _this$options$videoIn.addEventListener('pause', onPause);
+    (_this$options$videoIn2 = _this.options.videoInstance) === null || _this$options$videoIn2 === void 0 ? void 0 : _this$options$videoIn2.addEventListener('play', onPlay);
+
+    _this.audioLikeInstance.addEventListener('pause', onPause);
 
-    _this.videoInstance.addEventListener('play', onPlay);
+    _this.audioLikeInstance.addEventListener('play', onPlay);
+
+    (_this$options$videoIn3 = _this.options.videoInstance) === null || _this$options$videoIn3 === void 0 ? void 0 : _this$options$videoIn3.addEventListener('ended', onEnded);
 
     _this.$removeEventListener = function () {
-      _this.videoInstance.removeEventListener('pause', onPause);
+      var _this$options$videoIn4, _this$options$videoIn5, _this$options$videoIn6;
+
+      _this.audioInstance.removeEventListener('pause', onPause);
+
+      _this.audioInstance.removeEventListener('play', onPlay);
 
-      _this.videoInstance.removeEventListener('play', onPlay);
+      (_this$options$videoIn4 = _this.options.videoInstance) === null || _this$options$videoIn4 === void 0 ? void 0 : _this$options$videoIn4.removeEventListener('pause', onPause);
+      (_this$options$videoIn5 = _this.options.videoInstance) === null || _this$options$videoIn5 === void 0 ? void 0 : _this$options$videoIn5.removeEventListener('play', onPlay);
+
+      _this.audioLikeInstance.removeEventListener('pause', onPause);
+
+      _this.audioLikeInstance.removeEventListener('play', onPlay);
+
+      (_this$options$videoIn6 = _this.options.videoInstance) === null || _this$options$videoIn6 === void 0 ? void 0 : _this$options$videoIn6.removeEventListener('ended', onEnded);
     };
 
     return _this;
@@ -159,6 +196,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
     get: function get() {
       var _this$videoUrl;
 
+      if (!this.videoUrl) {
+        return this.audioLikeInstance;
+      }
+
       if ((_this$videoUrl = this.videoUrl) !== null && _this$videoUrl !== void 0 && _this$videoUrl.endsWith('mp3')) {
         return this.audioInstance;
       }
@@ -194,17 +235,31 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
               case 6:
                 uniforms = this.material.uniforms;
                 this.videoInstance.muted = true;
-                _context.t0 = URL;
-                _context.next = 11;
+
+                if (!(this.options.preload || this.options.preload === undefined || this.videoUrl.endsWith('.mp4'))) {
+                  _context.next = 18;
+                  break;
+                }
+
+                _context.t1 = URL;
+                _context.next = 12;
                 return _Preloader.Preloader.blob(this.videoUrl);
 
-              case 11:
-                _context.t1 = _context.sent;
-                _context.next = 14;
-                return _context.t0.createObjectURL.call(_context.t0, _context.t1);
+              case 12:
+                _context.t2 = _context.sent;
+                _context.next = 15;
+                return _context.t1.createObjectURL.call(_context.t1, _context.t2);
 
-              case 14:
-                this.videoInstance.src = _context.sent;
+              case 15:
+                _context.t0 = _context.sent;
+                _context.next = 19;
+                break;
+
+              case 18:
+                _context.t0 = this.videoUrl;
+
+              case 19:
+                this.videoInstance.src = _context.t0;
                 this.videoInstance.setAttribute('data-src', this.videoUrl);
 
                 onStart = function onStart() {
@@ -220,7 +275,7 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
 
                 this.videoInstance.addEventListener('timeupdate', onStart, false);
 
-              case 18:
+              case 23:
               case "end":
                 return _context.stop();
             }
@@ -241,64 +296,85 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
         var _this3 = this;
 
         var videoUrl,
+            currentTime,
+            duration,
             _args3 = arguments;
         return regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
               case 0:
                 videoUrl = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : '';
+                currentTime = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : 0;
+                duration = _args3.length > 2 ? _args3[2] : undefined;
                 videoUrl = videoUrl || '';
 
-                if (videoUrl) {
+                if (!(duration && !videoUrl)) {
                   _context3.next = 10;
                   break;
                 }
 
+                if (this.currentTime) {
+                  this.videoInstance.currentTime = currentTime;
+                }
+
+                this.videoInstance.duration = duration;
+                this.videoUrl = '';
+                this.videoInstance.play();
+                return _context3.abrupt("return", true);
+
+              case 10:
+                if (videoUrl) {
+                  _context3.next = 18;
+                  break;
+                }
+
                 if (!this.videoUrl) {
-                  _context3.next = 8;
+                  _context3.next = 16;
                   break;
                 }
 
-                _context3.next = 6;
+                _context3.next = 14;
                 return this.videoInstance.play();
 
-              case 6:
-                _context3.next = 9;
+              case 14:
+                _context3.next = 17;
                 break;
 
-              case 8:
+              case 16:
                 console.warn('警告：视频资源未初始化。');
 
-              case 9:
+              case 17:
                 return _context3.abrupt("return", true);
 
-              case 10:
+              case 18:
+                console.log('play', videoUrl, this.videoUrl);
+
                 if (!(videoUrl === this.videoUrl)) {
-                  _context3.next = 15;
+                  _context3.next = 24;
                   break;
                 }
 
-                this.videoInstance.currentTime = 0;
-                _context3.next = 14;
+                this.videoInstance.currentTime = currentTime;
+                _context3.next = 23;
                 return this.videoInstance.play();
 
-              case 14:
+              case 23:
                 return _context3.abrupt("return", true);
 
-              case 15:
-                _context3.next = 17;
+              case 24:
+                _context3.next = 26;
                 return this.update(videoUrl);
 
-              case 17:
+              case 26:
                 this.videoInstance.pause();
-                _context3.next = 20;
+                _context3.next = 29;
                 return new Promise(function (resolve) {
                   return setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
                     return regeneratorRuntime.wrap(function _callee2$(_context2) {
                       while (1) {
                         switch (_context2.prev = _context2.next) {
                           case 0:
-                            _this3.videoInstance.currentTime = 0;
+                            _this3.videoInstance.currentTime = currentTime;
                             _context2.next = 3;
                             return _this3.videoInstance.play();
 
@@ -314,10 +390,10 @@ var VideoAgentMesh = /*#__PURE__*/function (_THREE$Mesh) {
                   })), 20);
                 });
 
-              case 20:
+              case 29:
                 return _context3.abrupt("return", _context3.sent);
 
-              case 21:
+              case 30:
               case "end":
                 return _context3.stop();
             }

package/lib/Player/modules/VideoAgent/VideoAgentScene.d.ts

@@ -6,7 +6,11 @@ export declare class VideoAgentScene {
     camera: THREE.OrthographicCamera;
     renderer: THREE.WebGLRenderer;
     container: HTMLElement;
-    constructor(container: HTMLElement, needRender?: boolean);
+    constructor(container: HTMLElement, needRender?: boolean, options?: {
+        videoInstance?: HTMLVideoElement;
+        audioInstance?: HTMLAudioElement;
+        preload?: boolean;
+    });
     run: () => void;
     dispose: () => void;
 }

package/lib/Player/modules/VideoAgent/VideoAgentScene.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -15,14 +15,19 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var VideoAgentScene = function VideoAgentScene(container) {
+var VideoAgentScene = /*#__PURE__*/_createClass(function VideoAgentScene(container) {
   var _this = this;
 
   var needRender = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
   _classCallCheck(this, VideoAgentScene);
 
@@ -74,13 +79,13 @@ var VideoAgentScene = function VideoAgentScene(container) {
 
   _domElement.setAttribute('style', "width: ".concat(state.width, "px;height: ").concat(state.height, "px;"));
 
-  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1);
+  this.videoAgentMesh = new _VideoAgentMesh.VideoAgentMesh(480, 270, 1, 1, options);
 
   if (needRender) {
     container.append(_domElement);
     this.scene.add(this.videoAgentMesh);
     this.run();
   }
-};
+});
 
 exports.VideoAgentScene = VideoAgentScene;

package/lib/Player/modules/VideoAgent/index.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { VideoAgentMeshOptions } from './VideoAgentMesh';
 export declare function VideoAgent(props: {
     onClick?: () => void;
+    options?: VideoAgentMeshOptions;
 }): JSX.Element;