diff --git a/web/dist/vap.js b/web/dist/vap.js
index 0a22857f..458ea18f 100644
--- a/web/dist/vap.js
+++ b/web/dist/vap.js
@@ -1923,7 +1923,7 @@
 
         var timePoint = info && info.mediaTime >= 0 ? info.mediaTime : this.video.currentTime;
         var frame = Math.round(timePoint * this.options.fps) + this.options.offset;
-        var frameCbs = this.events['frame'];
+        var frameCbs = this.events['frame'] || [];
         frameCbs.forEach(function (cb) {
           cb(frame + 1, timePoint);
         });
diff --git a/web/dist/vap.min.js b/web/dist/vap.min.js
index 69ba18ed..cc8d1f1c 100644
--- a/web/dist/vap.min.js
+++ b/web/dist/vap.min.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Vap=e()}(this,function(){"use strict";var r=function(t){if(Array.isArray(t))return t};var n=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,s=t[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!e||r.length!==e);n=!0);}catch(t){o=!0,i=t}finally{try{n||null==s.return||s.return()}finally{if(o)throw i}}return r}};var o=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 i=function(t,e){if(t){if("string"==typeof t)return o(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)?o(t,e):void 0}};var a=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 v=function(t,e){return r(t)||n(t,e)||i(t,e)||a()};function t(t,e){return t(e={exports:{}},e.exports),e.exports}var s=t(function(t){var e=function(a){var c,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 s(t,e,r,n){var o,i,a,s,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,s=h,function(t,e){if(s===p)throw new Error("Generator is already running");if(s===d){if("throw"===t)throw e;return S()}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===c){if(r.delegate=null,"throw"===r.method){if(e.iterator.return&&(r.method="return",r.arg=c,t(e,r),"throw"===r.method))return v;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return v}n=l(n,e.iterator,r.arg);if("throw"===n.type)return r.method="throw",r.arg=n.arg,r.delegate=null,v;var n=n.arg;if(!n)return r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,v;{if(!n.done)return n;r[e.resultName]=n.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=c)}r.delegate=null;return v}(r,a);if(n){if(n===v)continue;return n}}if("next"===a.method)a.sent=a._sent=a.arg;else if("throw"===a.method){if(s===h)throw s=d,a.arg;a.dispatchException(a.arg)}else"return"===a.method&&a.abrupt("return",a.arg);s=p;n=l(o,i,a);if("normal"===n.type){if(s=a.done?d:f,n.arg!==v)return{value:n.arg,done:a.done}}else"throw"===n.type&&(s=d,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=s;var h="suspendedStart",f="suspendedYield",p="executing",d="completed",v={};function m(){}function y(){}function g(){}var x={};x[n]=function(){return this};e=Object.getPrototypeOf,e=e&&e(e(C([])));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,s){var e;this._invoke=function(r,n){function t(){return new s(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")?s.resolve(r.__await).then(function(t){e("next",t,n,o)},function(t){e("throw",t,n,o)}):s.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 T(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 E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function A(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(T,this),this.reset(!0)}function C(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=c,t.done=!0,t};return t.next=t}}return{next:S}}function S(){return{value:c,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(s(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=C,A.prototype={constructor:A,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=c,this.done=!1,this.delegate=null,this.method="next",this.arg=c,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&u.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=c)},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=c),!!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"),s=u.call(o,"finallyLoc");if(a&&s){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(!s)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,v):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),v},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),E(r),v}},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,E(r)),n}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:C(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=c),v}},a}(t.exports);try{regeneratorRuntime=e}catch(t){Function("r","regeneratorRuntime = r")(e)}});var c=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function u(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 l=function(t,e,r){return e&&u(t.prototype,e),r&&u(t,r),t};var h=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t},f=t(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=f(t)););return t},m=t(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}),d=t(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 y=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&&d(t,e)},g=t(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 x=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var b=function(t,e){return!e||"object"!==g(e)&&"function"!=typeof e?x(t):e},_=t(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});function w(t,a,s,c){return new(s=s||Promise)(function(r,e){function n(t){try{i(c.next(t))}catch(t){e(t)}}function o(t){try{i(c.throw(t))}catch(t){e(t)}}function i(t){var e;t.done?r(t.value):((e=t.value)instanceof s?e:new s(function(t){t(e)})).then(n,o)}i((c=c.apply(t,a||[])).next())})}var T=t(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}),E=function(){function r(t,e){c(this,r),this.config=t||{},this.headData=e,this.frame=[],this.textureMap={}}return l(r,[{key:"init",value:function(){return w(this,void 0,void 0,s.mark(function t(){return s.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(this.initCanvas(),/\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]\.json$/.test(this.config))return t.next=4,this.getConfigBySrc(this.config);t.next=5;break;case 4:this.config=t.sent;case 5:return t.next=7,this.parseSrc(this.config);case 7:return this.canvas.parentNode.removeChild(this.canvas),this.frame=this.config.frame||[],t.abrupt("return",this);case 10:case"end":return t.stop()}},t,this)}))}},{key:"initCanvas",value:function(){var t=document.createElement("canvas"),e=t.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 w(r,void 0,void 0,s.mark(function t(){var r=this;return s.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)]){t.next=5;break}t.next=22;break;case 5:if("txt"!==e.srcType){t.next=11;break}this.headData.fontStyle&&!e.fontStyle&&(e.fontStyle=this.headData.fontStyle),e.textStr=e.srcTag.replace(/\[(.*)\]/,function(t,e){return r.headData[e]}),e.img=this.makeTextImg(e),t.next=21;break;case 11:if("img"===e.srcType)return e.imgUrl=e.srcTag.replace(/\[(.*)\]/,function(t,e){return r.headData[e]}),t.prev=13,t.next=16,this.loadImg(e.imgUrl+"?t="+Date.now());t.next=21;break;case 16:e.img=t.sent,t.next=21;break;case 19:t.prev=19,t.t0=t.catch(13);case 21:e.img&&(n[e.srcId]=e);case 22:case"end":return t.stop()}},t,this,[[13,19]])}))}))}},{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,s=this.ctx;s.canvas.width=r,s.canvas.height=n,s.textBaseline="middle",s.textAlign="center";function c(){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?(s.font=a,s.fillStyle=o):"object"==T(a)?(s.font=a.font||c(),s.fillStyle=a.color||o):"function"==typeof a&&(s.font=c(),s.fillStyle=o,a.call(null,s,t)):(s.font=c(),s.fillStyle=o),s.clearRect(0,0,s.canvas.width,s.canvas.height),s.fillText(e,r/2,n/2),s.getImageData(0,0,r,n)}},{key:"getFrame",value:function(e){return this.frame.find(function(t){return t.i===e})}}]),r}();function A(t,e,r){e=t.createShader(e);return t.shaderSource(e,r),t.compileShader(e),e}function C(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}var S=function(){function e(t){c(this,e),this.customEvent=["frame","percentage"],t.container&&t.src,this.options=Object.assign({src:"",loop:!1,fps:20,width:375,height:375,container:null,precache:!1,mute:!1,config:"",accurate:!1,offset:0},t),this.fps=20,this.setBegin=!0,this.useFrameCallback=!1,this.requestAnim=this.requestAnimFunc(),this.container=this.options.container,this.options.src&&this.options.config&&this.options.container&&this.initVideo()}return l(e,[{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=document.createElement("video");r.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()),"requestVideoFrameCallback"in this.video&&(this.useFrameCallback=!!this.options.accurate),this.events={},["playing","pause","ended","error","canplay"].forEach(function(t){e.on(t,e["on"+t].bind(e))})}},{key:"drawFrame",value:function(t,e){this._drawFrame=this._drawFrame||this.drawFrame.bind(this,t,e),this.useFrameCallback?this.animId=this.video.requestVideoFrameCallback(this.drawFrame.bind(this)):this.animId=this.requestAnim(this._drawFrame)}},{key:"play",value:function(){var r=this,t=this.video&&this.video.play();t&&t.then&&t.catch(function(t){r.video&&(r.video.muted=!0,r.video.volume=0,r.video.play().catch(function(e){(r.events.error||[]).forEach(function(t){t(e)})}))})}},{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;if(window.requestAnimationFrame){var r=-1;return function(t){return r++,requestAnimationFrame(function(){return r%(60/e.fps)?void(e.animId=e.requestAnim(t)):t()})}}return function(t){return setTimeout(t,1e3/e.fps)}}},{key:"cancelRequestAnimation",value:function(){if(this.useFrameCallback)try{this.video.cancelVideoFrameCallback(this.animId)}catch(t){}else(window.cancelAnimationFrame?cancelAnimationFrame:clearTimeout)(this.animId)}},{key:"destroy",value:function(){this.cancelRequestAnimation(),this.video&&(this.video.parentNode&&this.video.parentNode.removeChild(this.video),this.video=null),this.options.onDestory&&this.options.onDestory()}},{key:"clear",value:function(){this.destroy()}},{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:"onplaying",value:function(){this.firstPlaying||(this.firstPlaying=!0,this.useFrameCallback||this.drawFrame(null,null))}},{key:"onpause",value:function(){}},{key:"onended",value:function(){this.destroy()}},{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)}}]),e}();function F(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=_(r);return e=n?(t=_(this).constructor,Reflect.construct(e,arguments,t)):e.apply(this,arguments),b(this,e)}}var k=null,R={};function P(t,e,r,n,o,i){return[t/o,(t+r)/o,(i-e-n)/i,(i-e)/i]}var e,L=function(){y(a,S);var e=F(a);function a(t){return c(this,a),(t=e.call(this,t)).useFrameCallback&&(t.animId=t.video.requestVideoFrameCallback(t.drawFrame.bind(h(t)))),t.insType=t.options.type,R[t.insType]?t.instance=R[t.insType]:t.instance=R[t.insType]={},t.textures=[],t.buffers=[],t.shaders=[],t.init(),t}return l(a,[{key:"init",value:function(){return w(this,void 0,void 0,s.mark(function t(){return s.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(this.setCanvas(),this.options.config)return t.prev=2,t.next=5,new E(this.options.config,this.options).init();t.next=12;break;case 5:this.vapFrameParser=t.sent,this.resources=this.vapFrameParser.srcData,t.next=12;break;case 9:t.prev=9,t.t0=t.catch(2);case 12:this.resources=this.resources||{},this.initWebGL(),this.play();case 15:case"end":return t.stop()}},t,this,[[2,9]])}))}},{key:"setCanvas",value:function(){var t=this.instance.canvas,e=this.options,r=e.width,e=e.height;(t=t||(this.instance.canvas=document.createElement("canvas"))).width=r,t.height=e,this.container.appendChild(t)}},{key:"initWebGL",value:function(){var t=this.instance.canvas,e=this.instance,r=e.gl,n=e.vertexShader,o=e.fragmentShader,i=e.program;if(t)return r||(this.instance.gl=r=t.getContext("webgl")||t.getContext("experimental-webgl"),r.disable(r.BLEND),r.blendFuncSeparate(r.SRC_ALPHA,r.ONE_MINUS_SRC_ALPHA,r.SRC_ALPHA,r.ONE_MINUS_SRC_ALPHA),r.pixelStorei(r.UNPACK_FLIP_Y_WEBGL,!0)),r.clear(r.COLOR_BUFFER_BIT),r?(r.viewport(0,0,t.width,t.height),n=n||(this.instance.vertexShader=this.initVertexShader()),o=o||(this.instance.fragmentShader=this.initFragmentShader()),i=i||(this.instance.program=(e=n,t=o,o=(n=r).createProgram(),n.attachShader(o,e),n.attachShader(o,t),n.linkProgram(o),n.useProgram(o),o)),this.program=i,this.initTexture(),this.initVideoTexture(),r):void 0}},{key:"initVertexShader",value:function(){var t=this.instance.gl;return A(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(){var t=this.instance.gl,e=t.getParameter(t.MAX_TEXTURE_IMAGE_UNITS)-1,r="",n="";if(0<e){for(var o=[],i=[],a=0;a<e;a++)o.push("if(ndx == ".concat(a+1,"){\n                        color = texture2D(u_image").concat(a+1,",uv);\n                    }")),i.push("uniform sampler2D u_image".concat(a+1,";"));n="\n            ".concat(i.join("\n"),"\n            uniform float image_pos[").concat(9*e,"];\n            vec4 getSampleFromArray(int ndx, vec2 uv) {\n                vec4 color;\n                ").concat(o.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(9*e,";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            // bgColor = texture2D(u_image[0], v_texcoord);\n            gl_FragColor = bgColor;\n        }\n        ");return A(t,t.FRAGMENT_SHADER,r)}},{key:"initTexture",value:function(){var t=this.instance.gl,e=1;if(this.vapFrameParser&&this.vapFrameParser.srcData){var r,n=this.vapFrameParser.srcData;for(r in n){var o=n[r];this.textures.push(C(t,e,o.img));var i=t.getUniformLocation(this.program,"u_image".concat(e));t.uniform1i(i,e),this.vapFrameParser.textureMap[o.srcId]=e++}var a=t.createTexture();t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,a),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,1,1,0,t.RGBA,t.UNSIGNED_BYTE,null),this.videoTexture=C(t,e);a=t.getUniformLocation(this.program,"u_image_video");t.uniform1i(a,e)}}},{key:"initVideoTexture",value:function(){var t,e,r,n,o,i,a,s,c,u,l,h=this.instance.gl,f=h.createBuffer();this.buffers.push(f),this.vapFrameParser&&this.vapFrameParser.config&&this.vapFrameParser.config.info&&(l=[],t=(a=this.vapFrameParser.config.info).videoW,u=a.videoH,e=(i=v(a.rgbFrame,4))[0],r=i[1],n=i[2],c=i[3],o=(s=v(a.aFrame,4))[0],i=s[1],a=s[2],s=s[3],c=P(e,r,n,c,t,u),u=P(o,i,a,s,t,u),l.push.apply(l,[-1,1,c[0],c[3],u[0],u[3]]),l.push.apply(l,[1,1,c[1],c[3],u[1],u[3]]),l.push.apply(l,[-1,-1,c[0],c[2],u[0],u[2]]),l.push.apply(l,[1,-1,c[1],c[2],u[1],u[2]]),l=new Float32Array(l),h.bindBuffer(h.ARRAY_BUFFER,f),h.bufferData(h.ARRAY_BUFFER,l,h.STATIC_DRAW),this.aPosition=h.getAttribLocation(this.program,"a_position"),h.enableVertexAttribArray(this.aPosition),this.aTexCoord=h.getAttribLocation(this.program,"a_texCoord"),h.enableVertexAttribArray(this.aTexCoord),this.aAlphaTexCoord=h.getAttribLocation(this.program,"a_alpha_texCoord"),h.enableVertexAttribArray(this.aAlphaTexCoord),l=l.BYTES_PER_ELEMENT,h.vertexAttribPointer(this.aPosition,2,h.FLOAT,!1,6*l,0),h.vertexAttribPointer(this.aTexCoord,2,h.FLOAT,!1,6*l,2*l),h.vertexAttribPointer(this.aAlphaTexCoord,2,h.FLOAT,!1,6*l,4*l))}},{key:"drawFrame",value:function(t,e){var p=this,r=e&&0<=e.mediaTime?e.mediaTime:this.video.currentTime,n=Math.round(r*this.options.fps)+this.options.offset;this.events.frame.forEach(function(t){t(n+1,r)});var o,d,i=this.instance.gl;i&&(i.clear(i.COLOR_BUFFER_BIT),this.vapFrameParser&&(o=this.vapFrameParser.getFrame(n),d=[],o&&o.obj&&o.obj.forEach(function(t,e){d[d.length]=+p.vapFrameParser.textureMap[t.srcId];var r=p.vapFrameParser.config.info,n=r.videoW,o=r.videoH,i=v(r.rgbFrame,2),a=i[0],s=i[1],c=v(t.frame,4),u=c[0],l=c[1],h=c[2],f=c[3],r=v(t.mFrame,4),i=r[0],c=r[1],t=r[2],r=r[3],f=P(u+a,l+s,h,f,n,o),o=P(i,c,t,r,n,o);d=d.concat(f).concat(o)}),o=9*(i.getParameter(i.MAX_TEXTURE_IMAGE_UNITS)-1),d=d.concat(new Array(o-d.length).fill(0)),this._imagePos=this._imagePos||i.getUniformLocation(this.program,"image_pos"),i.uniform1fv(this._imagePos,new Float32Array(d))),i.texImage2D(i.TEXTURE_2D,0,i.RGB,i.RGB,i.UNSIGNED_BYTE,this.video),i.drawArrays(i.TRIANGLE_STRIP,0,4)),m(_(a.prototype),"drawFrame",this).call(this,t,e)}},{key:"destroy",value:function(){var t=this.instance,e=t.canvas,r=t.gl;if(this.textures&&this.textures.length)for(var n=0;n<this.textures.length;n++)r.deleteTexture(this.textures[n]);e&&e.parentNode&&e.parentNode.removeChild(e),m(_(a.prototype),"destroy",this).call(this),this.clearMemoryCache()}},{key:"clearMemoryCache",value:function(){k&&clearTimeout(k),k=setTimeout(function(){R={}},18e5)}}]),a}();return function(t){if(function(){if(void 0!==e)return e;try{if(!window.WebGLRenderingContext)return!1;var t=document.createElement("canvas"),t=t.getContext("webgl")||t.getContext("experimental-webgl");e=!!t,t=null}catch(t){e=!1}return e}())return new L(Object.assign({},t));throw new Error("your browser not support webgl")}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Vap=e()}(this,function(){"use strict";var r=function(t){if(Array.isArray(t))return t};var n=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,s=t[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!e||r.length!==e);n=!0);}catch(t){o=!0,i=t}finally{try{n||null==s.return||s.return()}finally{if(o)throw i}}return r}};var o=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 i=function(t,e){if(t){if("string"==typeof t)return o(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)?o(t,e):void 0}};var a=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 v=function(t,e){return r(t)||n(t,e)||i(t,e)||a()};function t(t,e){return t(e={exports:{}},e.exports),e.exports}var s=t(function(t){var e=function(a){var c,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 s(t,e,r,n){var o,i,a,s,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,s=h,function(t,e){if(s===p)throw new Error("Generator is already running");if(s===d){if("throw"===t)throw e;return S()}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===c){if(r.delegate=null,"throw"===r.method){if(e.iterator.return&&(r.method="return",r.arg=c,t(e,r),"throw"===r.method))return v;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return v}n=l(n,e.iterator,r.arg);if("throw"===n.type)return r.method="throw",r.arg=n.arg,r.delegate=null,v;var n=n.arg;if(!n)return r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,v;{if(!n.done)return n;r[e.resultName]=n.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=c)}r.delegate=null;return v}(r,a);if(n){if(n===v)continue;return n}}if("next"===a.method)a.sent=a._sent=a.arg;else if("throw"===a.method){if(s===h)throw s=d,a.arg;a.dispatchException(a.arg)}else"return"===a.method&&a.abrupt("return",a.arg);s=p;n=l(o,i,a);if("normal"===n.type){if(s=a.done?d:f,n.arg!==v)return{value:n.arg,done:a.done}}else"throw"===n.type&&(s=d,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=s;var h="suspendedStart",f="suspendedYield",p="executing",d="completed",v={};function m(){}function y(){}function g(){}var x={};x[n]=function(){return this};e=Object.getPrototypeOf,e=e&&e(e(C([])));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,s){var e;this._invoke=function(r,n){function t(){return new s(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")?s.resolve(r.__await).then(function(t){e("next",t,n,o)},function(t){e("throw",t,n,o)}):s.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 T(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 E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function A(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(T,this),this.reset(!0)}function C(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=c,t.done=!0,t};return t.next=t}}return{next:S}}function S(){return{value:c,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(s(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=C,A.prototype={constructor:A,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=c,this.done=!1,this.delegate=null,this.method="next",this.arg=c,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&u.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=c)},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=c),!!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"),s=u.call(o,"finallyLoc");if(a&&s){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(!s)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,v):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),v},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),E(r),v}},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,E(r)),n}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:C(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=c),v}},a}(t.exports);try{regeneratorRuntime=e}catch(t){Function("r","regeneratorRuntime = r")(e)}});var c=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function u(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 l=function(t,e,r){return e&&u(t.prototype,e),r&&u(t,r),t};var h=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t},f=t(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=f(t)););return t},m=t(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}),d=t(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 y=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&&d(t,e)},g=t(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 x=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var b=function(t,e){return!e||"object"!==g(e)&&"function"!=typeof e?x(t):e},_=t(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});function w(t,a,s,c){return new(s=s||Promise)(function(r,e){function n(t){try{i(c.next(t))}catch(t){e(t)}}function o(t){try{i(c.throw(t))}catch(t){e(t)}}function i(t){var e;t.done?r(t.value):((e=t.value)instanceof s?e:new s(function(t){t(e)})).then(n,o)}i((c=c.apply(t,a||[])).next())})}var T=t(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}),E=function(){function r(t,e){c(this,r),this.config=t||{},this.headData=e,this.frame=[],this.textureMap={}}return l(r,[{key:"init",value:function(){return w(this,void 0,void 0,s.mark(function t(){return s.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(this.initCanvas(),/\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]\.json$/.test(this.config))return t.next=4,this.getConfigBySrc(this.config);t.next=5;break;case 4:this.config=t.sent;case 5:return t.next=7,this.parseSrc(this.config);case 7:return this.canvas.parentNode.removeChild(this.canvas),this.frame=this.config.frame||[],t.abrupt("return",this);case 10:case"end":return t.stop()}},t,this)}))}},{key:"initCanvas",value:function(){var t=document.createElement("canvas"),e=t.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 w(r,void 0,void 0,s.mark(function t(){var r=this;return s.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)]){t.next=5;break}t.next=22;break;case 5:if("txt"!==e.srcType){t.next=11;break}this.headData.fontStyle&&!e.fontStyle&&(e.fontStyle=this.headData.fontStyle),e.textStr=e.srcTag.replace(/\[(.*)\]/,function(t,e){return r.headData[e]}),e.img=this.makeTextImg(e),t.next=21;break;case 11:if("img"===e.srcType)return e.imgUrl=e.srcTag.replace(/\[(.*)\]/,function(t,e){return r.headData[e]}),t.prev=13,t.next=16,this.loadImg(e.imgUrl+"?t="+Date.now());t.next=21;break;case 16:e.img=t.sent,t.next=21;break;case 19:t.prev=19,t.t0=t.catch(13);case 21:e.img&&(n[e.srcId]=e);case 22:case"end":return t.stop()}},t,this,[[13,19]])}))}))}},{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,s=this.ctx;s.canvas.width=r,s.canvas.height=n,s.textBaseline="middle",s.textAlign="center";function c(){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?(s.font=a,s.fillStyle=o):"object"==T(a)?(s.font=a.font||c(),s.fillStyle=a.color||o):"function"==typeof a&&(s.font=c(),s.fillStyle=o,a.call(null,s,t)):(s.font=c(),s.fillStyle=o),s.clearRect(0,0,s.canvas.width,s.canvas.height),s.fillText(e,r/2,n/2),s.getImageData(0,0,r,n)}},{key:"getFrame",value:function(e){return this.frame.find(function(t){return t.i===e})}}]),r}();function A(t,e,r){e=t.createShader(e);return t.shaderSource(e,r),t.compileShader(e),e}function C(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}var S=function(){function e(t){c(this,e),this.customEvent=["frame","percentage"],t.container&&t.src,this.options=Object.assign({src:"",loop:!1,fps:20,width:375,height:375,container:null,precache:!1,mute:!1,config:"",accurate:!1,offset:0},t),this.fps=20,this.setBegin=!0,this.useFrameCallback=!1,this.requestAnim=this.requestAnimFunc(),this.container=this.options.container,this.options.src&&this.options.config&&this.options.container&&this.initVideo()}return l(e,[{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=document.createElement("video");r.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()),"requestVideoFrameCallback"in this.video&&(this.useFrameCallback=!!this.options.accurate),this.events={},["playing","pause","ended","error","canplay"].forEach(function(t){e.on(t,e["on"+t].bind(e))})}},{key:"drawFrame",value:function(t,e){this._drawFrame=this._drawFrame||this.drawFrame.bind(this,t,e),this.useFrameCallback?this.animId=this.video.requestVideoFrameCallback(this.drawFrame.bind(this)):this.animId=this.requestAnim(this._drawFrame)}},{key:"play",value:function(){var r=this,t=this.video&&this.video.play();t&&t.then&&t.catch(function(t){r.video&&(r.video.muted=!0,r.video.volume=0,r.video.play().catch(function(e){(r.events.error||[]).forEach(function(t){t(e)})}))})}},{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;if(window.requestAnimationFrame){var r=-1;return function(t){return r++,requestAnimationFrame(function(){return r%(60/e.fps)?void(e.animId=e.requestAnim(t)):t()})}}return function(t){return setTimeout(t,1e3/e.fps)}}},{key:"cancelRequestAnimation",value:function(){if(this.useFrameCallback)try{this.video.cancelVideoFrameCallback(this.animId)}catch(t){}else(window.cancelAnimationFrame?cancelAnimationFrame:clearTimeout)(this.animId)}},{key:"destroy",value:function(){this.cancelRequestAnimation(),this.video&&(this.video.parentNode&&this.video.parentNode.removeChild(this.video),this.video=null),this.options.onDestory&&this.options.onDestory()}},{key:"clear",value:function(){this.destroy()}},{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:"onplaying",value:function(){this.firstPlaying||(this.firstPlaying=!0,this.useFrameCallback||this.drawFrame(null,null))}},{key:"onpause",value:function(){}},{key:"onended",value:function(){this.destroy()}},{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)}}]),e}();function F(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=_(r);return e=n?(t=_(this).constructor,Reflect.construct(e,arguments,t)):e.apply(this,arguments),b(this,e)}}var k=null,R={};function P(t,e,r,n,o,i){return[t/o,(t+r)/o,(i-e-n)/i,(i-e)/i]}var e,L=function(){y(a,S);var e=F(a);function a(t){return c(this,a),(t=e.call(this,t)).useFrameCallback&&(t.animId=t.video.requestVideoFrameCallback(t.drawFrame.bind(h(t)))),t.insType=t.options.type,R[t.insType]?t.instance=R[t.insType]:t.instance=R[t.insType]={},t.textures=[],t.buffers=[],t.shaders=[],t.init(),t}return l(a,[{key:"init",value:function(){return w(this,void 0,void 0,s.mark(function t(){return s.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(this.setCanvas(),this.options.config)return t.prev=2,t.next=5,new E(this.options.config,this.options).init();t.next=12;break;case 5:this.vapFrameParser=t.sent,this.resources=this.vapFrameParser.srcData,t.next=12;break;case 9:t.prev=9,t.t0=t.catch(2);case 12:this.resources=this.resources||{},this.initWebGL(),this.play();case 15:case"end":return t.stop()}},t,this,[[2,9]])}))}},{key:"setCanvas",value:function(){var t=this.instance.canvas,e=this.options,r=e.width,e=e.height;(t=t||(this.instance.canvas=document.createElement("canvas"))).width=r,t.height=e,this.container.appendChild(t)}},{key:"initWebGL",value:function(){var t=this.instance.canvas,e=this.instance,r=e.gl,n=e.vertexShader,o=e.fragmentShader,i=e.program;if(t)return r||(this.instance.gl=r=t.getContext("webgl")||t.getContext("experimental-webgl"),r.disable(r.BLEND),r.blendFuncSeparate(r.SRC_ALPHA,r.ONE_MINUS_SRC_ALPHA,r.SRC_ALPHA,r.ONE_MINUS_SRC_ALPHA),r.pixelStorei(r.UNPACK_FLIP_Y_WEBGL,!0)),r.clear(r.COLOR_BUFFER_BIT),r?(r.viewport(0,0,t.width,t.height),n=n||(this.instance.vertexShader=this.initVertexShader()),o=o||(this.instance.fragmentShader=this.initFragmentShader()),i=i||(this.instance.program=(e=n,t=o,o=(n=r).createProgram(),n.attachShader(o,e),n.attachShader(o,t),n.linkProgram(o),n.useProgram(o),o)),this.program=i,this.initTexture(),this.initVideoTexture(),r):void 0}},{key:"initVertexShader",value:function(){var t=this.instance.gl;return A(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(){var t=this.instance.gl,e=t.getParameter(t.MAX_TEXTURE_IMAGE_UNITS)-1,r="",n="";if(0<e){for(var o=[],i=[],a=0;a<e;a++)o.push("if(ndx == ".concat(a+1,"){\n                        color = texture2D(u_image").concat(a+1,",uv);\n                    }")),i.push("uniform sampler2D u_image".concat(a+1,";"));n="\n            ".concat(i.join("\n"),"\n            uniform float image_pos[").concat(9*e,"];\n            vec4 getSampleFromArray(int ndx, vec2 uv) {\n                vec4 color;\n                ").concat(o.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(9*e,";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            // bgColor = texture2D(u_image[0], v_texcoord);\n            gl_FragColor = bgColor;\n        }\n        ");return A(t,t.FRAGMENT_SHADER,r)}},{key:"initTexture",value:function(){var t=this.instance.gl,e=1;if(this.vapFrameParser&&this.vapFrameParser.srcData){var r,n=this.vapFrameParser.srcData;for(r in n){var o=n[r];this.textures.push(C(t,e,o.img));var i=t.getUniformLocation(this.program,"u_image".concat(e));t.uniform1i(i,e),this.vapFrameParser.textureMap[o.srcId]=e++}var a=t.createTexture();t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,a),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,1,1,0,t.RGBA,t.UNSIGNED_BYTE,null),this.videoTexture=C(t,e);a=t.getUniformLocation(this.program,"u_image_video");t.uniform1i(a,e)}}},{key:"initVideoTexture",value:function(){var t,e,r,n,o,i,a,s,c,u,l,h=this.instance.gl,f=h.createBuffer();this.buffers.push(f),this.vapFrameParser&&this.vapFrameParser.config&&this.vapFrameParser.config.info&&(l=[],t=(a=this.vapFrameParser.config.info).videoW,u=a.videoH,e=(i=v(a.rgbFrame,4))[0],r=i[1],n=i[2],c=i[3],o=(s=v(a.aFrame,4))[0],i=s[1],a=s[2],s=s[3],c=P(e,r,n,c,t,u),u=P(o,i,a,s,t,u),l.push.apply(l,[-1,1,c[0],c[3],u[0],u[3]]),l.push.apply(l,[1,1,c[1],c[3],u[1],u[3]]),l.push.apply(l,[-1,-1,c[0],c[2],u[0],u[2]]),l.push.apply(l,[1,-1,c[1],c[2],u[1],u[2]]),l=new Float32Array(l),h.bindBuffer(h.ARRAY_BUFFER,f),h.bufferData(h.ARRAY_BUFFER,l,h.STATIC_DRAW),this.aPosition=h.getAttribLocation(this.program,"a_position"),h.enableVertexAttribArray(this.aPosition),this.aTexCoord=h.getAttribLocation(this.program,"a_texCoord"),h.enableVertexAttribArray(this.aTexCoord),this.aAlphaTexCoord=h.getAttribLocation(this.program,"a_alpha_texCoord"),h.enableVertexAttribArray(this.aAlphaTexCoord),l=l.BYTES_PER_ELEMENT,h.vertexAttribPointer(this.aPosition,2,h.FLOAT,!1,6*l,0),h.vertexAttribPointer(this.aTexCoord,2,h.FLOAT,!1,6*l,2*l),h.vertexAttribPointer(this.aAlphaTexCoord,2,h.FLOAT,!1,6*l,4*l))}},{key:"drawFrame",value:function(t,e){var p=this,r=e&&0<=e.mediaTime?e.mediaTime:this.video.currentTime,n=Math.round(r*this.options.fps)+this.options.offset;(this.events.frame||[]).forEach(function(t){t(n+1,r)});var o,d,i=this.instance.gl;i&&(i.clear(i.COLOR_BUFFER_BIT),this.vapFrameParser&&(o=this.vapFrameParser.getFrame(n),d=[],o&&o.obj&&o.obj.forEach(function(t,e){d[d.length]=+p.vapFrameParser.textureMap[t.srcId];var r=p.vapFrameParser.config.info,n=r.videoW,o=r.videoH,i=v(r.rgbFrame,2),a=i[0],s=i[1],c=v(t.frame,4),u=c[0],l=c[1],h=c[2],f=c[3],r=v(t.mFrame,4),i=r[0],c=r[1],t=r[2],r=r[3],f=P(u+a,l+s,h,f,n,o),o=P(i,c,t,r,n,o);d=d.concat(f).concat(o)}),o=9*(i.getParameter(i.MAX_TEXTURE_IMAGE_UNITS)-1),d=d.concat(new Array(o-d.length).fill(0)),this._imagePos=this._imagePos||i.getUniformLocation(this.program,"image_pos"),i.uniform1fv(this._imagePos,new Float32Array(d))),i.texImage2D(i.TEXTURE_2D,0,i.RGB,i.RGB,i.UNSIGNED_BYTE,this.video),i.drawArrays(i.TRIANGLE_STRIP,0,4)),m(_(a.prototype),"drawFrame",this).call(this,t,e)}},{key:"destroy",value:function(){var t=this.instance,e=t.canvas,r=t.gl;if(this.textures&&this.textures.length)for(var n=0;n<this.textures.length;n++)r.deleteTexture(this.textures[n]);e&&e.parentNode&&e.parentNode.removeChild(e),m(_(a.prototype),"destroy",this).call(this),this.clearMemoryCache()}},{key:"clearMemoryCache",value:function(){k&&clearTimeout(k),k=setTimeout(function(){R={}},18e5)}}]),a}();return function(t){if(function(){if(void 0!==e)return e;try{if(!window.WebGLRenderingContext)return!1;var t=document.createElement("canvas"),t=t.getContext("webgl")||t.getContext("experimental-webgl");e=!!t,t=null}catch(t){e=!1}return e}())return new L(Object.assign({},t));throw new Error("your browser not support webgl")}});
diff --git a/web/package.json b/web/package.json
index 2362ccdf..a95196dd 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "video-animation-player",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "webgl动画特效组件",
   "main": "dist/vap.js",
   "scripts": {
diff --git a/web/src/webgl-render-vap.ts b/web/src/webgl-render-vap.ts
index bde65f38..f034accf 100644
--- a/web/src/webgl-render-vap.ts
+++ b/web/src/webgl-render-vap.ts
@@ -286,7 +286,7 @@ export default class WebglRenderVap extends VapVideo {
   drawFrame(_, info) {
     const timePoint = (info && info.mediaTime >= 0) ? info.mediaTime : this.video.currentTime
     const frame = Math.round(timePoint * this.options.fps) + this.options.offset;
-    const frameCbs = this.events['frame']
+    const frameCbs = this.events['frame'] || []
     frameCbs.forEach(cb => {
       cb(frame + 1, timePoint)
     })