diff --git a/web/demo/src/components/HelloWorld.vue b/web/demo/src/components/HelloWorld.vue
index 661880c6..abf1ae20 100644
--- a/web/demo/src/components/HelloWorld.vue
+++ b/web/demo/src/components/HelloWorld.vue
@@ -34,7 +34,7 @@ export default {
         // 素材配置json对象
         config: config,
         width: 900,
-        height: 600,
+        height: 400,
         // 同素材生成工具中配置的保持一致
         fps: 20,
         // 是否循环
diff --git a/web/dist/type.d.ts b/web/dist/type.d.ts
index 1d6188f5..d0c88ed5 100644
--- a/web/dist/type.d.ts
+++ b/web/dist/type.d.ts
@@ -5,6 +5,8 @@ export interface VapConfig {
         [key: string]: any;
     };
     fps?: number;
+    width?: number;
+    height?: number;
     loop: boolean;
     mute?: boolean;
     precache?: boolean;
diff --git a/web/dist/vap.js b/web/dist/vap.js
index a3bd0231..cb326ef0 100644
--- a/web/dist/vap.js
+++ b/web/dist/vap.js
@@ -244,6 +244,37 @@
 
   var possibleConstructorReturn = _possibleConstructorReturn;
 
+  var getPrototypeOf$1 = createCommonjsModule(function (module) {
+  function _getPrototypeOf(o) {
+    module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  module.exports = _getPrototypeOf;
+  });
+
+  var _typeof_1$1 = createCommonjsModule(function (module) {
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      module.exports = _typeof = function _typeof(obj) {
+        return typeof obj;
+      };
+    } else {
+      module.exports = _typeof = function _typeof(obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
+  }
+
+  module.exports = _typeof;
+  });
+
   var runtime_1 = createCommonjsModule(function (module) {
   /**
    * Copyright (c) 2014-present, Facebook, Inc.
@@ -994,7 +1025,7 @@
   }
   });
 
-  var regenerator = runtime_1;
+  var D__project_vapSource_web_node_modules__babel_runtime_regenerator = runtime_1;
 
   /*! *****************************************************************************
   Copyright (c) Microsoft Corporation.
@@ -1050,8 +1081,8 @@
     createClass(FrameParser, [{
       key: "init",
       value: function init() {
-        return __awaiter(this, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
-          return regenerator.wrap(function _callee$(_context) {
+        return __awaiter(this, void 0, void 0, /*#__PURE__*/D__project_vapSource_web_node_modules__babel_runtime_regenerator.mark(function _callee() {
+          return D__project_vapSource_web_node_modules__babel_runtime_regenerator.wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
                 case 0:
@@ -1121,10 +1152,10 @@
 
         var src = this.srcData = {};
         return Promise.all((dataJson.src || []).map(function (item) {
-          return __awaiter(_this, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee2() {
+          return __awaiter(_this, void 0, void 0, /*#__PURE__*/D__project_vapSource_web_node_modules__babel_runtime_regenerator.mark(function _callee2() {
             var _this2 = this;
 
-            return regenerator.wrap(function _callee2$(_context2) {
+            return D__project_vapSource_web_node_modules__babel_runtime_regenerator.wrap(function _callee2$(_context2) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
@@ -1261,7 +1292,7 @@
         } else if (typeof fontStyle == 'string') {
           ctx.font = fontStyle;
           ctx.fillStyle = color;
-        } else if (_typeof_1(fontStyle) == 'object') {
+        } else if (_typeof_1$1(fontStyle) == 'object') {
           ctx.font = fontStyle['font'] || getFontStyle();
           ctx.fillStyle = fontStyle['color'] || color;
         } else if (typeof fontStyle == 'function') {
@@ -1722,7 +1753,7 @@
     return VapVideo;
   }();
 
-  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
+  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf$1(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf$1(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
 
   function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
   var PER_SIZE = 9;
@@ -1781,14 +1812,14 @@
 
             _this2.options.fps = _this2.vapFrameParser.config.info.fps || 30;
 
-            get(getPrototypeOf(WebglRenderVap.prototype), "play", _this2).call(_this2);
+            get(getPrototypeOf$1(WebglRenderVap.prototype), "play", _this2).call(_this2);
           })["catch"](function (e) {
             _this2.vapFrameParser = null;
             console.error('[Alpha video] parse vap frame error.', e);
             return _this2;
           });
         } else {
-          get(getPrototypeOf(WebglRenderVap.prototype), "play", this).call(this);
+          get(getPrototypeOf$1(WebglRenderVap.prototype), "play", this).call(this);
         }
 
         return this;
@@ -1801,6 +1832,9 @@
             vertexShader = this.vertexShader,
             fragmentShader = this.fragmentShader,
             program = this.program;
+        var _this$options = this.options,
+            width = _this$options.width,
+            height = _this$options.height;
 
         if (!canvas) {
           canvas = document.createElement('canvas');
@@ -1810,8 +1844,8 @@
         var _vapFrameParser$confi = vapFrameParser.config.info,
             w = _vapFrameParser$confi.w,
             h = _vapFrameParser$confi.h;
-        canvas.width = w;
-        canvas.height = h;
+        canvas.width = width || w;
+        canvas.height = height || h;
         this.container.appendChild(canvas);
 
         if (!gl) {
@@ -1821,7 +1855,7 @@
           gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
         }
 
-        gl.viewport(0, 0, w, h);
+        gl.viewport(0, 0, canvas.width, canvas.height);
 
         if (!vertexShader) {
           vertexShader = this.initVertexShader(gl);
@@ -1982,7 +2016,7 @@
             options = this.options;
 
         if (!gl) {
-          get(getPrototypeOf(WebglRenderVap.prototype), "drawFrame", this).call(this, _, info);
+          get(getPrototypeOf$1(WebglRenderVap.prototype), "drawFrame", this).call(this, _, info);
 
           return;
         }
@@ -2038,13 +2072,13 @@
 
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
-        get(getPrototypeOf(WebglRenderVap.prototype), "drawFrame", this).call(this, _, info);
+        get(getPrototypeOf$1(WebglRenderVap.prototype), "drawFrame", this).call(this, _, info);
       } // 清理数据,为下一次播放做准备
 
     }, {
       key: "clear",
       value: function clear() {
-        get(getPrototypeOf(WebglRenderVap.prototype), "clear", this).call(this);
+        get(getPrototypeOf$1(WebglRenderVap.prototype), "clear", this).call(this);
 
         var gl = this.gl; // 清除界面，解决连续播放时，第一帧是上一个mp4最后一帧的问题
 
@@ -2054,7 +2088,7 @@
     }, {
       key: "destroy",
       value: function destroy() {
-        get(getPrototypeOf(WebglRenderVap.prototype), "destroy", this).call(this);
+        get(getPrototypeOf$1(WebglRenderVap.prototype), "destroy", this).call(this);
 
         var canvas = this.canvas,
             gl = this.gl,
diff --git a/web/dist/vap.min.js b/web/dist/vap.min.js
index de38775a..07f168a4 100644
--- a/web/dist/vap.min.js
+++ b/web/dist/vap.min.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Vap={})}(this,function(t){"use strict";var n=function(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n};var e=function(t){if(Array.isArray(t))return n(t)};var r=function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)};var o=function(t,e){if(t){if("string"==typeof t)return n(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(t,e):void 0}};var i=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")};var u=function(t){return e(t)||r(t)||o(t)||i()};var a=function(t){if(Array.isArray(t))return t};var c=function(t,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t)){var r=[],n=!0,o=!1,i=void 0;try{for(var a,c=t[Symbol.iterator]();!(n=(a=c.next()).done)&&(r.push(a.value),!e||r.length!==e);n=!0);}catch(t){o=!0,i=t}finally{try{n||null==c.return||c.return()}finally{if(o)throw i}}return r}};var s=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")};var d=function(t,e){return a(t)||c(t,e)||o(t,e)||s()};var l=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function h(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}var f=function(t,e,r){return e&&h(t.prototype,e),r&&h(t,r),t};function v(t,e){return t(e={exports:{}},e.exports),e.exports}var m=v(function(e){function r(t){return e.exports=r=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},r(t)}e.exports=r});var p=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=m(t)););return t},y=v(function(n){function o(t,e,r){return"undefined"!=typeof Reflect&&Reflect.get?n.exports=o=Reflect.get:n.exports=o=function(t,e,r){t=p(t,e);if(t){e=Object.getOwnPropertyDescriptor(t,e);return e.get?e.get.call(r):e.value}},o(t,e,r||t)}n.exports=o}),g=v(function(r){function n(t,e){return r.exports=n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},n(t,e)}r.exports=n});var x=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&g(t,e)},b=v(function(e){function r(t){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?e.exports=r=function(t){return typeof t}:e.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}e.exports=r});var _=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var w=function(t,e){return!e||"object"!==b(e)&&"function"!=typeof e?_(t):e},E=v(function(t){var e=function(a){var s,t=Object.prototype,u=t.hasOwnProperty,e="function"==typeof Symbol?Symbol:{},n=e.iterator||"@@iterator",r=e.asyncIterator||"@@asyncIterator",o=e.toStringTag||"@@toStringTag";function i(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{i({},"")}catch(t){i=function(t,e,r){return t[e]=r}}function c(t,e,r,n){var o,i,a,c,e=e&&e.prototype instanceof m?e:m,e=Object.create(e.prototype),n=new A(n||[]);return e._invoke=(o=t,i=r,a=n,c=h,function(t,e){if(c===v)throw new Error("Generator is already running");if(c===p){if("throw"===t)throw e;return k()}for(a.method=t,a.arg=e;;){var r=a.delegate;if(r){var n=function t(e,r){var n=e.iterator[r.method];if(n===s){if(r.delegate=null,"throw"===r.method){if(e.iterator.return&&(r.method="return",r.arg=s,t(e,r),"throw"===r.method))return d;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return d}n=l(n,e.iterator,r.arg);if("throw"===n.type)return r.method="throw",r.arg=n.arg,r.delegate=null,d;var n=n.arg;if(!n)return r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,d;{if(!n.done)return n;r[e.resultName]=n.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=s)}r.delegate=null;return d}(r,a);if(n){if(n===d)continue;return n}}if("next"===a.method)a.sent=a._sent=a.arg;else if("throw"===a.method){if(c===h)throw c=p,a.arg;a.dispatchException(a.arg)}else"return"===a.method&&a.abrupt("return",a.arg);c=v;n=l(o,i,a);if("normal"===n.type){if(c=a.done?p:f,n.arg!==d)return{value:n.arg,done:a.done}}else"throw"===n.type&&(c=p,a.method="throw",a.arg=n.arg)}}),e}function l(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}a.wrap=c;var h="suspendedStart",f="suspendedYield",v="executing",p="completed",d={};function m(){}function y(){}function g(){}var x={};x[n]=function(){return this};e=Object.getPrototypeOf,e=e&&e(e(S([])));e&&e!==t&&u.call(e,n)&&(x=e);var b=g.prototype=m.prototype=Object.create(x);function _(t){["next","throw","return"].forEach(function(e){i(t,e,function(t){return this._invoke(e,t)})})}function w(a,c){var e;this._invoke=function(r,n){function t(){return new c(function(t,e){!function e(t,r,n,o){t=l(a[t],a,r);if("throw"!==t.type){var i=t.arg,r=i.value;return r&&"object"==typeof r&&u.call(r,"__await")?c.resolve(r.__await).then(function(t){e("next",t,n,o)},function(t){e("throw",t,n,o)}):c.resolve(r).then(function(t){i.value=t,n(i)},function(t){return e("throw",t,n,o)})}o(t.arg)}(r,n,t,e)})}return e=e?e.then(t,t):t()}}function E(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function A(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(E,this),this.reset(!0)}function S(e){if(e){var t=e[n];if(t)return t.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var r=-1,t=function t(){for(;++r<e.length;)if(u.call(e,r))return t.value=e[r],t.done=!1,t;return t.value=s,t.done=!0,t};return t.next=t}}return{next:k}}function k(){return{value:s,done:!0}}return((y.prototype=b.constructor=g).constructor=y).displayName=i(g,o,"GeneratorFunction"),a.isGeneratorFunction=function(t){t="function"==typeof t&&t.constructor;return!!t&&(t===y||"GeneratorFunction"===(t.displayName||t.name))},a.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,g):(t.__proto__=g,i(t,o,"GeneratorFunction")),t.prototype=Object.create(b),t},a.awrap=function(t){return{__await:t}},_(w.prototype),w.prototype[r]=function(){return this},a.AsyncIterator=w,a.async=function(t,e,r,n,o){void 0===o&&(o=Promise);var i=new w(c(t,e,r,n),o);return a.isGeneratorFunction(e)?i:i.next().then(function(t){return t.done?t.value:i.next()})},_(b),i(b,o,"Generator"),b[n]=function(){return this},b.toString=function(){return"[object Generator]"},a.keys=function(r){var t,n=[];for(t in r)n.push(t);return n.reverse(),function t(){for(;n.length;){var e=n.pop();if(e in r)return t.value=e,t.done=!1,t}return t.done=!0,t}},a.values=S,A.prototype={constructor:A,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=s,this.done=!1,this.delegate=null,this.method="next",this.arg=s,this.tryEntries.forEach(T),!t)for(var e in this)"t"===e.charAt(0)&&u.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=s)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(r){if(this.done)throw r;var n=this;function t(t,e){return i.type="throw",i.arg=r,n.next=t,e&&(n.method="next",n.arg=s),!!e}for(var e=this.tryEntries.length-1;0<=e;--e){var o=this.tryEntries[e],i=o.completion;if("root"===o.tryLoc)return t("end");if(o.tryLoc<=this.prev){var a=u.call(o,"catchLoc"),c=u.call(o,"finallyLoc");if(a&&c){if(this.prev<o.catchLoc)return t(o.catchLoc,!0);if(this.prev<o.finallyLoc)return t(o.finallyLoc)}else if(a){if(this.prev<o.catchLoc)return t(o.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return t(o.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;0<=r;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&u.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=t,i.arg=e,o?(this.method="next",this.next=o.finallyLoc,d):this.complete(i)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),d},finish:function(t){for(var e=this.tryEntries.length-1;0<=e;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),T(r),d}},catch:function(t){for(var e=this.tryEntries.length-1;0<=e;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n,o=r.completion;return"throw"===o.type&&(n=o.arg,T(r)),n}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:S(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=s),d}},a}(t.exports);try{regeneratorRuntime=e}catch(t){Function("r","regeneratorRuntime = r")(e)}});function T(t,a,c,s){return new(c=c||Promise)(function(r,e){function n(t){try{i(s.next(t))}catch(t){e(t)}}function o(t){try{i(s.throw(t))}catch(t){e(t)}}function i(t){var e;t.done?r(t.value):((e=t.value)instanceof c?e:new c(function(t){t(e)})).then(n,o)}i((s=s.apply(t,a||[])).next())})}var A=function(){function r(t,e){l(this,r),this.config=t||{},this.headData=e,this.frame=[],this.textureMap={}}return f(r,[{key:"init",value:function(){return T(this,void 0,void 0,E.mark(function t(){return E.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(/\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]\.json/.test(this.config))return t.next=3,this.getConfigBySrc(this.config);t.next=4;break;case 3:this.config=t.sent;case 4:return t.next=6,this.parseSrc(this.config);case 6:return this.frame=this.config.frame||[],t.abrupt("return",this);case 8:case"end":return t.stop()}},t,this)}))}},{key:"initCanvas",value:function(){var t,e;this.canvas||(e=(t=document.createElement("canvas")).getContext("2d"),t.style.display="none",document.body.appendChild(t),this.ctx=e,this.canvas=t)}},{key:"loadImg",value:function(n){return new Promise(function(t,e){var r=new Image;r.crossOrigin="anonymous",r.onload=function(){t(this)},r.onerror=function(t){e(new Error("frame 资源加载失败:"+n))},r.src=n})}},{key:"parseSrc",value:function(t){var r=this,n=this.srcData={};return Promise.all((t.src||[]).map(function(e){return T(r,void 0,void 0,E.mark(function t(){var r=this;return E.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(e.img=null,this.headData[e.srcTag.slice(1,e.srcTag.length-1)]||this.headData[e.srcTag]){t.next=5;break}t.next=23;break;case 5:if("txt"!==e.srcType){t.next=12;break}this.headData.fontStyle&&!e.fontStyle&&(e.fontStyle=this.headData.fontStyle),e.textStr=this.headData[e.srcTag]||e.srcTag.replace(/\[(.*)\]/,function(t,e){return r.headData[e]}),this.initCanvas(),e.img=this.makeTextImg(e),t.next=22;break;case 12:if("img"===e.srcType)return e.imgUrl=this.headData[e.srcTag]||e.srcTag.replace(/\[(.*)\]/,function(t,e){return r.headData[e]}),t.prev=14,t.next=17,this.loadImg(e.imgUrl);t.next=22;break;case 17:e.img=t.sent,t.next=22;break;case 20:t.prev=20,t.t0=t.catch(14);case 22:e.img&&(n[e.srcId]=e);case 23:case"end":return t.stop()}},t,this,[[14,20]])}))})).then(function(){r.canvas&&r.canvas.parentNode.removeChild(r.canvas)})}},{key:"getConfigBySrc",value:function(t){return new Promise(function(e,r){var n=new XMLHttpRequest;n.open("GET",t,!0),n.responseType="json",n.onload=function(){var t;200===n.status||304===n.status&&n.response?(t=n.response,e(t)):r(new Error("http response invalid"+n.status))},n.send()})}},{key:"makeTextImg",value:function(t){var e=t.textStr,r=t.w,n=t.h,o=t.color,i=t.style,a=t.fontStyle,c=this.ctx;c.canvas.width=r,c.canvas.height=n,c.textBaseline="middle",c.textAlign="center";function s(){var t=Math.min(r/e.length,n-8),t=["".concat(t,"px"),"Arial"];return"b"===i&&t.unshift("bold"),t.join(" ")}return a?"string"==typeof a?(c.font=a,c.fillStyle=o):"object"==b(a)?(c.font=a.font||s(),c.fillStyle=a.color||o):"function"==typeof a&&(c.font=s(),c.fillStyle=o,a.call(null,c,t)):(c.font=s(),c.fillStyle=o),c.clearRect(0,0,c.canvas.width,c.canvas.height),c.fillText(e,r/2,n/2),c.getImageData(0,0,r,n)}},{key:"getFrame",value:function(e){return this.frame.find(function(t){return t.i===e})}}]),r}();function S(t,e,r){e=t.createShader(e);return t.shaderSource(e,r),t.compileShader(e),e}function k(t,e,r){var n=t.createTexture(),e=t.TEXTURE0+e;return t.activeTexture(e),t.bindTexture(t.TEXTURE_2D,n),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),r&&t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,r),n}function R(e,t){var r=t.shaders,n=void 0===r?[]:r,r=t.program,o=void 0===r?null:r,r=t.textures,i=void 0===r?[]:r,t=t.buffers,a=void 0===t?[]:t;try{i.forEach(function(t){e.deleteTexture(t)}),a.forEach(function(t){e.deleteBuffer(t)}),o&&(n.forEach(function(t){e.detachShader(o,t),e.deleteShader(t)}),e.deleteProgram(o))}catch(t){}}var F=function(){function t(){l(this,t),this.events={},this.firstPlaying=!0,this.customEvent=["frame","percentage",""]}return f(t,[{key:"setOptions",value:function(t){return t.container&&t.src,this.options=Object.assign({src:"",loop:!1,fps:20,container:null,precache:!1,mute:!1,config:"",accurate:!1,offset:0},t),this.setBegin=!0,this.useFrameCallback=!1,this.container=this.options.container,this.options.src&&this.options.config&&this.options.container,this}},{key:"precacheSource",value:function(t){var a=window.webkitURL||window.URL;return new Promise(function(i,e){var r=new XMLHttpRequest;r.open("GET",t,!0),r.responseType="blob",r.onload=function(){var t,o;200===r.status||304===r.status?(t=r.response,/iphone|ipad|ipod/i.test(navigator.userAgent)?((o=new FileReader).onloadend=function(){for(var t=o.result,e=atob(t.slice(t.indexOf(",")+1)),r=Array(e.length),n=0;n<e.length;n++)r[n]=e.charCodeAt(n);t=new Uint8Array(r),t=new Blob([t],{type:"video/mp4"});i(a.createObjectURL(t))},o.readAsDataURL(r.response)):i(a.createObjectURL(t))):e(new Error("http response invalid"+r.status))},r.send()})}},{key:"initVideo",value:function(){var e=this,t=this.options,r=this.video;(r=r||(this.video=document.createElement("video"))).crossOrigin="anonymous",r.autoplay=!1,r.preload="auto",r.setAttribute("playsinline",""),r.setAttribute("webkit-playsinline",""),t.mute&&(r.muted=!0,r.volume=0),r.style.display="none",r.loop=!!t.loop,t.precache?this.precacheSource(t.src).then(function(t){r.src=t,document.body.appendChild(r)}).catch(function(t){}):(r.src=t.src,document.body.appendChild(this.video),r.load()),this.firstPlaying=!0,"requestVideoFrameCallback"in this.video&&(this.useFrameCallback=!!this.options.accurate),this.cancelRequestAnimation(),this.offAll(),["playing","error","canplay"].forEach(function(t){e.on(t,e["on"+t].bind(e))})}},{key:"drawFrame",value:function(){this._drawFrame=this._drawFrame||this.drawFrame.bind(this),this.useFrameCallback?this.animId=this.video.requestVideoFrameCallback(this._drawFrame):this.animId=this.requestAnim(this._drawFrame)}},{key:"play",value:function(){var e=this;this.useFrameCallback?this.animId=this.video.requestVideoFrameCallback(this.drawFrame.bind(this)):this.requestAnim=this.requestAnimFunc();var t=this.video&&this.video.play();t&&t.then&&t.catch(function(t){e.video&&(e.video.muted=!0,e.video.volume=0,e.video.play().catch(function(t){e.trigger("error",t)}))})}},{key:"pause",value:function(){this.video&&this.video.pause()}},{key:"setTime",value:function(t){this.video&&(this.video.currentTime=t)}},{key:"requestAnimFunc",value:function(){var e=this,t=this.options.fps,r=void 0===t?30:t;if(window.requestAnimationFrame){var n=-1;return function(t){return n++,requestAnimationFrame(function(){return n%(60/r)?void(e.animId=e.requestAnim(t)):t()})}}return function(t){return window.setTimeout(t,1e3/r)}}},{key:"cancelRequestAnimation",value:function(){if(this.animId){if(this.useFrameCallback)try{this.video.cancelVideoFrameCallback(this.animId)}catch(t){}else(window.cancelAnimationFrame?cancelAnimationFrame:clearTimeout)(this.animId);this.animId=0}}},{key:"clear",value:function(){this.cancelRequestAnimation()}},{key:"destroy",value:function(){this.cancelRequestAnimation(),this.video&&(this.offAll(),this.video.parentNode&&this.video.parentNode.removeChild(this.video),this.video=null),this.options.onDestroy&&this.options.onDestroy()}},{key:"on",value:function(t,e){var r=this.events[t]||[];return r.push(e),this.events[t]=r,-1===this.customEvent.indexOf(t)&&this.video.addEventListener(t,e),this}},{key:"once",value:function(e,r){function n(){var t=o.events[e];t.splice(t.indexOf(n),1),o.video.removeEventListener(e,n),r.apply(void 0,arguments)}var o=this;return this.on(e,n)}},{key:"trigger",value:function(t){for(var e=arguments.length,r=new Array(1<e?e-1:0),n=1;n<e;n++)r[n-1]=arguments[n];try{(this.events[t]||[]).forEach(function(t){t.apply(void 0,r)})}catch(r){}}},{key:"offAll",value:function(){var r=this;return Object.keys(this.events).forEach(function(e){var t=r.events[e];t&&t.length&&t.forEach(function(t){r.video.removeEventListener(e,t)})}),this.events={},this}},{key:"onplaying",value:function(){this.firstPlaying&&(this.firstPlaying=!1,this.useFrameCallback||this.drawFrame(null,null))}},{key:"oncanplay",value:function(){var t=this.options.beginPoint;t&&this.setBegin&&(this.setBegin=!1,this.video.currentTime=t)}},{key:"onerror",value:function(t){this.destroy(),this.options.onLoadError&&this.options.onLoadError(t)}}]),t}();function L(r){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}();return function(){var t,e=m(r);return e=n?(t=m(this).constructor,Reflect.construct(e,arguments,t)):e.apply(this,arguments),w(this,e)}}function C(t,e,r,n,o,i){return[t/o,(t+r)/o,(i-e-n)/i,(i-e)/i]}var P,O=function(){x(s,F);var r=L(s);function s(t){var e;return l(this,s),(e=r.call(this)).textures=[],t&&e.play(t),e}return f(s,[{key:"play",value:function(t){var e,r=this;return t&&this.setOptions(t),null!==(e=this.options)&&void 0!==e&&e.config&&(t?(this.initVideo(),this.vapFrameParser=new A(this.options.config,this.options),this.vapFrameParser.init().then(function(){r.initWebGL(),r.initTexture(),r.initVideoTexture(),r.options.fps=r.vapFrameParser.config.info.fps||30,y(m(s.prototype),"play",r).call(r)}).catch(function(t){return r.vapFrameParser=null,r})):y(m(s.prototype),"play",this).call(this)),this}},{key:"initWebGL",value:function(){var t=this.canvas,e=this.gl,r=this.vertexShader,n=this.fragmentShader,o=this.program,t=t||document.createElement("canvas"),i=this.vapFrameParser,a=i.config.info,c=a.w,s=a.h;t.width=c,t.height=s,this.container.appendChild(t),e||((e=t.getContext("webgl")||t.getContext("experimental-webgl")).disable(e.BLEND),e.blendFuncSeparate(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA,e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,!0)),e.viewport(0,0,c,s),r=r||this.initVertexShader(e),n&&o&&R(e,{program:o,shaders:[n]});a=i.srcData,n=this.initFragmentShader(e,Object.keys(a).length);return c=r,s=n,a=(i=e).createProgram(),i.attachShader(a,c),i.attachShader(a,s),i.linkProgram(a),i.useProgram(a),o=a,this.canvas=t,this.gl=e,this.vertexShader=r,this.fragmentShader=n,this.program=o,this.imagePosLoc=null,e}},{key:"initVertexShader",value:function(t){return S(t,t.VERTEX_SHADER,"attribute vec2 a_position; // 接受顶点坐标\n             attribute vec2 a_texCoord; // 接受纹理坐标\n             attribute vec2 a_alpha_texCoord; // 接受纹理坐标\n             varying vec2 v_alpha_texCoord; // 接受纹理坐标\n             varying   vec2 v_texcoord; // 传递纹理坐标给片元着色器\n             void main(void){\n                gl_Position = vec4(a_position, 0.0, 1.0); // 设置坐标\n                v_texcoord = a_texCoord; // 设置纹理坐标\n                v_alpha_texCoord = a_alpha_texCoord; // 设置纹理坐标\n             }")}},{key:"initFragmentShader",value:function(t,e){var r="",n="";if(0<e){for(var o=9*e,i=[],a=[],c=0;c<e;c++)i.push("if(ndx == ".concat(c+1,"){\n                color = texture2D(u_image").concat(c+1,",uv);\n            }")),a.push("uniform sampler2D u_image".concat(c+1,";"));n="\n            ".concat(a.join("\n"),"\n            uniform float image_pos[").concat(o,"];\n            vec4 getSampleFromArray(int ndx, vec2 uv) {\n                vec4 color;\n                ").concat(i.join(" else "),"\n                return color;\n            }\n            "),r="\n            vec4 srcColor,maskColor;\n            vec2 srcTexcoord,maskTexcoord;\n            int srcIndex;\n            float x1,x2,y1,y2,mx1,mx2,my1,my2; //显示的区域\n\n            for(int i=0;i<".concat(o,";i+= ").concat(9,"){\n                if ((int(image_pos[i]) > 0)) {\n                  srcIndex = int(image_pos[i]);\n    \n                    x1 = image_pos[i+1];\n                    x2 = image_pos[i+2];\n                    y1 = image_pos[i+3];\n                    y2 = image_pos[i+4];\n                    \n                    mx1 = image_pos[i+5];\n                    mx2 = image_pos[i+6];\n                    my1 = image_pos[i+7];\n                    my2 = image_pos[i+8];\n    \n    \n                    if (v_texcoord.s>x1 && v_texcoord.s<x2 && v_texcoord.t>y1 && v_texcoord.t<y2) {\n                        srcTexcoord = vec2((v_texcoord.s-x1)/(x2-x1),(v_texcoord.t-y1)/(y2-y1));\n                         maskTexcoord = vec2(mx1+srcTexcoord.s*(mx2-mx1),my1+srcTexcoord.t*(my2-my1));\n                         srcColor = getSampleFromArray(srcIndex,srcTexcoord);\n                         maskColor = texture2D(u_image_video, maskTexcoord);\n                         srcColor.a = srcColor.a*(maskColor.r);\n                      \n                         bgColor = vec4(srcColor.rgb*srcColor.a,srcColor.a) + (1.0-srcColor.a)*bgColor;\n                      \n                    }   \n                }\n            }\n            ")}r="\n        precision lowp float;\n        varying vec2 v_texcoord;\n        varying vec2 v_alpha_texCoord;\n        uniform sampler2D u_image_video;\n        ".concat(n,"\n        \n        void main(void) {\n            vec4 bgColor = ").concat("vec4(texture2D(u_image_video, v_texcoord).rgb, texture2D(u_image_video,v_alpha_texCoord).r);","\n            ").concat(r,"\n            gl_FragColor = bgColor;\n        }\n        ");return S(t,t.FRAGMENT_SHADER,r)}},{key:"initTexture",value:function(){var t=this.gl,e=this.vapFrameParser,r=this.textures;if(e&&e.srcData){var n,o=e.srcData,i=1;for(n in o){var a=o[n];r[i-1]?(t.activeTexture(t.TEXTURE0+i),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,a.img)):this.textures.push(k(t,i,a.img));var c=t.getUniformLocation(this.program,"u_image".concat(i));t.uniform1i(c,i),this.vapFrameParser.textureMap[a.srcId]=i++}}}},{key:"initVideoTexture",value:function(){var t,e,r,n,o,i,a,c,s,u=this.gl,l=this.vapFrameParser,h=this.program;l&&l.config&&l.config.info&&(this.videoTexture||(this.videoTexture=k(u,0)),a=u.getUniformLocation(h,"u_image_video"),u.uniform1i(a,0),u.activeTexture(u.TEXTURE0),t=(i=l.config.info).videoW,c=i.videoH,e=(o=d(i.rgbFrame,4))[0],r=o[1],n=o[2],s=o[3],l=(a=d(i.aFrame,4))[0],o=a[1],i=a[2],a=a[3],s=C(e,r,n,s,t,c),c=C(l,o,i,a,t,c),s=new Float32Array([-1,1,s[0],s[3],c[0],c[3]].concat([1,1,s[1],s[3],c[1],c[3]],[-1,-1,s[0],s[2],c[0],c[2]],[1,-1,s[1],s[2],c[1],c[2]])),this.vertexBuffer||(this.vertexBuffer=u.createBuffer(),u.bindBuffer(u.ARRAY_BUFFER,this.vertexBuffer)),u.bufferData(u.ARRAY_BUFFER,s,u.STATIC_DRAW),c=s.BYTES_PER_ELEMENT,s=u.getAttribLocation(h,"a_position"),u.enableVertexAttribArray(s),u.vertexAttribPointer(s,2,u.FLOAT,!1,6*c,0),s=u.getAttribLocation(h,"a_texCoord"),u.enableVertexAttribArray(s),u.vertexAttribPointer(s,2,u.FLOAT,!1,6*c,2*c),h=u.getAttribLocation(h,"a_alpha_texCoord"),u.enableVertexAttribArray(h),u.vertexAttribPointer(h,2,u.FLOAT,!1,6*c,4*c))}},{key:"drawFrame",value:function(t,e){var r,n,l,h,f,v,o=this.gl,p=this.vapFrameParser,i=this.video,a=this.options;o&&(r=!a.loop&&0<(null==e?void 0:e.presentedFrames)?e.presentedFrames-1:Math.round(i.currentTime*a.fps)+a.offset,null!=(n=p.getFrame(r))&&n.obj&&(l=[],a=p.config.info,h=a.videoW,f=a.videoH,v=a.rgbFrame,n.obj.forEach(function(t){var e,r,n,o,i,a,c,s,u=p.textureMap[t.srcId];0<u&&(l[l.length]=u,e=(a=d(v,2))[0],r=a[1],n=(c=d(t.frame,4))[0],o=c[1],i=c[2],s=c[3],a=(u=d(t.mFrame,4))[0],c=u[1],t=u[2],u=u[3],s=C(n+e,o+r,i,s,h,f),u=C(a,c,t,u,h,f),l=l.concat(s).concat(u))}),l.length&&(this.imagePosLoc=this.imagePosLoc||o.getUniformLocation(this.program,"image_pos"),o.uniform1fv(this.imagePosLoc,new Float32Array(l)))),this.trigger("frame",r+1,n,p.config),o.clear(o.COLOR_BUFFER_BIT),o.texImage2D(o.TEXTURE_2D,0,o.RGB,o.RGB,o.UNSIGNED_BYTE,i),o.drawArrays(o.TRIANGLE_STRIP,0,4)),y(m(s.prototype),"drawFrame",this).call(this,t,e)}},{key:"clear",value:function(){y(m(s.prototype),"clear",this).call(this);var t=this.gl;t.clear(t.COLOR_BUFFER_BIT)}},{key:"destroy",value:function(){y(m(s.prototype),"destroy",this).call(this);var t=this.canvas,e=this.gl,r=this.vertexShader,n=this.fragmentShader,o=this.program,i=this.textures,a=this.videoTexture,c=this.vertexBuffer;t&&(t.parentNode&&t.parentNode.removeChild(t),this.canvas=null),e&&R(e,{program:o,shaders:[r,n],textures:[].concat(u(i),[a]),buffers:[c]}),this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.program=null,this.imagePosLoc=null,this.vertexBuffer=null,this.videoTexture=null,this.textures=[]}}]),s}();function D(){if(void 0!==P)return P;try{if(!window.WebGLRenderingContext)return!1;var t=document.createElement("canvas"),t=t.getContext("webgl")||t.getContext("experimental-webgl");P=!!t,t=null}catch(t){P=!1}return P}t.canWebGL=D,t.default=function(t){if(D())return new O(t);throw new Error("your browser not support webgl")},Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Vap={})}(this,function(t){"use strict";var n=function(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n};var e=function(t){if(Array.isArray(t))return n(t)};var r=function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)};var o=function(t,e){if(t){if("string"==typeof t)return n(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(t,e):void 0}};var i=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")};var u=function(t){return e(t)||r(t)||o(t)||i()};var a=function(t){if(Array.isArray(t))return t};var c=function(t,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t)){var r=[],n=!0,o=!1,i=void 0;try{for(var a,c=t[Symbol.iterator]();!(n=(a=c.next()).done)&&(r.push(a.value),!e||r.length!==e);n=!0);}catch(t){o=!0,i=t}finally{try{n||null==c.return||c.return()}finally{if(o)throw i}}return r}};var s=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")};var d=function(t,e){return a(t)||c(t,e)||o(t,e)||s()};var l=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function f(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}var h=function(t,e,r){return e&&f(t.prototype,e),r&&f(t,r),t};function p(t,e){return t(e={exports:{}},e.exports),e.exports}var v=p(function(e){function r(t){return e.exports=r=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},r(t)}e.exports=r});var m=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=v(t)););return t},y=p(function(n){function o(t,e,r){return"undefined"!=typeof Reflect&&Reflect.get?n.exports=o=Reflect.get:n.exports=o=function(t,e,r){t=m(t,e);if(t){e=Object.getOwnPropertyDescriptor(t,e);return e.get?e.get.call(r):e.value}},o(t,e,r||t)}n.exports=o}),g=p(function(r){function n(t,e){return r.exports=n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},n(t,e)}r.exports=n});var x=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&g(t,e)},b=p(function(e){function r(t){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?e.exports=r=function(t){return typeof t}:e.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}e.exports=r});var _=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var w=function(t,e){return!e||"object"!==b(e)&&"function"!=typeof e?_(t):e},E=p(function(e){function r(t){return e.exports=r=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},r(t)}e.exports=r}),T=p(function(e){function r(t){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?e.exports=r=function(t){return typeof t}:e.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}e.exports=r}),A=p(function(t){var e=function(a){var s,t=Object.prototype,u=t.hasOwnProperty,e="function"==typeof Symbol?Symbol:{},n=e.iterator||"@@iterator",r=e.asyncIterator||"@@asyncIterator",o=e.toStringTag||"@@toStringTag";function i(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{i({},"")}catch(t){i=function(t,e,r){return t[e]=r}}function c(t,e,r,n){var o,i,a,c,e=e&&e.prototype instanceof m?e:m,e=Object.create(e.prototype),n=new A(n||[]);return e._invoke=(o=t,i=r,a=n,c=f,function(t,e){if(c===p)throw new Error("Generator is already running");if(c===v){if("throw"===t)throw e;return k()}for(a.method=t,a.arg=e;;){var r=a.delegate;if(r){var n=function t(e,r){var n=e.iterator[r.method];if(n===s){if(r.delegate=null,"throw"===r.method){if(e.iterator.return&&(r.method="return",r.arg=s,t(e,r),"throw"===r.method))return d;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return d}n=l(n,e.iterator,r.arg);if("throw"===n.type)return r.method="throw",r.arg=n.arg,r.delegate=null,d;var n=n.arg;if(!n)return r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,d;{if(!n.done)return n;r[e.resultName]=n.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=s)}r.delegate=null;return d}(r,a);if(n){if(n===d)continue;return n}}if("next"===a.method)a.sent=a._sent=a.arg;else if("throw"===a.method){if(c===f)throw c=v,a.arg;a.dispatchException(a.arg)}else"return"===a.method&&a.abrupt("return",a.arg);c=p;n=l(o,i,a);if("normal"===n.type){if(c=a.done?v:h,n.arg!==d)return{value:n.arg,done:a.done}}else"throw"===n.type&&(c=v,a.method="throw",a.arg=n.arg)}}),e}function l(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}a.wrap=c;var f="suspendedStart",h="suspendedYield",p="executing",v="completed",d={};function m(){}function y(){}function g(){}var x={};x[n]=function(){return this};e=Object.getPrototypeOf,e=e&&e(e(S([])));e&&e!==t&&u.call(e,n)&&(x=e);var b=g.prototype=m.prototype=Object.create(x);function _(t){["next","throw","return"].forEach(function(e){i(t,e,function(t){return this._invoke(e,t)})})}function w(a,c){var e;this._invoke=function(r,n){function t(){return new c(function(t,e){!function e(t,r,n,o){t=l(a[t],a,r);if("throw"!==t.type){var i=t.arg,r=i.value;return r&&"object"==typeof r&&u.call(r,"__await")?c.resolve(r.__await).then(function(t){e("next",t,n,o)},function(t){e("throw",t,n,o)}):c.resolve(r).then(function(t){i.value=t,n(i)},function(t){return e("throw",t,n,o)})}o(t.arg)}(r,n,t,e)})}return e=e?e.then(t,t):t()}}function E(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function T(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function A(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(E,this),this.reset(!0)}function S(e){if(e){var t=e[n];if(t)return t.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var r=-1,t=function t(){for(;++r<e.length;)if(u.call(e,r))return t.value=e[r],t.done=!1,t;return t.value=s,t.done=!0,t};return t.next=t}}return{next:k}}function k(){return{value:s,done:!0}}return((y.prototype=b.constructor=g).constructor=y).displayName=i(g,o,"GeneratorFunction"),a.isGeneratorFunction=function(t){t="function"==typeof t&&t.constructor;return!!t&&(t===y||"GeneratorFunction"===(t.displayName||t.name))},a.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,g):(t.__proto__=g,i(t,o,"GeneratorFunction")),t.prototype=Object.create(b),t},a.awrap=function(t){return{__await:t}},_(w.prototype),w.prototype[r]=function(){return this},a.AsyncIterator=w,a.async=function(t,e,r,n,o){void 0===o&&(o=Promise);var i=new w(c(t,e,r,n),o);return a.isGeneratorFunction(e)?i:i.next().then(function(t){return t.done?t.value:i.next()})},_(b),i(b,o,"Generator"),b[n]=function(){return this},b.toString=function(){return"[object Generator]"},a.keys=function(r){var t,n=[];for(t in r)n.push(t);return n.reverse(),function t(){for(;n.length;){var e=n.pop();if(e in r)return t.value=e,t.done=!1,t}return t.done=!0,t}},a.values=S,A.prototype={constructor:A,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=s,this.done=!1,this.delegate=null,this.method="next",this.arg=s,this.tryEntries.forEach(T),!t)for(var e in this)"t"===e.charAt(0)&&u.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=s)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(r){if(this.done)throw r;var n=this;function t(t,e){return i.type="throw",i.arg=r,n.next=t,e&&(n.method="next",n.arg=s),!!e}for(var e=this.tryEntries.length-1;0<=e;--e){var o=this.tryEntries[e],i=o.completion;if("root"===o.tryLoc)return t("end");if(o.tryLoc<=this.prev){var a=u.call(o,"catchLoc"),c=u.call(o,"finallyLoc");if(a&&c){if(this.prev<o.catchLoc)return t(o.catchLoc,!0);if(this.prev<o.finallyLoc)return t(o.finallyLoc)}else if(a){if(this.prev<o.catchLoc)return t(o.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return t(o.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;0<=r;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&u.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var i=o?o.completion:{};return i.type=t,i.arg=e,o?(this.method="next",this.next=o.finallyLoc,d):this.complete(i)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),d},finish:function(t){for(var e=this.tryEntries.length-1;0<=e;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),T(r),d}},catch:function(t){for(var e=this.tryEntries.length-1;0<=e;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n,o=r.completion;return"throw"===o.type&&(n=o.arg,T(r)),n}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:S(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=s),d}},a}(t.exports);try{regeneratorRuntime=e}catch(t){Function("r","regeneratorRuntime = r")(e)}});function S(t,a,c,s){return new(c=c||Promise)(function(r,e){function n(t){try{i(s.next(t))}catch(t){e(t)}}function o(t){try{i(s.throw(t))}catch(t){e(t)}}function i(t){var e;t.done?r(t.value):((e=t.value)instanceof c?e:new c(function(t){t(e)})).then(n,o)}i((s=s.apply(t,a||[])).next())})}var k=function(){function r(t,e){l(this,r),this.config=t||{},this.headData=e,this.frame=[],this.textureMap={}}return h(r,[{key:"init",value:function(){return S(this,void 0,void 0,A.mark(function t(){return A.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(/\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]\.json/.test(this.config))return t.next=3,this.getConfigBySrc(this.config);t.next=4;break;case 3:this.config=t.sent;case 4:return t.next=6,this.parseSrc(this.config);case 6:return this.frame=this.config.frame||[],t.abrupt("return",this);case 8:case"end":return t.stop()}},t,this)}))}},{key:"initCanvas",value:function(){var t,e;this.canvas||(e=(t=document.createElement("canvas")).getContext("2d"),t.style.display="none",document.body.appendChild(t),this.ctx=e,this.canvas=t)}},{key:"loadImg",value:function(n){return new Promise(function(t,e){var r=new Image;r.crossOrigin="anonymous",r.onload=function(){t(this)},r.onerror=function(t){e(new Error("frame 资源加载失败:"+n))},r.src=n})}},{key:"parseSrc",value:function(t){var r=this,n=this.srcData={};return Promise.all((t.src||[]).map(function(e){return S(r,void 0,void 0,A.mark(function t(){var r=this;return A.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(e.img=null,this.headData[e.srcTag.slice(1,e.srcTag.length-1)]||this.headData[e.srcTag]){t.next=5;break}t.next=23;break;case 5:if("txt"!==e.srcType){t.next=12;break}this.headData.fontStyle&&!e.fontStyle&&(e.fontStyle=this.headData.fontStyle),e.textStr=this.headData[e.srcTag]||e.srcTag.replace(/\[(.*)\]/,function(t,e){return r.headData[e]}),this.initCanvas(),e.img=this.makeTextImg(e),t.next=22;break;case 12:if("img"===e.srcType)return e.imgUrl=this.headData[e.srcTag]||e.srcTag.replace(/\[(.*)\]/,function(t,e){return r.headData[e]}),t.prev=14,t.next=17,this.loadImg(e.imgUrl);t.next=22;break;case 17:e.img=t.sent,t.next=22;break;case 20:t.prev=20,t.t0=t.catch(14);case 22:e.img&&(n[e.srcId]=e);case 23:case"end":return t.stop()}},t,this,[[14,20]])}))})).then(function(){r.canvas&&r.canvas.parentNode.removeChild(r.canvas)})}},{key:"getConfigBySrc",value:function(t){return new Promise(function(e,r){var n=new XMLHttpRequest;n.open("GET",t,!0),n.responseType="json",n.onload=function(){var t;200===n.status||304===n.status&&n.response?(t=n.response,e(t)):r(new Error("http response invalid"+n.status))},n.send()})}},{key:"makeTextImg",value:function(t){var e=t.textStr,r=t.w,n=t.h,o=t.color,i=t.style,a=t.fontStyle,c=this.ctx;c.canvas.width=r,c.canvas.height=n,c.textBaseline="middle",c.textAlign="center";function s(){var t=Math.min(r/e.length,n-8),t=["".concat(t,"px"),"Arial"];return"b"===i&&t.unshift("bold"),t.join(" ")}return a?"string"==typeof a?(c.font=a,c.fillStyle=o):"object"==T(a)?(c.font=a.font||s(),c.fillStyle=a.color||o):"function"==typeof a&&(c.font=s(),c.fillStyle=o,a.call(null,c,t)):(c.font=s(),c.fillStyle=o),c.clearRect(0,0,c.canvas.width,c.canvas.height),c.fillText(e,r/2,n/2),c.getImageData(0,0,r,n)}},{key:"getFrame",value:function(e){return this.frame.find(function(t){return t.i===e})}}]),r}();function R(t,e,r){e=t.createShader(e);return t.shaderSource(e,r),t.compileShader(e),e}function F(t,e,r){var n=t.createTexture(),e=t.TEXTURE0+e;return t.activeTexture(e),t.bindTexture(t.TEXTURE_2D,n),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),r&&t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,r),n}function L(e,t){var r=t.shaders,n=void 0===r?[]:r,r=t.program,o=void 0===r?null:r,r=t.textures,i=void 0===r?[]:r,t=t.buffers,a=void 0===t?[]:t;try{i.forEach(function(t){e.deleteTexture(t)}),a.forEach(function(t){e.deleteBuffer(t)}),o&&(n.forEach(function(t){e.detachShader(o,t),e.deleteShader(t)}),e.deleteProgram(o))}catch(t){}}var C=function(){function t(){l(this,t),this.events={},this.firstPlaying=!0,this.customEvent=["frame","percentage",""]}return h(t,[{key:"setOptions",value:function(t){return t.container&&t.src,this.options=Object.assign({src:"",loop:!1,fps:20,container:null,precache:!1,mute:!1,config:"",accurate:!1,offset:0},t),this.setBegin=!0,this.useFrameCallback=!1,this.container=this.options.container,this.options.src&&this.options.config&&this.options.container,this}},{key:"precacheSource",value:function(t){var a=window.webkitURL||window.URL;return new Promise(function(i,e){var r=new XMLHttpRequest;r.open("GET",t,!0),r.responseType="blob",r.onload=function(){var t,o;200===r.status||304===r.status?(t=r.response,/iphone|ipad|ipod/i.test(navigator.userAgent)?((o=new FileReader).onloadend=function(){for(var t=o.result,e=atob(t.slice(t.indexOf(",")+1)),r=Array(e.length),n=0;n<e.length;n++)r[n]=e.charCodeAt(n);t=new Uint8Array(r),t=new Blob([t],{type:"video/mp4"});i(a.createObjectURL(t))},o.readAsDataURL(r.response)):i(a.createObjectURL(t))):e(new Error("http response invalid"+r.status))},r.send()})}},{key:"initVideo",value:function(){var e=this,t=this.options,r=this.video;(r=r||(this.video=document.createElement("video"))).crossOrigin="anonymous",r.autoplay=!1,r.preload="auto",r.setAttribute("playsinline",""),r.setAttribute("webkit-playsinline",""),t.mute&&(r.muted=!0,r.volume=0),r.style.display="none",r.loop=!!t.loop,t.precache?this.precacheSource(t.src).then(function(t){r.src=t,document.body.appendChild(r)}).catch(function(t){}):(r.src=t.src,document.body.appendChild(this.video),r.load()),this.firstPlaying=!0,"requestVideoFrameCallback"in this.video&&(this.useFrameCallback=!!this.options.accurate),this.cancelRequestAnimation(),this.offAll(),["playing","error","canplay"].forEach(function(t){e.on(t,e["on"+t].bind(e))})}},{key:"drawFrame",value:function(){this._drawFrame=this._drawFrame||this.drawFrame.bind(this),this.useFrameCallback?this.animId=this.video.requestVideoFrameCallback(this._drawFrame):this.animId=this.requestAnim(this._drawFrame)}},{key:"play",value:function(){var e=this;this.useFrameCallback?this.animId=this.video.requestVideoFrameCallback(this.drawFrame.bind(this)):this.requestAnim=this.requestAnimFunc();var t=this.video&&this.video.play();t&&t.then&&t.catch(function(t){e.video&&(e.video.muted=!0,e.video.volume=0,e.video.play().catch(function(t){e.trigger("error",t)}))})}},{key:"pause",value:function(){this.video&&this.video.pause()}},{key:"setTime",value:function(t){this.video&&(this.video.currentTime=t)}},{key:"requestAnimFunc",value:function(){var e=this,t=this.options.fps,r=void 0===t?30:t;if(window.requestAnimationFrame){var n=-1;return function(t){return n++,requestAnimationFrame(function(){return n%(60/r)?void(e.animId=e.requestAnim(t)):t()})}}return function(t){return window.setTimeout(t,1e3/r)}}},{key:"cancelRequestAnimation",value:function(){if(this.animId){if(this.useFrameCallback)try{this.video.cancelVideoFrameCallback(this.animId)}catch(t){}else(window.cancelAnimationFrame?cancelAnimationFrame:clearTimeout)(this.animId);this.animId=0}}},{key:"clear",value:function(){this.cancelRequestAnimation()}},{key:"destroy",value:function(){this.cancelRequestAnimation(),this.video&&(this.offAll(),this.video.parentNode&&this.video.parentNode.removeChild(this.video),this.video=null),this.options.onDestroy&&this.options.onDestroy()}},{key:"on",value:function(t,e){var r=this.events[t]||[];return r.push(e),this.events[t]=r,-1===this.customEvent.indexOf(t)&&this.video.addEventListener(t,e),this}},{key:"once",value:function(e,r){function n(){var t=o.events[e];t.splice(t.indexOf(n),1),o.video.removeEventListener(e,n),r.apply(void 0,arguments)}var o=this;return this.on(e,n)}},{key:"trigger",value:function(t){for(var e=arguments.length,r=new Array(1<e?e-1:0),n=1;n<e;n++)r[n-1]=arguments[n];try{(this.events[t]||[]).forEach(function(t){t.apply(void 0,r)})}catch(r){}}},{key:"offAll",value:function(){var r=this;return Object.keys(this.events).forEach(function(e){var t=r.events[e];t&&t.length&&t.forEach(function(t){r.video.removeEventListener(e,t)})}),this.events={},this}},{key:"onplaying",value:function(){this.firstPlaying&&(this.firstPlaying=!1,this.useFrameCallback||this.drawFrame(null,null))}},{key:"oncanplay",value:function(){var t=this.options.beginPoint;t&&this.setBegin&&(this.setBegin=!1,this.video.currentTime=t)}},{key:"onerror",value:function(t){this.destroy(),this.options.onLoadError&&this.options.onLoadError(t)}}]),t}();function P(r){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}();return function(){var t,e=E(r);return e=n?(t=E(this).constructor,Reflect.construct(e,arguments,t)):e.apply(this,arguments),w(this,e)}}function O(t,e,r,n,o,i){return[t/o,(t+r)/o,(i-e-n)/i,(i-e)/i]}var D,I=function(){x(s,C);var r=P(s);function s(t){var e;return l(this,s),(e=r.call(this)).textures=[],t&&e.play(t),e}return h(s,[{key:"play",value:function(t){var e,r=this;return t&&this.setOptions(t),null!==(e=this.options)&&void 0!==e&&e.config&&(t?(this.initVideo(),this.vapFrameParser=new k(this.options.config,this.options),this.vapFrameParser.init().then(function(){r.initWebGL(),r.initTexture(),r.initVideoTexture(),r.options.fps=r.vapFrameParser.config.info.fps||30,y(E(s.prototype),"play",r).call(r)}).catch(function(t){return r.vapFrameParser=null,r})):y(E(s.prototype),"play",this).call(this)),this}},{key:"initWebGL",value:function(){var t=this.canvas,e=this.gl,r=this.vertexShader,n=this.fragmentShader,o=this.program,i=this.options,a=i.width,c=i.height,t=t||document.createElement("canvas"),s=this.vapFrameParser,u=s.config.info,i=u.w,u=u.h;t.width=a||i,t.height=c||u,this.container.appendChild(t),e||((e=t.getContext("webgl")||t.getContext("experimental-webgl")).disable(e.BLEND),e.blendFuncSeparate(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA,e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,!0)),e.viewport(0,0,t.width,t.height),r=r||this.initVertexShader(e),n&&o&&L(e,{program:o,shaders:[n]});i=s.srcData,n=this.initFragmentShader(e,Object.keys(i).length);return c=r,u=n,i=(s=e).createProgram(),s.attachShader(i,c),s.attachShader(i,u),s.linkProgram(i),s.useProgram(i),o=i,this.canvas=t,this.gl=e,this.vertexShader=r,this.fragmentShader=n,this.program=o,this.imagePosLoc=null,e}},{key:"initVertexShader",value:function(t){return R(t,t.VERTEX_SHADER,"attribute vec2 a_position; // 接受顶点坐标\n             attribute vec2 a_texCoord; // 接受纹理坐标\n             attribute vec2 a_alpha_texCoord; // 接受纹理坐标\n             varying vec2 v_alpha_texCoord; // 接受纹理坐标\n             varying   vec2 v_texcoord; // 传递纹理坐标给片元着色器\n             void main(void){\n                gl_Position = vec4(a_position, 0.0, 1.0); // 设置坐标\n                v_texcoord = a_texCoord; // 设置纹理坐标\n                v_alpha_texCoord = a_alpha_texCoord; // 设置纹理坐标\n             }")}},{key:"initFragmentShader",value:function(t,e){var r="",n="";if(0<e){for(var o=9*e,i=[],a=[],c=0;c<e;c++)i.push("if(ndx == ".concat(c+1,"){\n                color = texture2D(u_image").concat(c+1,",uv);\n            }")),a.push("uniform sampler2D u_image".concat(c+1,";"));n="\n            ".concat(a.join("\n"),"\n            uniform float image_pos[").concat(o,"];\n            vec4 getSampleFromArray(int ndx, vec2 uv) {\n                vec4 color;\n                ").concat(i.join(" else "),"\n                return color;\n            }\n            "),r="\n            vec4 srcColor,maskColor;\n            vec2 srcTexcoord,maskTexcoord;\n            int srcIndex;\n            float x1,x2,y1,y2,mx1,mx2,my1,my2; //显示的区域\n\n            for(int i=0;i<".concat(o,";i+= ").concat(9,"){\n                if ((int(image_pos[i]) > 0)) {\n                  srcIndex = int(image_pos[i]);\n    \n                    x1 = image_pos[i+1];\n                    x2 = image_pos[i+2];\n                    y1 = image_pos[i+3];\n                    y2 = image_pos[i+4];\n                    \n                    mx1 = image_pos[i+5];\n                    mx2 = image_pos[i+6];\n                    my1 = image_pos[i+7];\n                    my2 = image_pos[i+8];\n    \n    \n                    if (v_texcoord.s>x1 && v_texcoord.s<x2 && v_texcoord.t>y1 && v_texcoord.t<y2) {\n                        srcTexcoord = vec2((v_texcoord.s-x1)/(x2-x1),(v_texcoord.t-y1)/(y2-y1));\n                         maskTexcoord = vec2(mx1+srcTexcoord.s*(mx2-mx1),my1+srcTexcoord.t*(my2-my1));\n                         srcColor = getSampleFromArray(srcIndex,srcTexcoord);\n                         maskColor = texture2D(u_image_video, maskTexcoord);\n                         srcColor.a = srcColor.a*(maskColor.r);\n                      \n                         bgColor = vec4(srcColor.rgb*srcColor.a,srcColor.a) + (1.0-srcColor.a)*bgColor;\n                      \n                    }   \n                }\n            }\n            ")}r="\n        precision lowp float;\n        varying vec2 v_texcoord;\n        varying vec2 v_alpha_texCoord;\n        uniform sampler2D u_image_video;\n        ".concat(n,"\n        \n        void main(void) {\n            vec4 bgColor = ").concat("vec4(texture2D(u_image_video, v_texcoord).rgb, texture2D(u_image_video,v_alpha_texCoord).r);","\n            ").concat(r,"\n            gl_FragColor = bgColor;\n        }\n        ");return R(t,t.FRAGMENT_SHADER,r)}},{key:"initTexture",value:function(){var t=this.gl,e=this.vapFrameParser,r=this.textures;if(e&&e.srcData){var n,o=e.srcData,i=1;for(n in o){var a=o[n];r[i-1]?(t.activeTexture(t.TEXTURE0+i),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,a.img)):this.textures.push(F(t,i,a.img));var c=t.getUniformLocation(this.program,"u_image".concat(i));t.uniform1i(c,i),this.vapFrameParser.textureMap[a.srcId]=i++}}}},{key:"initVideoTexture",value:function(){var t,e,r,n,o,i,a,c,s,u=this.gl,l=this.vapFrameParser,f=this.program;l&&l.config&&l.config.info&&(this.videoTexture||(this.videoTexture=F(u,0)),a=u.getUniformLocation(f,"u_image_video"),u.uniform1i(a,0),u.activeTexture(u.TEXTURE0),t=(i=l.config.info).videoW,c=i.videoH,e=(o=d(i.rgbFrame,4))[0],r=o[1],n=o[2],s=o[3],l=(a=d(i.aFrame,4))[0],o=a[1],i=a[2],a=a[3],s=O(e,r,n,s,t,c),c=O(l,o,i,a,t,c),s=new Float32Array([-1,1,s[0],s[3],c[0],c[3]].concat([1,1,s[1],s[3],c[1],c[3]],[-1,-1,s[0],s[2],c[0],c[2]],[1,-1,s[1],s[2],c[1],c[2]])),this.vertexBuffer||(this.vertexBuffer=u.createBuffer(),u.bindBuffer(u.ARRAY_BUFFER,this.vertexBuffer)),u.bufferData(u.ARRAY_BUFFER,s,u.STATIC_DRAW),c=s.BYTES_PER_ELEMENT,s=u.getAttribLocation(f,"a_position"),u.enableVertexAttribArray(s),u.vertexAttribPointer(s,2,u.FLOAT,!1,6*c,0),s=u.getAttribLocation(f,"a_texCoord"),u.enableVertexAttribArray(s),u.vertexAttribPointer(s,2,u.FLOAT,!1,6*c,2*c),f=u.getAttribLocation(f,"a_alpha_texCoord"),u.enableVertexAttribArray(f),u.vertexAttribPointer(f,2,u.FLOAT,!1,6*c,4*c))}},{key:"drawFrame",value:function(t,e){var r,n,l,f,h,p,o=this.gl,v=this.vapFrameParser,i=this.video,a=this.options;o&&(r=!a.loop&&0<(null==e?void 0:e.presentedFrames)?e.presentedFrames-1:Math.round(i.currentTime*a.fps)+a.offset,null!=(n=v.getFrame(r))&&n.obj&&(l=[],a=v.config.info,f=a.videoW,h=a.videoH,p=a.rgbFrame,n.obj.forEach(function(t){var e,r,n,o,i,a,c,s,u=v.textureMap[t.srcId];0<u&&(l[l.length]=u,e=(a=d(p,2))[0],r=a[1],n=(c=d(t.frame,4))[0],o=c[1],i=c[2],s=c[3],a=(u=d(t.mFrame,4))[0],c=u[1],t=u[2],u=u[3],s=O(n+e,o+r,i,s,f,h),u=O(a,c,t,u,f,h),l=l.concat(s).concat(u))}),l.length&&(this.imagePosLoc=this.imagePosLoc||o.getUniformLocation(this.program,"image_pos"),o.uniform1fv(this.imagePosLoc,new Float32Array(l)))),this.trigger("frame",r+1,n,v.config),o.clear(o.COLOR_BUFFER_BIT),o.texImage2D(o.TEXTURE_2D,0,o.RGB,o.RGB,o.UNSIGNED_BYTE,i),o.drawArrays(o.TRIANGLE_STRIP,0,4)),y(E(s.prototype),"drawFrame",this).call(this,t,e)}},{key:"clear",value:function(){y(E(s.prototype),"clear",this).call(this);var t=this.gl;t.clear(t.COLOR_BUFFER_BIT)}},{key:"destroy",value:function(){y(E(s.prototype),"destroy",this).call(this);var t=this.canvas,e=this.gl,r=this.vertexShader,n=this.fragmentShader,o=this.program,i=this.textures,a=this.videoTexture,c=this.vertexBuffer;t&&(t.parentNode&&t.parentNode.removeChild(t),this.canvas=null),e&&L(e,{program:o,shaders:[r,n],textures:[].concat(u(i),[a]),buffers:[c]}),this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.program=null,this.imagePosLoc=null,this.vertexBuffer=null,this.videoTexture=null,this.textures=[]}}]),s}();function j(){if(void 0!==D)return D;try{if(!window.WebGLRenderingContext)return!1;var t=document.createElement("canvas"),t=t.getContext("webgl")||t.getContext("experimental-webgl");D=!!t,t=null}catch(t){D=!1}return D}t.canWebGL=j,t.default=function(t){if(j())return new I(t);throw new Error("your browser not support webgl")},Object.defineProperty(t,"__esModule",{value:!0})});
diff --git a/web/package.json b/web/package.json
index a6398368..8b714bf4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "video-animation-player",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "webgl动画特效组件",
   "main": "dist/vap.js",
   "scripts": {
diff --git a/web/src/type.ts b/web/src/type.ts
index 1399e9b5..630c2fc6 100644
--- a/web/src/type.ts
+++ b/web/src/type.ts
@@ -3,6 +3,8 @@ export interface VapConfig {
   src: string;
   config: string | { [key: string]: any };
   fps?: number;
+  width?: number;
+  height?: number;
   // 循环播放
   loop: boolean;
   mute?: boolean;
diff --git a/web/src/webgl-render-vap.ts b/web/src/webgl-render-vap.ts
index b17dfaf1..baf3ec36 100644
--- a/web/src/webgl-render-vap.ts
+++ b/web/src/webgl-render-vap.ts
@@ -78,13 +78,14 @@ export default class WebglRenderVap extends VapVideo {
 
   initWebGL() {
     let { canvas, gl, vertexShader, fragmentShader, program } = this;
+    const { width, height } = this.options;
     if (!canvas) {
       canvas = document.createElement('canvas');
     }
     const { vapFrameParser } = this;
     const { w, h } = vapFrameParser.config.info;
-    canvas.width = w;
-    canvas.height = h;
+    canvas.width = width || w;
+    canvas.height = height || h;
     this.container.appendChild(canvas);
 
     if (!gl) {
@@ -93,7 +94,7 @@ export default class WebglRenderVap extends VapVideo {
       gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
     }
-    gl.viewport(0, 0, w, h);
+    gl.viewport(0, 0, canvas.width, canvas.height);
 
     if (!vertexShader) {
       vertexShader = this.initVertexShader(gl);