alpha-video-player-js 1.0.1 → 1.0.3

package/dist/alpha-video-player-js.d.ts

@@ -34,7 +34,7 @@ declare class Render {
     constructor(config: IConfig);
     get playing(): boolean;
     get loop(): boolean;
-    play(config?: IOptionalConfig): void;
+    play(config?: IOptionalConfig): Promise<void>;
     pause(): void;
     destroy(): void;
     reset(): void;
@@ -45,4 +45,5 @@ declare class Render {
     setPlaybackRate(playbackRate: number): void;
 }
 
-export { type IConfig, Render as default };
+export { Render as default };
+export type { IConfig };

package/dist/alpha-video-player-js.js

@@ -1 +1 @@
-var t=function(e,o){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])},t(e,o)};function e(e,o){if("function"!=typeof o&&null!==o)throw new TypeError("Class extends value "+String(o)+" is not a constructor or null");function i(){this.constructor=e}t(e,o),e.prototype=null===o?Object.create(o):(i.prototype=o.prototype,new i)}"function"==typeof SuppressedError&&SuppressedError;var o=window.devicePixelRatio,i={landscape:{front:[0,1,.5,1,0,0,.5,0],back:[.5,1,1,1,.5,0,1,0]},portrait:{front:[0,1,1,1,0,.5,1,.5],back:[0,.5,1,.5,0,0,1,0]}},n=function(t,e,o){return"landscape"===t?"width"===e?2*o:o:"width"===e?o:2*o},r=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},a=window,s=a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame||a.oRequestAnimationFrame||a.msRequestAnimationFrame,d=a.cancelAnimationFrame||a.mozCancelAnimationFrame||a.webkitCancelAnimationFrame||a.msCancelAnimationFrame,h=function(){function t(t){if(this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=0,this.onCanPlayTimes=1,this.canPlay=!1,this.adaptAnimation=null,this.playing=!1,!t.container||!t.src)throw new Error("[alpha-video-player-js]: container or src can not be empty！");this.setConfig(t),this.container=t.container,this.canvas=function(t,e,i){var n=t.offsetWidth,r=t.offsetHeight,a=document.createElement("canvas");return a.width=(e||n)*o,a.height=(i||r)*o,a.style.width="100%",a.style.height="100%",a.style.pointerEvents="none",t.appendChild(a),a}(this.container,t.width,t.height);var e=this.canvas,i=e.width,n=e.height;this.canvasWidth=i,this.canvasHeight=n,this.initVideo()}return Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.video)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.setConfig=function(t){t&&(this.config=Object.assign({playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",autoShow:!1,autoClear:!0,autoDestroy:!1,debug:!1,videoFrame:!1},this.config||{},t))},t.prototype.initVideo=function(){var t=this.config,e=t.src,o=t.playbackRate,i=t.muted,n=t.loop,r=this.video=document.createElement("video");r.src=e,r.crossOrigin="anonymous",r.autoplay=!1,r.preload="auto",r.playbackRate=o,r.loop=n,r.muted=i,r.setAttribute("playsinline",""),r.setAttribute("webkit-playsinline",""),r.setAttribute("x-webkit-airplay",""),r.style.display="none",document.body.appendChild(r),r.load(),this.bindInstance(),this.addEvent()},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this.drawFrame.bind(this);this.adaptAnimation||(this.adaptAnimation=this.initAdaptAnimation()),this.animationId=this.adaptAnimation(t),this.playing=!0},t.prototype.initAdaptAnimation=function(){var t=this,e=this.config,o=e.videoFrame,i=e.fps;if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&o)return function(e){return t.video.requestVideoFrameCallback(e)};if(s){if(i){var n=-1;return function(e){return n++,s((function(){if(n%(60/i)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return s(t)}}return function(t){return window.setTimeout(t,1e3/i)}},t.prototype.cancelDrawFrame=function(){var t=this.animationId,e=this.config;t&&(this.video.cancelVideoFrameCallback&&e.videoFrame?this.video.cancelVideoFrameCallback(t):d?d(t):window.clearTimeout(t),this.animationId=0,this.playing=!1)},t.prototype.play=function(t){r(this.video),t&&this.setConfig(t),this.video.play(),this.drawFrame()},t.prototype.pause=function(){r(this.video),this.video.pause(),this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){r(this.video),this.video.src=t,this.video.load(),this.video.currentTime=0},t.prototype.setCurrentTime=function(t){r(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){r(this.video),this.video.muted=t},t.prototype.setLoop=function(t){r(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){r(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t=this.video,e=this.config,o=t.videoWidth,i=t.videoHeight;this.videoWidth=o,this.videoHeight=i,e.onLoad&&e.onLoad()},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,t.autoShow&&this.drawFrameOnce(),1===this.onCanPlayTimes&&t.onCanPlay&&t.onCanPlay(),1!==this.onCanPlayTimes&&t.loop&&t.onLoop&&t.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t=this.config;t.onPause&&t.onPause()},t.prototype.onEnded=function(){var t=this.config;this.video.currentTime=0,this.cancelDrawFrame(),t.onEnded&&t.onEnded()},t.prototype.onError=function(t){var e=this.config;e.onError&&e.onError(t),this.destroy()},t.prototype.destroy=function(){try{var t=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video.pause(),this.video.src="",this.video.load(),this.video.parentNode.removeChild(this.video),t.onDestroy&&t.onDestroy(),this.config=null,this.container=null,this.video=null,this.animationId=null}catch(t){}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,o=t.onCanplay,i=t.onPlay,n=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=o.bind(this),this.onPlay=i.bind(this),this.onPause=n.bind(this),this.onEnded=r.bind(this),this.onError=a.bind(this)},t.prototype.addEvent=function(){var t=this,e=t.video,o=t.onLoad,i=t.onCanplay,n=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",o),e.addEventListener("canplaythrough",i),e.addEventListener("play",n),e.addEventListener("pause",r),e.addEventListener("ended",a),e.addEventListener("error",s)},t.prototype.removeEvent=function(){var t=this,e=t.video,o=t.onLoad,i=t.onCanplay,n=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.removeEventListener("loadedmetadata",o),e.removeEventListener("play",n),e.removeEventListener("canplaythrough",i),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s)},t}(),c=function(t){function o(e){var o=this,i=e.onInitSuccess,n=e.onInitError;try{(o=t.call(this,e)||this).initWebGLRender(),i&&i()}catch(t){n&&n(t)}return o}return e(o,t),o.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.disable(e.BLEND),e.blendFuncSeparate(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA,e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA),e.viewport(0,0,t.width,t.height),this.vertexShader=this.initShader(e.VERTEX_SHADER,"#define GLSLIFY 1\nattribute vec4 a_Position;attribute vec2 a_Video_Texture_Position;attribute vec2 a_Alpha_Video_Texture_Position;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_Position=a_Position;v_Video_Texture_Position=a_Video_Texture_Position;v_Alpha_Video_Texture_Position=a_Alpha_Video_Texture_Position;}"),this.fragmentShader=this.initShader(e.FRAGMENT_SHADER,"precision lowp float;\n#define GLSLIFY 1\nuniform sampler2D u_Sampler;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_FragColor=vec4(texture2D(u_Sampler,v_Video_Texture_Position).rgb,texture2D(u_Sampler,v_Alpha_Video_Texture_Position).r);}"),this.program=this.initProgram(),this.texture=this.initTexture(),this.vertexBuffer=this.initVertexBuffer()},o.prototype.initShader=function(t,e){var o=this.gl,i=o.createShader(t);if(o.shaderSource(i,e),o.compileShader(i),this.config.debug){var n=o.getShaderParameter(i,o.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,n),n||console.log("[alpha-video-player-js] shader compile fail: ",t,o.getShaderInfoLog(i))}return i},o.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),this.config.debug){var o=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",o),o||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},o.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();return t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,1),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),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),e},o.prototype.initVertexBuffer=function(){var t=this,e=t.gl,o=t.program,n=t.config,r=function(t,e){var o="front"===e,n=[-1,1,1,1,-1,-1,1,-1],r=i[t][o?"front":"back"],a=i[t][o?"back":"front"],s=[];return n.forEach((function(t,e){e%2==0&&(s=s.concat(n.slice(e,e+2)).concat(r.slice(e,e+2)).concat(a.slice(e,e+2)))})),new Float32Array(s)}(n.orientation,n.side),a=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,r,e.STATIC_DRAW);var s=r.BYTES_PER_ELEMENT,d=e.getAttribLocation(o,"a_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*s,0),e.enableVertexAttribArray(d);var h=e.getAttribLocation(o,"a_Video_Texture_Position");e.vertexAttribPointer(h,2,e.FLOAT,!1,6*s,2*s),e.enableVertexAttribArray(h);var c=e.getAttribLocation(o,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(c,2,e.FLOAT,!1,6*s,4*s),e.enableVertexAttribArray(c);var l=e.getUniformLocation(o,"u_Sampler");return e.uniform1i(l,0),a},o.prototype.drawFrameOnce=function(){var t=this.gl,e=this.video;t&&e&&this.canPlay&&(t.clear(t.COLOR_BUFFER_BIT),t.texImage2D(t.TEXTURE_2D,0,t.RGB,t.RGB,t.UNSIGNED_BYTE,e),t.drawArrays(t.TRIANGLE_STRIP,0,4))},o.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},o.prototype.onEnded=function(){var e=this.gl,o=this.config;o.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),o.autoDestroy&&this.destroy()},o.prototype.destroy=function(){var e,o=this,i=o.canvas,n=o.gl,r=o.vertexShader,a=o.fragmentShader,s=o.texture,d=o.vertexBuffer,h=o.program;i&&n&&(t.prototype.destroy.call(this),i.parentNode.removeChild(i),n.detachShader(h,r),n.deleteShader(r),n.detachShader(h,a),n.deleteShader(a),n.deleteTexture(s),n.deleteBuffer(d),n.deleteProgram(h),null===(e=n.getExtension("WEBGL_lose_context"))||void 0===e||e.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},o}(h),l=function(t){function o(e){var o=this,i=e.onInitSuccess,n=e.onInitError;try{(o=t.call(this,e)||this).initCanvasRender(),i&&i()}catch(t){n&&n(t)}return o}return e(o,t),o.prototype.initCanvasRender=function(){var t=this,e=t.canvas,o=t.canvasWidth,i=t.canvasHeight,r=t.config,a=r.orientation,s=r.side,d=document.createElement("canvas");this.tempCanvasWidth=d.width=n(a,"width",o),this.tempCanvasHeight=d.height=n(a,"height",i);var h=function(t,e,o,i){var n=[0,0,o,i],r=[o,0,o,i],a=[0,0,o,i],s=[0,i,o,i],d=n,h=r;return"landscape"===t?(d="front"===e?n:r,h="front"===e?r:n):(d="front"===e?a:s,h="front"===e?s:a),{imageCoords:d,alhpaImageCoords:h}}(a,s,o,i),c=h.imageCoords,l=h.alhpaImageCoords;this.imageCoords=c,this.alhpaImageCoords=l,this.context2d=e.getContext("2d"),this.tempContext2d=d.getContext("2d")},o.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,o=t.tempContext2d,i=t.video,n=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.tempCanvasWidth,d=t.tempCanvasHeight,h=t.imageCoords,c=t.alhpaImageCoords;if(e&&o&&i&&n&&r&&a&&s&&d&&h&&c){o.drawImage(i,0,0,r,a,0,0,s,d);for(var l=o.getImageData.apply(o,h),p=l.data,u=o.getImageData.apply(o,c).data,v=3;v<p.length;v+=4)p[v]=u[v-1];e.putImageData(l,0,0)}},o.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},o.prototype.onEnded=function(){var e=this,o=e.context2d,i=e.canvasWidth,n=e.canvasHeight,r=e.config;r.autoClear&&o.clearRect(0,0,i,n),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},o.prototype.destroy=function(){var e=this.canvas;e&&(t.prototype.destroy.call(this),e.parentNode.removeChild(e),this.canvas=null,this.context2d=null,this.tempContext2d=null,this.tempCanvasWidth=null,this.tempCanvasHeight=null,this.imageCoords=null,this.alhpaImageCoords=null)},o}(h),p=function(){function t(t){if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new c(t);else{if(!document.createElement("canvas").getContext("2d"))throw new Error("[alpha-video-player-js]: Your browser does not support play. Please upgrade your browser and try again.");this.render=new l(t)}var e}return Object.defineProperty(t.prototype,"playing",{get:function(){return this.render.playing},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){return this.render.loop},enumerable:!1,configurable:!0}),t.prototype.play=function(t){this.render.play(t)},t.prototype.pause=function(){this.render.pause()},t.prototype.destroy=function(){this.render.destroy()},t.prototype.reset=function(){this.render.reset()},t.prototype.setSrc=function(t){this.render.setSrc(t)},t.prototype.setCurrentTime=function(t){this.render.setCurrentTime(t)},t.prototype.setMute=function(t){this.render.setMute(t)},t.prototype.setLoop=function(t){this.render.setLoop(t)},t.prototype.setPlaybackRate=function(t){this.render.setPlaybackRate(t)},t}();export{p as default};
+var t=function(e,o){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])},t(e,o)};function e(e,o){if("function"!=typeof o&&null!==o)throw new TypeError("Class extends value "+String(o)+" is not a constructor or null");function n(){this.constructor=e}t(e,o),e.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}function o(t,e,o,n){return new(o||(o=Promise))(function(i,r){function a(t){try{d(n.next(t))}catch(t){r(t)}}function s(t){try{d(n.throw(t))}catch(t){r(t)}}function d(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o(function(t){t(e)})).then(a,s)}d((n=n.apply(t,e||[])).next())})}function n(t,e){var o,n,i,r={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]},a=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return a.next=s(0),a.throw=s(1),a.return=s(2),"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(d){return function(s){if(o)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(r=0)),r;)try{if(o=1,n&&(i=2&s[0]?n.return:s[0]?n.throw||((i=n.return)&&i.call(n),0):n.next)&&!(i=i.call(n,s[1])).done)return i;switch(n=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return r.label++,{value:s[1],done:!1};case 5:r.label++,n=s[1],s=[0];continue;case 7:s=r.ops.pop(),r.trys.pop();continue;default:if(!(i=r.trys,(i=i.length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){r=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){r.label=s[1];break}if(6===s[0]&&r.label<i[1]){r.label=i[1],i=s;break}if(i&&r.label<i[2]){r.label=i[2],r.ops.push(s);break}i[2]&&r.ops.pop(),r.trys.pop();continue}s=e.call(t,r)}catch(t){s=[6,t],n=0}finally{o=i=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,d])}}}"function"==typeof SuppressedError&&SuppressedError;var i=window.devicePixelRatio,r={landscape:{front:[0,1,.5,1,0,0,.5,0],back:[.5,1,1,1,.5,0,1,0]},portrait:{front:[0,1,1,1,0,.5,1,.5],back:[0,.5,1,.5,0,0,1,0]}},a=function(t,e,o){return"landscape"===t?"width"===e?2*o:o:"width"===e?o:2*o},s=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},d=window,c=d.requestAnimationFrame||d.webkitRequestAnimationFrame||d.mozRequestAnimationFrame||d.oRequestAnimationFrame||d.msRequestAnimationFrame,h=d.cancelAnimationFrame||d.mozCancelAnimationFrame||d.webkitCancelAnimationFrame||d.msCancelAnimationFrame,l=function(){function t(t){if(this.canvasWidth=0,this.canvasHeight=0,this.videoWidth=0,this.videoHeight=0,this.animationId=0,this.onCanPlayTimes=1,this.canPlay=!1,this.adaptAnimation=null,this.playing=!1,!t.container||!t.src)throw new Error("[alpha-video-player-js]: container or src can not be empty！");this.setConfig(t),this.container=t.container,this.canvas=function(t,e,o){var n=t.offsetWidth,r=t.offsetHeight,a=document.createElement("canvas");return a.width=(e||n)*i,a.height=(o||r)*i,a.style.width="100%",a.style.height="100%",a.style.pointerEvents="none",t.appendChild(a),a}(this.container,t.width,t.height);var e=this.canvas,o=e.width,n=e.height;this.canvasWidth=o,this.canvasHeight=n,this.initVideo()}return Object.defineProperty(t.prototype,"loop",{get:function(){var t;return(null===(t=this.video)||void 0===t?void 0:t.loop)||!1},enumerable:!1,configurable:!0}),t.prototype.setConfig=function(t){t&&(this.config=Object.assign({playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",autoShow:!1,autoClear:!0,autoDestroy:!1,debug:!1,videoFrame:!1},this.config||{},t))},t.prototype.initVideo=function(){var t=this.config,e=t.src,o=t.playbackRate,n=t.muted,i=t.loop,r=this.video=document.createElement("video");r.src=e,r.crossOrigin="anonymous",r.autoplay=!1,r.preload="auto",r.playbackRate=o,r.loop=i,r.muted=n,r.setAttribute("playsinline",""),r.setAttribute("webkit-playsinline",""),r.setAttribute("x-webkit-airplay",""),r.style.position="fixed",r.style.width="1px",r.style.height="1px",r.style.opacity="0",r.style.left="-9999px",document.body.appendChild(r),r.load(),this.bindInstance(),this.addEvent()},t.prototype.drawFrameOnce=function(){},t.prototype.drawFrame=function(){var t=this.drawFrame.bind(this);this.adaptAnimation||(this.adaptAnimation=this.initAdaptAnimation()),this.animationId=this.adaptAnimation(t),this.playing=!0},t.prototype.initAdaptAnimation=function(){var t=this,e=this.config,o=e.videoFrame,n=e.fps;if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&o)return function(e){return t.video.requestVideoFrameCallback(e)};if(c){if(n){var i=-1;return function(e){return i++,c(function(){if(i%(60/n)==0)return e();t.animationId=t.adaptAnimation(e)})}}return function(t){return c(t)}}return function(t){return window.setTimeout(t,1e3/n)}},t.prototype.cancelDrawFrame=function(){var t=this.animationId,e=this.config;t&&(this.video.cancelVideoFrameCallback&&e.videoFrame?this.video.cancelVideoFrameCallback(t):h?h(t):window.clearTimeout(t),this.animationId=0,this.playing=!1)},t.prototype.play=function(t){return o(this,void 0,void 0,function(){var e,o;return n(this,function(n){switch(n.label){case 0:s(this.video),t&&this.setConfig(t),n.label=1;case 1:return n.trys.push([1,3,,4]),[4,this.video.play()];case 2:return e=n.sent(),this.drawFrame(),[2,e];case 3:throw o=n.sent(),new Error("[alpha-video-player-js]: play failed, error: ".concat(o));case 4:return[2]}})})},t.prototype.pause=function(){s(this.video),this.video.pause(),this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){s(this.video),this.video.src=t,this.video.load(),this.video.currentTime=0},t.prototype.setCurrentTime=function(t){s(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){s(this.video),this.video.muted=t},t.prototype.setLoop=function(t){s(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){s(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t=this.video,e=this.config,o=t.videoWidth,n=t.videoHeight;this.videoWidth=o,this.videoHeight=n,e.onLoad&&e.onLoad()},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,t.autoShow&&this.drawFrameOnce(),1===this.onCanPlayTimes&&t.onCanPlay&&t.onCanPlay(),1!==this.onCanPlayTimes&&t.loop&&t.onLoop&&t.onLoop(),this.onCanPlayTimes++},t.prototype.onPlay=function(){var t=this.config;t.onPlay&&t.onPlay()},t.prototype.onPause=function(){var t=this.config;t.onPause&&t.onPause()},t.prototype.onEnded=function(){var t=this.config;this.video.currentTime=0,this.cancelDrawFrame(),t.onEnded&&t.onEnded()},t.prototype.onError=function(t){var e=this.config;e.onError&&e.onError(t),this.destroy()},t.prototype.destroy=function(){try{var t=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video.pause(),this.video.src="",this.video.load(),this.video.parentNode.removeChild(this.video),t.onDestroy&&t.onDestroy(),this.config=null,this.container=null,this.video=null,this.animationId=null}catch(t){}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,o=t.onCanplay,n=t.onPlay,i=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=o.bind(this),this.onPlay=n.bind(this),this.onPause=i.bind(this),this.onEnded=r.bind(this),this.onError=a.bind(this)},t.prototype.addEvent=function(){var t=this,e=t.video,o=t.onLoad,n=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",o),e.addEventListener("canplaythrough",n),e.addEventListener("play",i),e.addEventListener("pause",r),e.addEventListener("ended",a),e.addEventListener("error",s)},t.prototype.removeEvent=function(){var t=this,e=t.video,o=t.onLoad,n=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.removeEventListener("loadedmetadata",o),e.removeEventListener("play",i),e.removeEventListener("canplaythrough",n),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s)},t}(),u=function(t){function o(e){var o=this,n=e.onInitSuccess,i=e.onInitError;try{(o=t.call(this,e)||this).initWebGLRender(),n&&n()}catch(t){i&&i(t)}return o}return e(o,t),o.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.disable(e.BLEND),e.blendFuncSeparate(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA,e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA),e.viewport(0,0,t.width,t.height),this.vertexShader=this.initShader(e.VERTEX_SHADER,"#define GLSLIFY 1\nattribute vec4 a_Position;attribute vec2 a_Video_Texture_Position;attribute vec2 a_Alpha_Video_Texture_Position;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_Position=a_Position;v_Video_Texture_Position=a_Video_Texture_Position;v_Alpha_Video_Texture_Position=a_Alpha_Video_Texture_Position;}"),this.fragmentShader=this.initShader(e.FRAGMENT_SHADER,"precision lowp float;\n#define GLSLIFY 1\nuniform sampler2D u_Sampler;varying vec2 v_Video_Texture_Position;varying vec2 v_Alpha_Video_Texture_Position;void main(){gl_FragColor=vec4(texture2D(u_Sampler,v_Video_Texture_Position).rgb,texture2D(u_Sampler,v_Alpha_Video_Texture_Position).r);}"),this.program=this.initProgram(),this.texture=this.initTexture(),this.vertexBuffer=this.initVertexBuffer()},o.prototype.initShader=function(t,e){var o=this.gl,n=o.createShader(t);if(o.shaderSource(n,e),o.compileShader(n),this.config.debug){var i=o.getShaderParameter(n,o.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,i),i||console.log("[alpha-video-player-js] shader compile fail: ",t,o.getShaderInfoLog(n))}return n},o.prototype.initProgram=function(){var t=this.gl,e=t.createProgram();if(t.attachShader(e,this.vertexShader),t.attachShader(e,this.fragmentShader),t.linkProgram(e),this.config.debug){var o=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",o),o||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},o.prototype.initTexture=function(){var t=this.gl,e=t.createTexture();return t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,1),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),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),e},o.prototype.initVertexBuffer=function(){var t=this,e=t.gl,o=t.program,n=t.config,i=function(t,e){var o="front"===e,n=[-1,1,1,1,-1,-1,1,-1],i=r[t][o?"front":"back"],a=r[t][o?"back":"front"],s=[];return n.forEach(function(t,e){e%2==0&&(s=s.concat(n.slice(e,e+2)).concat(i.slice(e,e+2)).concat(a.slice(e,e+2)))}),new Float32Array(s)}(n.orientation,n.side),a=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,i,e.STATIC_DRAW);var s=i.BYTES_PER_ELEMENT,d=e.getAttribLocation(o,"a_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*s,0),e.enableVertexAttribArray(d);var c=e.getAttribLocation(o,"a_Video_Texture_Position");e.vertexAttribPointer(c,2,e.FLOAT,!1,6*s,2*s),e.enableVertexAttribArray(c);var h=e.getAttribLocation(o,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(h,2,e.FLOAT,!1,6*s,4*s),e.enableVertexAttribArray(h);var l=e.getUniformLocation(o,"u_Sampler");return e.uniform1i(l,0),a},o.prototype.drawFrameOnce=function(){var t=this.gl,e=this.video;t&&e&&this.canPlay&&(t.clear(t.COLOR_BUFFER_BIT),t.texImage2D(t.TEXTURE_2D,0,t.RGB,t.RGB,t.UNSIGNED_BYTE,e),t.drawArrays(t.TRIANGLE_STRIP,0,4))},o.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},o.prototype.onEnded=function(){var e=this.gl,o=this.config;o.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),o.autoDestroy&&this.destroy()},o.prototype.destroy=function(){var e,o=this,n=o.canvas,i=o.gl,r=o.vertexShader,a=o.fragmentShader,s=o.texture,d=o.vertexBuffer,c=o.program;n&&i&&(t.prototype.destroy.call(this),n.parentNode.removeChild(n),i.detachShader(c,r),i.deleteShader(r),i.detachShader(c,a),i.deleteShader(a),i.deleteTexture(s),i.deleteBuffer(d),i.deleteProgram(c),null===(e=i.getExtension("WEBGL_lose_context"))||void 0===e||e.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},o}(l),p=function(t){function o(e){var o=this,n=e.onInitSuccess,i=e.onInitError;try{(o=t.call(this,e)||this).initCanvasRender(),n&&n()}catch(t){i&&i(t)}return o}return e(o,t),o.prototype.initCanvasRender=function(){var t=this,e=t.canvas,o=t.canvasWidth,n=t.canvasHeight,i=t.config,r=i.orientation,s=i.side,d=document.createElement("canvas");this.tempCanvasWidth=d.width=a(r,"width",o),this.tempCanvasHeight=d.height=a(r,"height",n);var c=function(t,e,o,n){var i=[0,0,o,n],r=[o,0,o,n],a=[0,0,o,n],s=[0,n,o,n],d=i,c=r;return"landscape"===t?(d="front"===e?i:r,c="front"===e?r:i):(d="front"===e?a:s,c="front"===e?s:a),{imageCoords:d,alhpaImageCoords:c}}(r,s,o,n),h=c.imageCoords,l=c.alhpaImageCoords;this.imageCoords=h,this.alhpaImageCoords=l,this.context2d=e.getContext("2d"),this.tempContext2d=d.getContext("2d")},o.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,o=t.tempContext2d,n=t.video,i=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.tempCanvasWidth,d=t.tempCanvasHeight,c=t.imageCoords,h=t.alhpaImageCoords;if(e&&o&&n&&i&&r&&a&&s&&d&&c&&h){o.drawImage(n,0,0,r,a,0,0,s,d);for(var l=o.getImageData.apply(o,c),u=l.data,p=o.getImageData.apply(o,h).data,f=3;f<u.length;f+=4)u[f]=p[f-1];e.putImageData(l,0,0)}},o.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},o.prototype.onEnded=function(){var e=this,o=e.context2d,n=e.canvasWidth,i=e.canvasHeight,r=e.config;r.autoClear&&o.clearRect(0,0,n,i),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},o.prototype.destroy=function(){var e=this.canvas;e&&(t.prototype.destroy.call(this),e.parentNode.removeChild(e),this.canvas=null,this.context2d=null,this.tempContext2d=null,this.tempCanvasWidth=null,this.tempCanvasHeight=null,this.imageCoords=null,this.alhpaImageCoords=null)},o}(l),f=function(){function t(t){if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new u(t);else{if(!document.createElement("canvas").getContext("2d"))throw new Error("[alpha-video-player-js]: Your browser does not support play. Please upgrade your browser and try again.");this.render=new p(t)}var e}return Object.defineProperty(t.prototype,"playing",{get:function(){return this.render.playing},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"loop",{get:function(){return this.render.loop},enumerable:!1,configurable:!0}),t.prototype.play=function(t){return o(this,void 0,void 0,function(){return n(this,function(e){return[2,this.render.play(t)]})})},t.prototype.pause=function(){this.render.pause()},t.prototype.destroy=function(){this.render.destroy()},t.prototype.reset=function(){this.render.reset()},t.prototype.setSrc=function(t){this.render.setSrc(t)},t.prototype.setCurrentTime=function(t){this.render.setCurrentTime(t)},t.prototype.setMute=function(t){this.render.setMute(t)},t.prototype.setLoop=function(t){this.render.setLoop(t)},t.prototype.setPlaybackRate=function(t){this.render.setPlaybackRate(t)},t}();export{f as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alpha-video-player-js",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Web 视频动画特效播放 sdk",
   "main": "dist/alpha-video-player-js.js",
   "types": "dist/alpha-video-player-js.d.ts",
@@ -20,10 +20,7 @@
   ],
   "author": "https://github.com/trp1119",
   "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "https://git.yupaopao.com/terminal/fe/infrastructure/alpha-video-player-js"
-  },
+  "repository": "https://github.com/trp1119/alpha-video-player-js",
   "homepage": "https://trp1119.github.io/alpha-video-player-js-demo",
   "files": [
     "dist",