alpha-video-player-js 1.0.3 → 1.1.0

package/README.md

@@ -6,7 +6,7 @@ alpha-video-player-js 是一个 Web 视频动画特效播放 sdk，可以通过
 
 - 零依赖
 
-- 接入体积小（3.95K）
+- 接入体积小（gzip 约 5KB 量级，以构建产物为准）
 - 还原度高
 - 兼容 WebGL（GPU） 及 Canvas（CPU） 降级，性能优异
 - 支持 横向 - RGB 通道视频在前、横向 - RGB 通道视频在后、纵向 - RGB 通道视频在前、纵向 - RGB 通道视频在后 四类视频融合
@@ -21,7 +21,7 @@ npm i alpha-video-player-js
 
 ### 创建实例
 
-```bash
+```ts
 import AlphaVideoPlayerJs from 'alpha-video-player-js'
 
 const player = new AlphaVideoPlayerJs(config)
@@ -31,35 +31,37 @@ const player = new AlphaVideoPlayerJs(config)
 
 | 参数          | 含义                               | 默认值    | 是否必传 |
 | ------------- | ---------------------------------- | --------- | -------- |
-| container     | dom 容器                           | null      | 是       |
-| src           | 播放地址                           | ''        | 是       |
-| width         | 渲染宽度（默认取父级宽度）                              | -         | 否       |
-| height        | 渲染高度（默认取父级高度）                              | -         | 否       |
-| muted         | 是否静音播放                                            | true      | 否       |
-| loop          | 是否循环播放                                            | false     | 否       |
-| playbackRate  | 播放速率                                                | 1         | 否       |
-| fps           | 播放帧率                                                | 0        | 否       |
-| videoFrame    | 是否启用 requestVideoFrameCallback 渲染                 | false     | 否       |
-| orientation   | 视频排布方式 landscape \| portrait                      | landscape | 否       |
-| side          | RGB 通道视频位置 front \| back                          | front     | 否       |
-| autoShow      | 是否自动显示（初始化后自动显示第一帧）                  | false     | 否       |
-| autoClear     | 是否自动清除（播放完毕后自动清除显示内容）              | true      | 否       |
-| autoDestroy   | 是否自动销毁（播放完毕后自动销毁 canvas 与 video 元素） | false     | 否       |
-| debug         | 是否开启 sdk 错误打印                                   | false     | 否       |
-| onInitSuccess | 初始化成功回调                                          | -         | 否       |
-| onInitError   | 初始化失败回调                                          | -         | 否       |
-| onLoad        | 加载完毕回调                                            | -         | 否       |
-| onCanPlay     | 可以播放回调                                            | -         | 否       |
-| onPlay        | 开始播放回调                                            | -         | 否       |
-| onLood        | 循环播放回调                                            | -         | 否       |
-| onPause       | 暂停播放回调                                            | -         | 否       |
-| onEnded       | 结束播放回调                                            | -         | 否       |
-| onError       | 播放错误回调                                            | -         | 否       |
-| onDestroy | 销毁实例回调 | - | 否 |
+| container     | dom 容器                           | -         | 是       |
+| src           | 播放地址                           | -         | 否（无则仅创建画布，可后续 `setSrc`） |
+| width         | 渲染宽度（默认取容器宽度）         | -         | 否       |
+| height        | 渲染高度（默认取容器高度）         | -         | 否       |
+| crossOrigin   | 跨域视频：`anonymous` \| `use-credentials` | `anonymous` | 否   |
+| muted         | 是否静音播放                       | true      | 否       |
+| loop          | 是否循环播放                       | false     | 否       |
+| playbackRate  | 播放速率                           | 1         | 否       |
+| fps           | 限帧（0 表示不额外限帧）           | 0         | 否       |
+| videoFrame    | 是否使用 `requestVideoFrameCallback` 驱动帧循环 | false | 否 |
+| orientation   | 视频排布方式 `landscape` \| `portrait` | landscape | 否   |
+| side          | RGB 通道区域位置 `front` \| `back` | front     | 否       |
+| autoShow      | 可播放后自动绘制首帧               | false     | 否       |
+| autoClear     | 播放结束后是否清空画布             | true      | 否       |
+| autoDestroy   | 播放结束后是否自动销毁实例         | false     | 否       |
+| autoResize    | 元数据加载后是否按视频比例调整 canvas：`contain` \| `width` \| `height` \| `false` | `contain` | 否 |
+| debug         | 是否在控制台输出调试信息           | false     | 否       |
+| onInitSuccess | 初始化成功回调                     | -         | 否       |
+| onInitError   | 初始化失败回调                     | -         | 否       |
+| onLoad        | 元数据加载完成回调                 | -         | 否       |
+| onCanPlay     | 可以播放回调（首次）               | -         | 否       |
+| onPlay        | 开始播放回调                       | -         | 否       |
+| onLoop        | 循环再次可播放时回调               | -         | 否       |
+| onPause       | 暂停播放回调                       | -         | 否       |
+| onEnded       | 结束播放回调                       | -         | 否       |
+| onError       | 错误回调，参数为 `unknown`（见下「错误处理」） | - | 否 |
+| onDestroy     | 销毁实例回调                       | -         | 否       |
 
 ### 实例属性
 
-| 方法    | 含义       | 类型    |
+| 属性    | 含义       | 类型    |
 | ------- | ---------- | ------- |
 | playing | 是否播放中 | Boolean |
 | loop    | 是否循环   | Boolean |
@@ -68,15 +70,162 @@ const player = new AlphaVideoPlayerJs(config)
 
 | 方法                          | 含义             | 参数                |
 | ----------------------------- | ---------------- | ------------------- |
-| play()                        | 播放/继续播放    | -                   |
+| play(config?)                 | 播放/继续播放，返回 `Promise`；失败时 reject 原始错误 | 可选，同实例参数的部分字段 |
 | pause()                       | 暂停播放         | -                   |
 | destroy()                     | 销毁实例         | -                   |
-| reset()                       | 重置播放进度     | -                      |
-| setSrc(src)                   | 设置播放地址     | 播放地址（string）     |
-| setCurrentTime(time)          | 设置播放进度     | 播放进度（number，秒） |
-| setMute(muted)                | 设置是否静音播放 | 是否静音（boolean）    |
-| setLoop(loop)                 | 设置是否循环播放 | 是否循环（boolean）    |
-| setPlaybackRate(playbackRate) | 设置播放倍速     | 播放倍速（number）     |
+| reset()                       | 重置播放进度     | -                   |
+| setSrc(src)                   | 设置播放地址     | 播放地址（string）  |
+| setCurrentTime(time)          | 设置播放进度     | 秒（number）        |
+| setMute(muted)                | 设置是否静音     | boolean             |
+| setLoop(loop)                 | 设置是否循环     | boolean             |
+| setPlaybackRate(playbackRate) | 设置播放倍速     | number              |
+
+### 错误处理
+
+- **`play()` 失败**（如自动播放策略拒绝等）：`Promise` 会被 **reject**，reject 的值为浏览器抛出的**原始错误**（常见为 `DOMException`）；同时若配置了 **`onError`**，也会用**同一引用**调用一次。
+- **`<video>` 媒体错误**（地址无效、解码失败、跨域等）：通过 **`onError`** 传入（多为 `Event` / `ErrorEvent`），随后实例会 **`destroy()`**。
+
+示例（在创建实例时传入 `onError`）：
+
+```ts
+const player = new AlphaVideoPlayerJs({
+  container,
+  src,
+  onError: (err) => {
+    console.error(err)
+  },
+})
+
+try {
+  await player.play()
+} catch (e) {
+  // play 失败时与 onError 为同一 err 引用
+  console.error(e)
+}
+```
+
+## 框架组件
+
+除了 JS 版本外，还提供了 Vue 3、Vue 2（2.7+）、React 的封装组件，通过子路径导入：
+
+### Vue 3
+
+```ts
+import AlphaVideoPlayer from 'alpha-video-player-js/vue3'
+```
+
+```html
+<template>
+  <!-- 需要自定义定位/背景时，在外层包一层；组件根节点仅为无 class 的 div -->
+  <div class="player-wrap" :style="{ width: '250px', height: '133px' }">
+    <AlphaVideoPlayer
+      ref="playerRef"
+      src="https://example.com/video.mp4"
+      :width="250"
+      :height="133"
+      :muted="true"
+      :loop="false"
+      :playback-rate="playbackRate"
+      orientation="landscape"
+      side="front"
+      @initSuccess="onReady"
+      @error="onError"
+    />
+  </div>
+  <!-- 倍速滑块：须用 v-model.number，否则 range 会得到字符串，与 playbackRate 的 Number 类型不符 -->
+  <input v-model.number="playbackRate" type="range" min="0.5" max="2" step="0.5" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import AlphaVideoPlayer from 'alpha-video-player-js/vue3'
+
+const playerRef = ref()
+const playbackRate = ref(1)
+
+const onReady = () => {
+  playerRef.value?.play()
+}
+
+const onError = (e: unknown) => {
+  console.error(e)
+}
+</script>
+```
+
+### Vue 2（2.7+）
+
+```ts
+import AlphaVideoPlayer from 'alpha-video-player-js/vue2'
+```
+
+```html
+<template>
+  <AlphaVideoPlayer
+    ref="player"
+    src="https://example.com/video.mp4"
+    :muted="true"
+    orientation="landscape"
+    side="front"
+    @init-success="onReady"
+    @error="onError"
+  />
+</template>
+
+<script>
+import AlphaVideoPlayer from 'alpha-video-player-js/vue2'
+
+export default {
+  components: { AlphaVideoPlayer },
+  methods: {
+    onReady() {
+      this.$refs.player.play()
+    },
+    onError(e) {
+      console.error(e)
+    },
+  },
+}
+</script>
+```
+
+### React
+
+```tsx
+import { useRef } from 'react'
+import AlphaVideoPlayer from 'alpha-video-player-js/react'
+import type { AlphaVideoPlayerRef } from 'alpha-video-player-js/react'
+
+function App() {
+  const playerRef = useRef<AlphaVideoPlayerRef>(null)
+
+  return (
+    <AlphaVideoPlayer
+      ref={playerRef}
+      src="https://example.com/video.mp4"
+      muted
+      orientation="landscape"
+      side="front"
+      onInitSuccess={() => playerRef.current?.play()}
+      onError={(e) => console.error(e)}
+    />
+  )
+}
+```
+
+### 组件说明
+
+- **Props**：与 JS 版的配置项一一对应（去除 `container`，组件内部自动管理）。其中 **`playbackRate` 为 `number`**，在模板里绑定表单控件时勿传入字符串（例如 `<input type="range">` 配合 **`v-model.number`**，或 `:playback-rate="Number(x)"`）。
+- **根节点与布局**：组件只渲染一个**无业务 class** 的根 `div`；若需要与业务一致的绝对定位、背景图上的对齐等，请在**外层元素**上写样式，并通过 **`width` / `height` props**（及 `orientation` / `side` 等）控制画布与拼合逻辑。
+- **销毁后再次挂载**：调用 ref 上的 `destroy()` 后实例已清空，不会在同一次挂载中自动重新 `init`；需要再次初始化时，可对组件使用 **`:key` 递增**或 **`v-if` 切换**，以重新挂载（演示项目 `alpha-video-player-js-demo` 的 `Item.vue` 即采用 `:key` 方案）。
+- **事件/回调**：
+  - Vue 3：`@initSuccess`、`@initError`、`@load`、`@canPlay`、`@play`、`@loop`、`@pause`、`@ended`、`@error`、`@destroy`
+  - Vue 2：`@init-success`、`@init-error`、`@load`、`@can-play`、`@play`、`@loop`、`@pause`、`@ended`、`@error`、`@destroy`
+  - React：`onInitSuccess`、`onInitError`、`onLoad`、`onCanPlay`、`onPlay`、`onLoop`、`onPause`、`onEnded`、`onError`、`onDestroy`
+- **实例方法**（通过 ref 调用）：`play()`、`pause()`、`destroy()`、`reset()`、`setSrc()`、`setCurrentTime()`、`setMute()`、`setLoop()`、`setPlaybackRate()`、`getPlayer()`
+- **响应式 props**：`src`、`muted`、`loop`、`playbackRate` 变更时自动同步到播放器实例。
+- **生命周期**：组件挂载时自动初始化，卸载时自动销毁。
+- **peerDependencies**：vue / react / react-dom 均为可选，只需安装你使用的框架。
 
 ## 原理
 
@@ -85,4 +234,4 @@ const player = new AlphaVideoPlayerJs(config)
 
 ## 示例
 
-https://trp1119.github.io/alpha-video-player-js-demo
+https://trp1119.github.io/alpha-video-player-js-demo

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

@@ -2,7 +2,9 @@ interface IConfig {
     container: HTMLElement;
     width?: number;
     height?: number;
-    src: string;
+    src?: string;
+    /** 跨域视频资源；默认 anonymous */
+    crossOrigin?: 'anonymous' | 'use-credentials';
     muted?: boolean;
     loop?: boolean;
     playbackRate?: number;
@@ -14,6 +16,14 @@ interface IConfig {
     autoShow?: boolean;
     autoClear?: boolean;
     autoDestroy?: boolean;
+    /**
+     * 视频加载后按比例自适应 canvas 尺寸（默认 'contain'）。
+     * - 'contain'：自动判断，确保视频完整填入 canvas 盒子（类似 object-fit: contain）
+     * - 'width'：固定宽度，按视频比例自动调整高度
+     * - 'height'：固定高度，按视频比例自动调整宽度
+     * - false：不自适应，canvas 保持初始尺寸
+     */
+    autoResize?: 'width' | 'height' | 'contain' | false;
     onInitSuccess?: () => void;
     onInitError?: (e: ErrorEvent) => void;
     onLoad?: () => void;
@@ -22,7 +32,8 @@ interface IConfig {
     onLoop?: () => void;
     onPause?: () => void;
     onEnded?: () => void;
-    onError?: (e: ErrorEvent) => void;
+    /** 媒体 error 事件或 play() 拒绝等，原样传入 */
+    onError?: (e: unknown) => void;
     onDestroy?: () => void;
 }
 type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
@@ -45,5 +56,4 @@ declare class Render {
     setPlaybackRate(playbackRate: number): void;
 }
 
-export { Render as default };
-export type { IConfig };
+export { type IConfig, Render as default };

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 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};
+var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};function e(e,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}function i(t,e,i,n){return new(i||(i=Promise))((function(o,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?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}d((n=n.apply(t,e||[])).next())}))}function n(t,e){var i,n,o,r,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(d){return function(s){if(i)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(i=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,n=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){a.label=s[1];break}if(6===s[0]&&a.label<o[1]){a.label=o[1],o=s;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(s);break}o[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],n=0}finally{i=o=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 o=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},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={landscape_front:function(t,e){return[0,0,t,e]},landscape_back:function(t,e){return[t,0,t,e]},portrait_front:function(t,e){return[0,0,t,e]},portrait_back:function(t,e){return[0,e,t,e]}},s=function(t,e,i,n){var o="front"===e?"back":"front";return{imageCoords:a["".concat(t,"_").concat(e)](i,n),alphaImageCoords:a["".concat(t,"_").concat(o)](i,n)}},d=function(t,e,i){return"landscape"===t?"width"===e?2*i:i:"width"===e?i:2*i},h=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},c={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},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)throw new Error("[alpha-video-player-js]: container 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=o(),s=e||n,d=i||r;s&&d||console.warn("[alpha-video-player-js]: container size is 0. Make sure the container is mounted and has a non-zero size before creating the player.");var h=document.createElement("canvas");return h.width=s*a,h.height=d*a,h.style.width="100%",h.style.height="100%",h.style.pointerEvents="none",t.appendChild(h),h}(this.container,t.width,t.height);var e=this.canvas,i=e.width,n=e.height;this.canvasWidth=i,this.canvasHeight=n,t.src&&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({},c,this.config||{},t))},t.prototype.initVideo=function(){var t=this.config,e=t.src,i=t.playbackRate,n=t.muted,o=t.loop,r=t.crossOrigin,a=this.video=document.createElement("video");a.src=e,a.crossOrigin=null!=r?r:"anonymous",a.autoplay=!1,a.preload="auto",a.playbackRate=i,a.loop=o,a.muted=n,n&&a.setAttribute("muted",""),a.setAttribute("playsinline",""),a.setAttribute("webkit-playsinline",""),a.setAttribute("x-webkit-airplay",""),a.style.position="absolute",a.style.width="0",a.style.height="0",a.style.overflow="hidden",a.style.pointerEvents="none",document.body.appendChild(a),this.bindInstance(),this.addEvent(),a.load()},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,i=e.videoFrame,n=e.fps,o=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}();if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&i)return function(e){return t.video.requestVideoFrameCallback(e)};if(o){if(n){var r=-1;return function(e){return r++,o((function(){if(r%(60/n)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return o(t)}}var a=n>0?1e3/n:16;return function(t){return window.setTimeout(t,a)}},t.prototype.cancelDrawFrame=function(){var t,e=this.animationId,i=this.config;if(e){var n=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}();(null===(t=this.video)||void 0===t?void 0:t.cancelVideoFrameCallback)&&i.videoFrame?this.video.cancelVideoFrameCallback(e):n?n(e):window.clearTimeout(e),this.animationId=0,this.playing=!1}},t.prototype.play=function(t){var e,o;return i(this,void 0,void 0,(function(){var i,r;return n(this,(function(n){switch(n.label){case 0:h(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 i=n.sent(),this.drawFrame(),[2,i];case 3:throw r=n.sent(),null===(o=(e=this.config).onError)||void 0===o||o.call(e,r),r;case 4:return[2]}}))}))},t.prototype.pause=function(){h(this.video),this.video.pause(),this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){h(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){h(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){h(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){h(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,i,n=this,r=n.video,a=n.config,s=n.canvas;if(this.videoWidth=r.videoWidth,this.videoHeight=r.videoHeight,a.autoResize&&s&&r.videoWidth>0&&r.videoHeight>0){var d=o(),h=(t=r.videoWidth,e=r.videoHeight,("landscape"===(i=a.orientation)?t/2:t)/("portrait"===i?e/2:e)),c=s.width/d,l=s.height/d,u=void 0;if("width"===a.autoResize||"height"===a.autoResize)u=a.autoResize;else u=h>=c/l?"width":"height";var p="width"===u?c:Math.round(l*h),v="width"===u?Math.round(c/h):l,f=v*d;p*d===this.canvasWidth&&f===this.canvasHeight||(!function(t,e,i){var n=o();t.width=e*n,t.height=i*n,t.style.width=e+"px",t.style.height=i+"px"}(s,p,v),this.canvasWidth=s.width,this.canvasHeight=s.height,this.onCanvasResized())}a.onLoad&&a.onLoad()},t.prototype.onCanvasResized=function(){},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,i,n=this.config,o=this.video;n.debug&&console.error(null!==(e=null==o?void 0:o.error)&&void 0!==e?e:t),null===(i=n.onError)||void 0===i||i.call(n,t),this.destroy()},t.prototype.destroy=function(){var t,e,i;try{var n=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video&&(this.video.pause(),this.video.src="",this.video.load(),null===(t=this.video.parentNode)||void 0===t||t.removeChild(this.video)),null===(e=null==n?void 0:n.onDestroy)||void 0===e||e.call(n),this.config=null,this.container=null,this.video=null,this.animationId=0}catch(t){(null===(i=this.config)||void 0===i?void 0:i.debug)&&console.error("[alpha-video-player-js] destroy error:",t)}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,i=t.onCanplay,n=t.onPlay,o=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=i.bind(this),this.onPlay=n.bind(this),this.onPause=o.bind(this),this.onEnded=r.bind(this),this.onError=a.bind(this)},t.prototype.addEvent=function(){var t=this,e=t.video,i=t.onLoad,n=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",i),e.addEventListener("canplaythrough",n),e.addEventListener("play",o),e.addEventListener("pause",r),e.addEventListener("ended",a),e.addEventListener("error",s)},t.prototype.removeEvent=function(){var t=this,e=t.video,i=t.onLoad,n=t.onCanplay,o=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",i),e.removeEventListener("play",o),e.removeEventListener("canplaythrough",n),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),u=function(t){function i(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{(i=t.call(this,e)||this).initWebGLRender(),n&&n()}catch(t){if(!o)throw t;o(t)}return i}return e(i,t),i.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.enable(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()},i.prototype.initShader=function(t,e){var i=this.gl,n=i.createShader(t);if(i.shaderSource(n,e),i.compileShader(n),this.config.debug){var o=i.getShaderParameter(n,i.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,o),o||console.log("[alpha-video-player-js] shader compile fail: ",t,i.getShaderInfoLog(n))}return n},i.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 i=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",i),i||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},i.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},i.prototype.initVertexBuffer=function(){var t=this,e=t.gl,i=t.program,n=t.config,o=function(t,e){var i="front"===e,n=[-1,1,1,1,-1,-1,1,-1],o=r[t][i?"front":"back"],a=r[t][i?"back":"front"],s=[];return n.forEach((function(t,e){e%2==0&&(s=s.concat(n.slice(e,e+2)).concat(o.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,o,e.STATIC_DRAW);var s=o.BYTES_PER_ELEMENT,d=e.getAttribLocation(i,"a_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*s,0),e.enableVertexAttribArray(d);var h=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(h,2,e.FLOAT,!1,6*s,2*s),e.enableVertexAttribArray(h);var c=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(c,2,e.FLOAT,!1,6*s,4*s),e.enableVertexAttribArray(c);var l=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(l,0),a},i.prototype.onCanvasResized=function(){var t=this.gl,e=this.canvas;t&&e&&t.viewport(0,0,e.width,e.height)},i.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))},i.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},i.prototype.onEnded=function(){var e=this.gl,i=this.config;i.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),i.autoDestroy&&this.destroy()},i.prototype.destroy=function(){var e,i,n=this,o=n.canvas,r=n.gl,a=n.vertexShader,s=n.fragmentShader,d=n.texture,h=n.vertexBuffer,c=n.program;o&&r&&(t.prototype.destroy.call(this),null===(e=o.parentNode)||void 0===e||e.removeChild(o),r.detachShader(c,a),r.deleteShader(a),r.detachShader(c,s),r.deleteShader(s),r.deleteTexture(d),r.deleteBuffer(h),r.deleteProgram(c),null===(i=r.getExtension("WEBGL_lose_context"))||void 0===i||i.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},i}(l),p=function(t){function i(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{(i=t.call(this,e)||this).initCanvasRender(),n&&n()}catch(t){if(!o)throw t;o(t)}return i}return e(i,t),i.prototype.initCanvasRender=function(){var t=this,e=t.canvas,i=t.canvasWidth,n=t.canvasHeight,o=t.config,r=o.orientation,a=o.side,h=document.createElement("canvas");this.tempCanvasWidth=h.width=d(r,"width",i),this.tempCanvasHeight=h.height=d(r,"height",n);var c=s(r,a,i,n),l=c.imageCoords,u=c.alphaImageCoords;this.imageCoords=l,this.alphaImageCoords=u,this.context2d=e.getContext("2d"),this.tempContext2d=h.getContext("2d")},i.prototype.onCanvasResized=function(){var t=this,e=t.canvasWidth,i=t.canvasHeight,n=t.config,o=n.orientation,r=n.side,a=document.createElement("canvas");this.tempCanvasWidth=a.width=d(o,"width",e),this.tempCanvasHeight=a.height=d(o,"height",i);var h=s(o,r,e,i),c=h.imageCoords,l=h.alphaImageCoords;this.imageCoords=c,this.alphaImageCoords=l,this.context2d=this.canvas.getContext("2d"),this.tempContext2d=a.getContext("2d")},i.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,i=t.tempContext2d,n=t.video,o=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.tempCanvasWidth,d=t.tempCanvasHeight,h=t.imageCoords,c=t.alphaImageCoords;if(e&&i&&n&&o&&r&&a&&s&&d&&h&&c){i.drawImage(n,0,0,r,a,0,0,s,d);for(var l=i.getImageData.apply(i,h),u=l.data,p=i.getImageData.apply(i,c).data,v=3;v<u.length;v+=4)u[v]=p[v-3];e.putImageData(l,0,0)}},i.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},i.prototype.onEnded=function(){var e=this,i=e.context2d,n=e.canvasWidth,o=e.canvasHeight,r=e.config;r.autoClear&&i.clearRect(0,0,n,o),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},i.prototype.destroy=function(){var e,i=this.canvas;i&&(t.prototype.destroy.call(this),null===(e=i.parentNode)||void 0===e||e.removeChild(i),this.canvas=null,this.context2d=null,this.tempContext2d=null,this.tempCanvasWidth=null,this.tempCanvasHeight=null,this.imageCoords=null,this.alphaImageCoords=null)},i}(l),v=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 i(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{v as default};

package/dist/react.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+
+interface IConfig {
+    container: HTMLElement;
+    width?: number;
+    height?: number;
+    src?: string;
+    /** 跨域视频资源；默认 anonymous */
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    muted?: boolean;
+    loop?: boolean;
+    playbackRate?: number;
+    fps?: number;
+    orientation?: IOrientation;
+    side?: ISide;
+    videoFrame?: boolean;
+    debug?: boolean;
+    autoShow?: boolean;
+    autoClear?: boolean;
+    autoDestroy?: boolean;
+    /**
+     * 视频加载后按比例自适应 canvas 尺寸（默认 'contain'）。
+     * - 'contain'：自动判断，确保视频完整填入 canvas 盒子（类似 object-fit: contain）
+     * - 'width'：固定宽度，按视频比例自动调整高度
+     * - 'height'：固定高度，按视频比例自动调整宽度
+     * - false：不自适应，canvas 保持初始尺寸
+     */
+    autoResize?: 'width' | 'height' | 'contain' | false;
+    onInitSuccess?: () => void;
+    onInitError?: (e: ErrorEvent) => void;
+    onLoad?: () => void;
+    onCanPlay?: () => void;
+    onPlay?: () => void;
+    onLoop?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    /** 媒体 error 事件或 play() 拒绝等，原样传入 */
+    onError?: (e: unknown) => void;
+    onDestroy?: () => void;
+}
+type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
+type IOrientation = 'landscape' | 'portrait';
+type ISide = 'front' | 'back';
+
+declare class Render {
+    private render;
+    constructor(config: IConfig);
+    get playing(): boolean;
+    get loop(): boolean;
+    play(config?: IOptionalConfig): Promise<void>;
+    pause(): void;
+    destroy(): void;
+    reset(): void;
+    setSrc(src: string): void;
+    setCurrentTime(time: number): void;
+    setMute(muted: boolean): void;
+    setLoop(loop: boolean): void;
+    setPlaybackRate(playbackRate: number): void;
+}
+
+interface AlphaVideoPlayerProps {
+    src?: string;
+    width?: number;
+    height?: number;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    muted?: boolean;
+    loop?: boolean;
+    playbackRate?: number;
+    fps?: number;
+    orientation?: IOrientation;
+    side?: ISide;
+    videoFrame?: boolean;
+    debug?: boolean;
+    autoShow?: boolean;
+    autoClear?: boolean;
+    autoDestroy?: boolean;
+    autoResize?: 'width' | 'height' | 'contain' | false;
+    onInitSuccess?: () => void;
+    onInitError?: (e: ErrorEvent) => void;
+    onLoad?: () => void;
+    onCanPlay?: () => void;
+    onPlay?: () => void;
+    onLoop?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onError?: (e: unknown) => void;
+    onDestroy?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface AlphaVideoPlayerRef {
+    play: () => Promise<void> | undefined;
+    pause: () => void;
+    destroy: () => void;
+    reset: () => void;
+    setSrc: (src: string) => void;
+    setCurrentTime: (time: number) => void;
+    setMute: (muted: boolean) => void;
+    setLoop: (loop: boolean) => void;
+    setPlaybackRate: (rate: number) => void;
+    getPlayer: () => Render | null;
+}
+declare const AlphaVideoPlayer: React.ForwardRefExoticComponent<AlphaVideoPlayerProps & React.RefAttributes<AlphaVideoPlayerRef>>;
+
+export { type AlphaVideoPlayerProps, type AlphaVideoPlayerRef, AlphaVideoPlayer as default };

package/dist/react.js

@@ -0,0 +1 @@
+import t,{forwardRef as e,useRef as n,useEffect as o,useImperativeHandle as i}from"react";var r=function(t,e){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},r(t,e)};function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function s(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{u(o.next(t))}catch(t){r(t)}}function s(t){try{u(o.throw(t))}catch(t){r(t)}}function u(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}u((o=o.apply(t,e||[])).next())}))}function u(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(u){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(n=1,o&&(i=2&s[0]?o.return:s[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,s[1])).done)return i;switch(o=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,o=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){a.label=s[1];break}if(6===s[0]&&a.label<i[1]){a.label=i[1],i=s;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(s);break}i[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],o=0}finally{n=i=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,u])}}}"function"==typeof SuppressedError&&SuppressedError;var l=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},d={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]}},c={landscape_front:function(t,e){return[0,0,t,e]},landscape_back:function(t,e){return[t,0,t,e]},portrait_front:function(t,e){return[0,0,t,e]},portrait_back:function(t,e){return[0,e,t,e]}},h=function(t,e,n,o){var i="front"===e?"back":"front";return{imageCoords:c["".concat(t,"_").concat(e)](n,o),alphaImageCoords:c["".concat(t,"_").concat(i)](n,o)}},p=function(t,e,n){return"landscape"===t?"width"===e?2*n:n:"width"===e?n:2*n},v=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},f={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},y=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)throw new Error("[alpha-video-player-js]: container can not be empty！");this.setConfig(t),this.container=t.container,this.canvas=function(t,e,n){var o=t.offsetWidth,i=t.offsetHeight,r=l(),a=e||o,s=n||i;a&&s||console.warn("[alpha-video-player-js]: container size is 0. Make sure the container is mounted and has a non-zero size before creating the player.");var u=document.createElement("canvas");return u.width=a*r,u.height=s*r,u.style.width="100%",u.style.height="100%",u.style.pointerEvents="none",t.appendChild(u),u}(this.container,t.width,t.height);var e=this.canvas,n=e.width,o=e.height;this.canvasWidth=n,this.canvasHeight=o,t.src&&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({},f,this.config||{},t))},t.prototype.initVideo=function(){var t=this.config,e=t.src,n=t.playbackRate,o=t.muted,i=t.loop,r=t.crossOrigin,a=this.video=document.createElement("video");a.src=e,a.crossOrigin=null!=r?r:"anonymous",a.autoplay=!1,a.preload="auto",a.playbackRate=n,a.loop=i,a.muted=o,o&&a.setAttribute("muted",""),a.setAttribute("playsinline",""),a.setAttribute("webkit-playsinline",""),a.setAttribute("x-webkit-airplay",""),a.style.position="absolute",a.style.width="0",a.style.height="0",a.style.overflow="hidden",a.style.pointerEvents="none",document.body.appendChild(a),this.bindInstance(),this.addEvent(),a.load()},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,n=e.videoFrame,o=e.fps,i=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}();if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&n)return function(e){return t.video.requestVideoFrameCallback(e)};if(i){if(o){var r=-1;return function(e){return r++,i((function(){if(r%(60/o)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return i(t)}}var a=o>0?1e3/o:16;return function(t){return window.setTimeout(t,a)}},t.prototype.cancelDrawFrame=function(){var t,e=this.animationId,n=this.config;if(e){var o=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}();(null===(t=this.video)||void 0===t?void 0:t.cancelVideoFrameCallback)&&n.videoFrame?this.video.cancelVideoFrameCallback(e):o?o(e):window.clearTimeout(e),this.animationId=0,this.playing=!1}},t.prototype.play=function(t){var e,n;return s(this,void 0,void 0,(function(){var o,i;return u(this,(function(r){switch(r.label){case 0:v(this.video),t&&this.setConfig(t),r.label=1;case 1:return r.trys.push([1,3,,4]),[4,this.video.play()];case 2:return o=r.sent(),this.drawFrame(),[2,o];case 3:throw i=r.sent(),null===(n=(e=this.config).onError)||void 0===n||n.call(e,i),i;case 4:return[2]}}))}))},t.prototype.pause=function(){v(this.video),this.video.pause(),this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){v(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){v(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){v(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){v(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,n,o=this,i=o.video,r=o.config,a=o.canvas;if(this.videoWidth=i.videoWidth,this.videoHeight=i.videoHeight,r.autoResize&&a&&i.videoWidth>0&&i.videoHeight>0){var s=l(),u=(t=i.videoWidth,e=i.videoHeight,("landscape"===(n=r.orientation)?t/2:t)/("portrait"===n?e/2:e)),d=a.width/s,c=a.height/s,h=void 0;if("width"===r.autoResize||"height"===r.autoResize)h=r.autoResize;else h=u>=d/c?"width":"height";var p="width"===h?d:Math.round(c*u),v="width"===h?Math.round(d/u):c,f=v*s;p*s===this.canvasWidth&&f===this.canvasHeight||(!function(t,e,n){var o=l();t.width=e*o,t.height=n*o,t.style.width=e+"px",t.style.height=n+"px"}(a,p,v),this.canvasWidth=a.width,this.canvasHeight=a.height,this.onCanvasResized())}r.onLoad&&r.onLoad()},t.prototype.onCanvasResized=function(){},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,n,o=this.config,i=this.video;o.debug&&console.error(null!==(e=null==i?void 0:i.error)&&void 0!==e?e:t),null===(n=o.onError)||void 0===n||n.call(o,t),this.destroy()},t.prototype.destroy=function(){var t,e,n;try{var o=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video&&(this.video.pause(),this.video.src="",this.video.load(),null===(t=this.video.parentNode)||void 0===t||t.removeChild(this.video)),null===(e=null==o?void 0:o.onDestroy)||void 0===e||e.call(o),this.config=null,this.container=null,this.video=null,this.animationId=0}catch(t){(null===(n=this.config)||void 0===n?void 0:n.debug)&&console.error("[alpha-video-player-js] destroy error:",t)}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,n=t.onCanplay,o=t.onPlay,i=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=n.bind(this),this.onPlay=o.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,n=t.onLoad,o=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",n),e.addEventListener("canplaythrough",o),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,n=t.onLoad,o=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",n),e.removeEventListener("play",i),e.removeEventListener("canplaythrough",o),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),m=function(t){function e(e){var n=this,o=e.onInitSuccess,i=e.onInitError;try{(n=t.call(this,e)||this).initWebGLRender(),o&&o()}catch(t){if(!i)throw t;i(t)}return n}return a(e,t),e.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.enable(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()},e.prototype.initShader=function(t,e){var n=this.gl,o=n.createShader(t);if(n.shaderSource(o,e),n.compileShader(o),this.config.debug){var i=n.getShaderParameter(o,n.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,i),i||console.log("[alpha-video-player-js] shader compile fail: ",t,n.getShaderInfoLog(o))}return o},e.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 n=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",n),n||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},e.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},e.prototype.initVertexBuffer=function(){var t=this,e=t.gl,n=t.program,o=t.config,i=function(t,e){var n="front"===e,o=[-1,1,1,1,-1,-1,1,-1],i=d[t][n?"front":"back"],r=d[t][n?"back":"front"],a=[];return o.forEach((function(t,e){e%2==0&&(a=a.concat(o.slice(e,e+2)).concat(i.slice(e,e+2)).concat(r.slice(e,e+2)))})),new Float32Array(a)}(o.orientation,o.side),r=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,i,e.STATIC_DRAW);var a=i.BYTES_PER_ELEMENT,s=e.getAttribLocation(n,"a_Position");e.vertexAttribPointer(s,2,e.FLOAT,!1,6*a,0),e.enableVertexAttribArray(s);var u=e.getAttribLocation(n,"a_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6*a,2*a),e.enableVertexAttribArray(u);var l=e.getAttribLocation(n,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6*a,4*a),e.enableVertexAttribArray(l);var c=e.getUniformLocation(n,"u_Sampler");return e.uniform1i(c,0),r},e.prototype.onCanvasResized=function(){var t=this.gl,e=this.canvas;t&&e&&t.viewport(0,0,e.width,e.height)},e.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))},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this.gl,n=this.config;n.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),n.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,n,o=this,i=o.canvas,r=o.gl,a=o.vertexShader,s=o.fragmentShader,u=o.texture,l=o.vertexBuffer,d=o.program;i&&r&&(t.prototype.destroy.call(this),null===(e=i.parentNode)||void 0===e||e.removeChild(i),r.detachShader(d,a),r.deleteShader(a),r.detachShader(d,s),r.deleteShader(s),r.deleteTexture(u),r.deleteBuffer(l),r.deleteProgram(d),null===(n=r.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},e}(y),g=function(t){function e(e){var n=this,o=e.onInitSuccess,i=e.onInitError;try{(n=t.call(this,e)||this).initCanvasRender(),o&&o()}catch(t){if(!i)throw t;i(t)}return n}return a(e,t),e.prototype.initCanvasRender=function(){var t=this,e=t.canvas,n=t.canvasWidth,o=t.canvasHeight,i=t.config,r=i.orientation,a=i.side,s=document.createElement("canvas");this.tempCanvasWidth=s.width=p(r,"width",n),this.tempCanvasHeight=s.height=p(r,"height",o);var u=h(r,a,n,o),l=u.imageCoords,d=u.alphaImageCoords;this.imageCoords=l,this.alphaImageCoords=d,this.context2d=e.getContext("2d"),this.tempContext2d=s.getContext("2d")},e.prototype.onCanvasResized=function(){var t=this,e=t.canvasWidth,n=t.canvasHeight,o=t.config,i=o.orientation,r=o.side,a=document.createElement("canvas");this.tempCanvasWidth=a.width=p(i,"width",e),this.tempCanvasHeight=a.height=p(i,"height",n);var s=h(i,r,e,n),u=s.imageCoords,l=s.alphaImageCoords;this.imageCoords=u,this.alphaImageCoords=l,this.context2d=this.canvas.getContext("2d"),this.tempContext2d=a.getContext("2d")},e.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,n=t.tempContext2d,o=t.video,i=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.tempCanvasWidth,u=t.tempCanvasHeight,l=t.imageCoords,d=t.alphaImageCoords;if(e&&n&&o&&i&&r&&a&&s&&u&&l&&d){n.drawImage(o,0,0,r,a,0,0,s,u);for(var c=n.getImageData.apply(n,l),h=c.data,p=n.getImageData.apply(n,d).data,v=3;v<h.length;v+=4)h[v]=p[v-3];e.putImageData(c,0,0)}},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this,n=e.context2d,o=e.canvasWidth,i=e.canvasHeight,r=e.config;r.autoClear&&n.clearRect(0,0,o,i),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,n=this.canvas;n&&(t.prototype.destroy.call(this),null===(e=n.parentNode)||void 0===e||e.removeChild(n),this.canvas=null,this.context2d=null,this.tempContext2d=null,this.tempCanvasWidth=null,this.tempCanvasHeight=null,this.imageCoords=null,this.alphaImageCoords=null)},e}(y),_=function(){function t(t){if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new m(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 g(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 s(this,void 0,void 0,(function(){return u(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}(),E=e((function(e,r){var a=n(null),s=n(null),u=n(e);return u.current=e,o((function(){var t,e,n;if(a.current){var o=u.current;return s.current=new _({container:a.current,src:o.src,width:o.width,height:o.height,crossOrigin:o.crossOrigin,muted:null===(t=o.muted)||void 0===t||t,loop:null!==(e=o.loop)&&void 0!==e&&e,playbackRate:null!==(n=o.playbackRate)&&void 0!==n?n:1,fps:o.fps,orientation:o.orientation,side:o.side,videoFrame:o.videoFrame,debug:o.debug,autoShow:o.autoShow,autoClear:o.autoClear,autoDestroy:o.autoDestroy,autoResize:o.autoResize,onInitSuccess:function(){var t,e;return null===(e=(t=u.current).onInitSuccess)||void 0===e?void 0:e.call(t)},onInitError:function(t){var e,n;return null===(n=(e=u.current).onInitError)||void 0===n?void 0:n.call(e,t)},onLoad:function(){var t,e;return null===(e=(t=u.current).onLoad)||void 0===e?void 0:e.call(t)},onCanPlay:function(){var t,e;return null===(e=(t=u.current).onCanPlay)||void 0===e?void 0:e.call(t)},onPlay:function(){var t,e;return null===(e=(t=u.current).onPlay)||void 0===e?void 0:e.call(t)},onLoop:function(){var t,e;return null===(e=(t=u.current).onLoop)||void 0===e?void 0:e.call(t)},onPause:function(){var t,e;return null===(e=(t=u.current).onPause)||void 0===e?void 0:e.call(t)},onEnded:function(){var t,e;return null===(e=(t=u.current).onEnded)||void 0===e?void 0:e.call(t)},onError:function(t){var e,n;return null===(n=(e=u.current).onError)||void 0===n?void 0:n.call(e,t)},onDestroy:function(){var t,e;return null===(e=(t=u.current).onDestroy)||void 0===e?void 0:e.call(t)}}),function(){var t;null===(t=s.current)||void 0===t||t.destroy(),s.current=null}}}),[]),o((function(){var t;null!=e.src&&(null===(t=s.current)||void 0===t||t.setSrc(e.src))}),[e.src]),o((function(){var t,n;null===(t=s.current)||void 0===t||t.setMute(null===(n=e.muted)||void 0===n||n)}),[e.muted]),o((function(){var t,n;null===(t=s.current)||void 0===t||t.setLoop(null!==(n=e.loop)&&void 0!==n&&n)}),[e.loop]),o((function(){var t,n;null===(t=s.current)||void 0===t||t.setPlaybackRate(null!==(n=e.playbackRate)&&void 0!==n?n:1)}),[e.playbackRate]),i(r,(function(){return{play:function(){var t;return null===(t=s.current)||void 0===t?void 0:t.play()},pause:function(){var t;return null===(t=s.current)||void 0===t?void 0:t.pause()},destroy:function(){var t;null===(t=s.current)||void 0===t||t.destroy(),s.current=null},reset:function(){var t;return null===(t=s.current)||void 0===t?void 0:t.reset()},setSrc:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setSrc(t)},setCurrentTime:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setCurrentTime(t)},setMute:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setMute(t)},setLoop:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setLoop(t)},setPlaybackRate:function(t){var e;return null===(e=s.current)||void 0===e?void 0:e.setPlaybackRate(t)},getPlayer:function(){return s.current}}})),t.createElement("div",{ref:a,className:e.className,style:e.style})}));E.displayName="AlphaVideoPlayer";export{E as default};

package/dist/vue2.d.ts

@@ -0,0 +1,3 @@
+declare const AlphaVideoPlayer: any;
+
+export { AlphaVideoPlayer as default };

package/dist/vue2.js

@@ -0,0 +1 @@
+import t from"vue";var e=function(t,n){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},e(t,n)};function n(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}function o(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{d(o.next(t))}catch(t){r(t)}}function s(t){try{d(o.throw(t))}catch(t){r(t)}}function d(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}d((o=o.apply(t,e||[])).next())}))}function i(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(d){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(n=1,o&&(i=2&s[0]?o.return:s[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,s[1])).done)return i;switch(o=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,o=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){a.label=s[1];break}if(6===s[0]&&a.label<i[1]){a.label=i[1],i=s;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(s);break}i[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],o=0}finally{n=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 r=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},a={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]}},s={landscape_front:function(t,e){return[0,0,t,e]},landscape_back:function(t,e){return[t,0,t,e]},portrait_front:function(t,e){return[0,0,t,e]},portrait_back:function(t,e){return[0,e,t,e]}},d=function(t,e,n,o){var i="front"===e?"back":"front";return{imageCoords:s["".concat(t,"_").concat(e)](n,o),alphaImageCoords:s["".concat(t,"_").concat(i)](n,o)}},l=function(t,e,n){return"landscape"===t?"width"===e?2*n:n:"width"===e?n:2*n},u=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},c={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},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)throw new Error("[alpha-video-player-js]: container can not be empty！");this.setConfig(t),this.container=t.container,this.canvas=function(t,e,n){var o=t.offsetWidth,i=t.offsetHeight,a=r(),s=e||o,d=n||i;s&&d||console.warn("[alpha-video-player-js]: container size is 0. Make sure the container is mounted and has a non-zero size before creating the player.");var l=document.createElement("canvas");return l.width=s*a,l.height=d*a,l.style.width="100%",l.style.height="100%",l.style.pointerEvents="none",t.appendChild(l),l}(this.container,t.width,t.height);var e=this.canvas,n=e.width,o=e.height;this.canvasWidth=n,this.canvasHeight=o,t.src&&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({},c,this.config||{},t))},t.prototype.initVideo=function(){var t=this.config,e=t.src,n=t.playbackRate,o=t.muted,i=t.loop,r=t.crossOrigin,a=this.video=document.createElement("video");a.src=e,a.crossOrigin=null!=r?r:"anonymous",a.autoplay=!1,a.preload="auto",a.playbackRate=n,a.loop=i,a.muted=o,o&&a.setAttribute("muted",""),a.setAttribute("playsinline",""),a.setAttribute("webkit-playsinline",""),a.setAttribute("x-webkit-airplay",""),a.style.position="absolute",a.style.width="0",a.style.height="0",a.style.overflow="hidden",a.style.pointerEvents="none",document.body.appendChild(a),this.bindInstance(),this.addEvent(),a.load()},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,n=e.videoFrame,o=e.fps,i=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}();if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&n)return function(e){return t.video.requestVideoFrameCallback(e)};if(i){if(o){var r=-1;return function(e){return r++,i((function(){if(r%(60/o)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return i(t)}}var a=o>0?1e3/o:16;return function(t){return window.setTimeout(t,a)}},t.prototype.cancelDrawFrame=function(){var t,e=this.animationId,n=this.config;if(e){var o=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}();(null===(t=this.video)||void 0===t?void 0:t.cancelVideoFrameCallback)&&n.videoFrame?this.video.cancelVideoFrameCallback(e):o?o(e):window.clearTimeout(e),this.animationId=0,this.playing=!1}},t.prototype.play=function(t){var e,n;return o(this,void 0,void 0,(function(){var o,r;return i(this,(function(i){switch(i.label){case 0:u(this.video),t&&this.setConfig(t),i.label=1;case 1:return i.trys.push([1,3,,4]),[4,this.video.play()];case 2:return o=i.sent(),this.drawFrame(),[2,o];case 3:throw r=i.sent(),null===(n=(e=this.config).onError)||void 0===n||n.call(e,r),r;case 4:return[2]}}))}))},t.prototype.pause=function(){u(this.video),this.video.pause(),this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){u(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){u(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){u(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){u(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,n,o=this,i=o.video,a=o.config,s=o.canvas;if(this.videoWidth=i.videoWidth,this.videoHeight=i.videoHeight,a.autoResize&&s&&i.videoWidth>0&&i.videoHeight>0){var d=r(),l=(t=i.videoWidth,e=i.videoHeight,("landscape"===(n=a.orientation)?t/2:t)/("portrait"===n?e/2:e)),u=s.width/d,c=s.height/d,h=void 0;if("width"===a.autoResize||"height"===a.autoResize)h=a.autoResize;else h=l>=u/c?"width":"height";var p="width"===h?u:Math.round(c*l),v="width"===h?Math.round(u/l):c,f=v*d;p*d===this.canvasWidth&&f===this.canvasHeight||(!function(t,e,n){var o=r();t.width=e*o,t.height=n*o,t.style.width=e+"px",t.style.height=n+"px"}(s,p,v),this.canvasWidth=s.width,this.canvasHeight=s.height,this.onCanvasResized())}a.onLoad&&a.onLoad()},t.prototype.onCanvasResized=function(){},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,n,o=this.config,i=this.video;o.debug&&console.error(null!==(e=null==i?void 0:i.error)&&void 0!==e?e:t),null===(n=o.onError)||void 0===n||n.call(o,t),this.destroy()},t.prototype.destroy=function(){var t,e,n;try{var o=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video&&(this.video.pause(),this.video.src="",this.video.load(),null===(t=this.video.parentNode)||void 0===t||t.removeChild(this.video)),null===(e=null==o?void 0:o.onDestroy)||void 0===e||e.call(o),this.config=null,this.container=null,this.video=null,this.animationId=0}catch(t){(null===(n=this.config)||void 0===n?void 0:n.debug)&&console.error("[alpha-video-player-js] destroy error:",t)}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,n=t.onCanplay,o=t.onPlay,i=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=n.bind(this),this.onPlay=o.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,n=t.onLoad,o=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",n),e.addEventListener("canplaythrough",o),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,n=t.onLoad,o=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",n),e.removeEventListener("play",i),e.removeEventListener("canplaythrough",o),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),p=function(t){function e(e){var n=this,o=e.onInitSuccess,i=e.onInitError;try{(n=t.call(this,e)||this).initWebGLRender(),o&&o()}catch(t){if(!i)throw t;i(t)}return n}return n(e,t),e.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.enable(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()},e.prototype.initShader=function(t,e){var n=this.gl,o=n.createShader(t);if(n.shaderSource(o,e),n.compileShader(o),this.config.debug){var i=n.getShaderParameter(o,n.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,i),i||console.log("[alpha-video-player-js] shader compile fail: ",t,n.getShaderInfoLog(o))}return o},e.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 n=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",n),n||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},e.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},e.prototype.initVertexBuffer=function(){var t=this,e=t.gl,n=t.program,o=t.config,i=function(t,e){var n="front"===e,o=[-1,1,1,1,-1,-1,1,-1],i=a[t][n?"front":"back"],r=a[t][n?"back":"front"],s=[];return o.forEach((function(t,e){e%2==0&&(s=s.concat(o.slice(e,e+2)).concat(i.slice(e,e+2)).concat(r.slice(e,e+2)))})),new Float32Array(s)}(o.orientation,o.side),r=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,i,e.STATIC_DRAW);var s=i.BYTES_PER_ELEMENT,d=e.getAttribLocation(n,"a_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*s,0),e.enableVertexAttribArray(d);var l=e.getAttribLocation(n,"a_Video_Texture_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6*s,2*s),e.enableVertexAttribArray(l);var u=e.getAttribLocation(n,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6*s,4*s),e.enableVertexAttribArray(u);var c=e.getUniformLocation(n,"u_Sampler");return e.uniform1i(c,0),r},e.prototype.onCanvasResized=function(){var t=this.gl,e=this.canvas;t&&e&&t.viewport(0,0,e.width,e.height)},e.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))},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this.gl,n=this.config;n.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),n.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,n,o=this,i=o.canvas,r=o.gl,a=o.vertexShader,s=o.fragmentShader,d=o.texture,l=o.vertexBuffer,u=o.program;i&&r&&(t.prototype.destroy.call(this),null===(e=i.parentNode)||void 0===e||e.removeChild(i),r.detachShader(u,a),r.deleteShader(a),r.detachShader(u,s),r.deleteShader(s),r.deleteTexture(d),r.deleteBuffer(l),r.deleteProgram(u),null===(n=r.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},e}(h),v=function(t){function e(e){var n=this,o=e.onInitSuccess,i=e.onInitError;try{(n=t.call(this,e)||this).initCanvasRender(),o&&o()}catch(t){if(!i)throw t;i(t)}return n}return n(e,t),e.prototype.initCanvasRender=function(){var t=this,e=t.canvas,n=t.canvasWidth,o=t.canvasHeight,i=t.config,r=i.orientation,a=i.side,s=document.createElement("canvas");this.tempCanvasWidth=s.width=l(r,"width",n),this.tempCanvasHeight=s.height=l(r,"height",o);var u=d(r,a,n,o),c=u.imageCoords,h=u.alphaImageCoords;this.imageCoords=c,this.alphaImageCoords=h,this.context2d=e.getContext("2d"),this.tempContext2d=s.getContext("2d")},e.prototype.onCanvasResized=function(){var t=this,e=t.canvasWidth,n=t.canvasHeight,o=t.config,i=o.orientation,r=o.side,a=document.createElement("canvas");this.tempCanvasWidth=a.width=l(i,"width",e),this.tempCanvasHeight=a.height=l(i,"height",n);var s=d(i,r,e,n),u=s.imageCoords,c=s.alphaImageCoords;this.imageCoords=u,this.alphaImageCoords=c,this.context2d=this.canvas.getContext("2d"),this.tempContext2d=a.getContext("2d")},e.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,n=t.tempContext2d,o=t.video,i=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.tempCanvasWidth,d=t.tempCanvasHeight,l=t.imageCoords,u=t.alphaImageCoords;if(e&&n&&o&&i&&r&&a&&s&&d&&l&&u){n.drawImage(o,0,0,r,a,0,0,s,d);for(var c=n.getImageData.apply(n,l),h=c.data,p=n.getImageData.apply(n,u).data,v=3;v<h.length;v+=4)h[v]=p[v-3];e.putImageData(c,0,0)}},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this,n=e.context2d,o=e.canvasWidth,i=e.canvasHeight,r=e.config;r.autoClear&&n.clearRect(0,0,o,i),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,n=this.canvas;n&&(t.prototype.destroy.call(this),null===(e=n.parentNode)||void 0===e||e.removeChild(n),this.canvas=null,this.context2d=null,this.tempContext2d=null,this.tempCanvasWidth=null,this.tempCanvasHeight=null,this.imageCoords=null,this.alphaImageCoords=null)},e}(h),f=function(){function t(t){if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new p(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 v(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 i(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}(),y=t.extend({name:"AlphaVideoPlayer",props:{src:{type:String,default:void 0},width:{type:Number,default:void 0},height:{type:Number,default:void 0},crossOrigin:{type:String,default:void 0},muted:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},playbackRate:{type:Number,default:1},fps:{type:Number,default:0},orientation:{type:String,default:"landscape"},side:{type:String,default:"front"},videoFrame:{type:Boolean,default:!1},debug:{type:Boolean,default:!1},autoShow:{type:Boolean,default:!1},autoClear:{type:Boolean,default:!0},autoDestroy:{type:Boolean,default:!1},autoResize:{default:"contain"}},data:function(){return{_player:null}},render:function(t){return t("div",{ref:"container"})},mounted:function(){this._initPlayer()},beforeDestroy:function(){this._destroyPlayer()},watch:{src:function(t){var e;null!=t&&(null===(e=this._player)||void 0===e||e.setSrc(t))},muted:function(t){var e;null===(e=this._player)||void 0===e||e.setMute(t)},loop:function(t){var e;null===(e=this._player)||void 0===e||e.setLoop(t)},playbackRate:function(t){var e;null===(e=this._player)||void 0===e||e.setPlaybackRate(t)}},methods:{_initPlayer:function(){var t=this,e=t.$refs.container;e&&(t._destroyPlayer(),t._player=new f({container:e,src:t.src,width:t.width,height:t.height,crossOrigin:t.crossOrigin,muted:t.muted,loop:t.loop,playbackRate:t.playbackRate,fps:t.fps,orientation:t.orientation,side:t.side,videoFrame:t.videoFrame,debug:t.debug,autoShow:t.autoShow,autoClear:t.autoClear,autoDestroy:t.autoDestroy,autoResize:t.autoResize,onInitSuccess:function(){return t.$emit("init-success")},onInitError:function(e){return t.$emit("init-error",e)},onLoad:function(){return t.$emit("load")},onCanPlay:function(){return t.$emit("can-play")},onPlay:function(){return t.$emit("play")},onLoop:function(){return t.$emit("loop")},onPause:function(){return t.$emit("pause")},onEnded:function(){return t.$emit("ended")},onError:function(e){return t.$emit("error",e)},onDestroy:function(){return t.$emit("destroy")}}))},play:function(){var t;return null===(t=this._player)||void 0===t?void 0:t.play()},pause:function(){var t;null===(t=this._player)||void 0===t||t.pause()},reset:function(){var t;null===(t=this._player)||void 0===t||t.reset()},_destroyPlayer:function(){var t=this;t._player&&(t._player.destroy(),t._player=null)},destroy:function(){this._destroyPlayer()},setSrc:function(t){var e;null===(e=this._player)||void 0===e||e.setSrc(t)},setCurrentTime:function(t){var e;null===(e=this._player)||void 0===e||e.setCurrentTime(t)},setMute:function(t){var e;null===(e=this._player)||void 0===e||e.setMute(t)},setLoop:function(t){var e;null===(e=this._player)||void 0===e||e.setLoop(t)},setPlaybackRate:function(t){var e;null===(e=this._player)||void 0===e||e.setPlaybackRate(t)},getPlayer:function(){return this._player}}});export{y as default};

package/dist/vue3.d.ts

@@ -0,0 +1,169 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+type IOrientation = 'landscape' | 'portrait';
+type ISide = 'front' | 'back';
+
+declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: any;
+    };
+    width: {
+        type: NumberConstructor;
+        default: any;
+    };
+    height: {
+        type: NumberConstructor;
+        default: any;
+    };
+    crossOrigin: {
+        type: PropType<"anonymous" | "use-credentials">;
+        default: any;
+    };
+    muted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    playbackRate: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fps: {
+        type: NumberConstructor;
+        default: number;
+    };
+    orientation: {
+        type: PropType<IOrientation>;
+        default: string;
+    };
+    side: {
+        type: PropType<ISide>;
+        default: string;
+    };
+    videoFrame: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoDestroy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoResize: {
+        type: PropType<false | "width" | "height" | "contain">;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("loop" | "ended" | "error" | "load" | "pause" | "play" | "canPlay" | "initSuccess" | "initError" | "destroy")[], "loop" | "ended" | "error" | "load" | "pause" | "play" | "canPlay" | "initSuccess" | "initError" | "destroy", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: any;
+    };
+    width: {
+        type: NumberConstructor;
+        default: any;
+    };
+    height: {
+        type: NumberConstructor;
+        default: any;
+    };
+    crossOrigin: {
+        type: PropType<"anonymous" | "use-credentials">;
+        default: any;
+    };
+    muted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    playbackRate: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fps: {
+        type: NumberConstructor;
+        default: number;
+    };
+    orientation: {
+        type: PropType<IOrientation>;
+        default: string;
+    };
+    side: {
+        type: PropType<ISide>;
+        default: string;
+    };
+    videoFrame: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoDestroy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoResize: {
+        type: PropType<false | "width" | "height" | "contain">;
+        default: string;
+    };
+}>> & Readonly<{
+    onInitSuccess?: (...args: any[]) => any;
+    onInitError?: (...args: any[]) => any;
+    onLoad?: (...args: any[]) => any;
+    onCanPlay?: (...args: any[]) => any;
+    onPlay?: (...args: any[]) => any;
+    onLoop?: (...args: any[]) => any;
+    onPause?: (...args: any[]) => any;
+    onEnded?: (...args: any[]) => any;
+    onError?: (...args: any[]) => any;
+    onDestroy?: (...args: any[]) => any;
+}>, {
+    width: number;
+    height: number;
+    src: string;
+    crossOrigin: "anonymous" | "use-credentials";
+    muted: boolean;
+    loop: boolean;
+    playbackRate: number;
+    fps: number;
+    orientation: IOrientation;
+    side: ISide;
+    videoFrame: boolean;
+    debug: boolean;
+    autoShow: boolean;
+    autoClear: boolean;
+    autoDestroy: boolean;
+    autoResize: false | "width" | "height" | "contain";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { _default as default };

package/dist/vue3.js

@@ -0,0 +1 @@
+import{defineComponent as t,ref as e,watch as n,onMounted as o,onBeforeUnmount as i,h as r}from"vue";var a=function(t,e){return a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},a(t,e)};function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function u(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{u(o.next(t))}catch(t){r(t)}}function s(t){try{u(o.throw(t))}catch(t){r(t)}}function u(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}u((o=o.apply(t,e||[])).next())}))}function d(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(u){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(n=1,o&&(i=2&s[0]?o.return:s[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,s[1])).done)return i;switch(o=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,o=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){a.label=s[1];break}if(6===s[0]&&a.label<i[1]){a.label=i[1],i=s;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(s);break}i[2]&&a.ops.pop(),a.trys.pop();continue}s=e.call(t,a)}catch(t){s=[6,t],o=0}finally{n=i=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,u])}}}"function"==typeof SuppressedError&&SuppressedError;var l=function(){return"undefined"!=typeof window&&window.devicePixelRatio||1},c={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]}},h={landscape_front:function(t,e){return[0,0,t,e]},landscape_back:function(t,e){return[t,0,t,e]},portrait_front:function(t,e){return[0,0,t,e]},portrait_back:function(t,e){return[0,e,t,e]}},p=function(t,e,n,o){var i="front"===e?"back":"front";return{imageCoords:h["".concat(t,"_").concat(e)](n,o),alphaImageCoords:h["".concat(t,"_").concat(i)](n,o)}},f=function(t,e,n){return"landscape"===t?"width"===e?2*n:n:"width"===e?n:2*n},v=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},y={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},m=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)throw new Error("[alpha-video-player-js]: container can not be empty！");this.setConfig(t),this.container=t.container,this.canvas=function(t,e,n){var o=t.offsetWidth,i=t.offsetHeight,r=l(),a=e||o,s=n||i;a&&s||console.warn("[alpha-video-player-js]: container size is 0. Make sure the container is mounted and has a non-zero size before creating the player.");var u=document.createElement("canvas");return u.width=a*r,u.height=s*r,u.style.width="100%",u.style.height="100%",u.style.pointerEvents="none",t.appendChild(u),u}(this.container,t.width,t.height);var e=this.canvas,n=e.width,o=e.height;this.canvasWidth=n,this.canvasHeight=o,t.src&&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({},y,this.config||{},t))},t.prototype.initVideo=function(){var t=this.config,e=t.src,n=t.playbackRate,o=t.muted,i=t.loop,r=t.crossOrigin,a=this.video=document.createElement("video");a.src=e,a.crossOrigin=null!=r?r:"anonymous",a.autoplay=!1,a.preload="auto",a.playbackRate=n,a.loop=i,a.muted=o,o&&a.setAttribute("muted",""),a.setAttribute("playsinline",""),a.setAttribute("webkit-playsinline",""),a.setAttribute("x-webkit-airplay",""),a.style.position="absolute",a.style.width="0",a.style.height="0",a.style.overflow="hidden",a.style.pointerEvents="none",document.body.appendChild(a),this.bindInstance(),this.addEvent(),a.load()},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,n=e.videoFrame,o=e.fps,i=function(){if("undefined"==typeof window)return null;var t=window;return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.oRequestAnimationFrame||t.msRequestAnimationFrame||null}();if("requestVideoFrameCallback"in HTMLVideoElement.prototype&&n)return function(e){return t.video.requestVideoFrameCallback(e)};if(i){if(o){var r=-1;return function(e){return r++,i((function(){if(r%(60/o)==0)return e();t.animationId=t.adaptAnimation(e)}))}}return function(t){return i(t)}}var a=o>0?1e3/o:16;return function(t){return window.setTimeout(t,a)}},t.prototype.cancelDrawFrame=function(){var t,e=this.animationId,n=this.config;if(e){var o=function(){if("undefined"==typeof window)return null;var t=window;return t.cancelAnimationFrame||t.mozCancelAnimationFrame||t.webkitCancelAnimationFrame||t.msCancelAnimationFrame||null}();(null===(t=this.video)||void 0===t?void 0:t.cancelVideoFrameCallback)&&n.videoFrame?this.video.cancelVideoFrameCallback(e):o?o(e):window.clearTimeout(e),this.animationId=0,this.playing=!1}},t.prototype.play=function(t){var e,n;return u(this,void 0,void 0,(function(){var o,i;return d(this,(function(r){switch(r.label){case 0:v(this.video),t&&this.setConfig(t),r.label=1;case 1:return r.trys.push([1,3,,4]),[4,this.video.play()];case 2:return o=r.sent(),this.drawFrame(),[2,o];case 3:throw i=r.sent(),null===(n=(e=this.config).onError)||void 0===n||n.call(e,i),i;case 4:return[2]}}))}))},t.prototype.pause=function(){v(this.video),this.video.pause(),this.cancelDrawFrame()},t.prototype.reset=function(){this.setCurrentTime(0)},t.prototype.setSrc=function(t){this.canPlay=!1,this.onCanPlayTimes=1,this.config.src=t,this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){v(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){v(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){v(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){v(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,n,o=this,i=o.video,r=o.config,a=o.canvas;if(this.videoWidth=i.videoWidth,this.videoHeight=i.videoHeight,r.autoResize&&a&&i.videoWidth>0&&i.videoHeight>0){var s=l(),u=(t=i.videoWidth,e=i.videoHeight,("landscape"===(n=r.orientation)?t/2:t)/("portrait"===n?e/2:e)),d=a.width/s,c=a.height/s,h=void 0;if("width"===r.autoResize||"height"===r.autoResize)h=r.autoResize;else h=u>=d/c?"width":"height";var p="width"===h?d:Math.round(c*u),f="width"===h?Math.round(d/u):c,v=f*s;p*s===this.canvasWidth&&v===this.canvasHeight||(!function(t,e,n){var o=l();t.width=e*o,t.height=n*o,t.style.width=e+"px",t.style.height=n+"px"}(a,p,f),this.canvasWidth=a.width,this.canvasHeight=a.height,this.onCanvasResized())}r.onLoad&&r.onLoad()},t.prototype.onCanvasResized=function(){},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,n,o=this.config,i=this.video;o.debug&&console.error(null!==(e=null==i?void 0:i.error)&&void 0!==e?e:t),null===(n=o.onError)||void 0===n||n.call(o,t),this.destroy()},t.prototype.destroy=function(){var t,e,n;try{var o=this.config;this.cancelDrawFrame(),this.removeEvent(),this.video&&(this.video.pause(),this.video.src="",this.video.load(),null===(t=this.video.parentNode)||void 0===t||t.removeChild(this.video)),null===(e=null==o?void 0:o.onDestroy)||void 0===e||e.call(o),this.config=null,this.container=null,this.video=null,this.animationId=0}catch(t){(null===(n=this.config)||void 0===n?void 0:n.debug)&&console.error("[alpha-video-player-js] destroy error:",t)}},t.prototype.bindInstance=function(){var t=this,e=t.onLoad,n=t.onCanplay,o=t.onPlay,i=t.onPause,r=t.onEnded,a=t.onError;this.onLoad=e.bind(this),this.onCanplay=n.bind(this),this.onPlay=o.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,n=t.onLoad,o=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e.addEventListener("loadedmetadata",n),e.addEventListener("canplaythrough",o),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,n=t.onLoad,o=t.onCanplay,i=t.onPlay,r=t.onPause,a=t.onEnded,s=t.onError;e&&(e.removeEventListener("loadedmetadata",n),e.removeEventListener("play",i),e.removeEventListener("canplaythrough",o),e.removeEventListener("pause",r),e.removeEventListener("ended",a),e.removeEventListener("error",s))},t}(),g=function(t){function e(e){var n=this,o=e.onInitSuccess,i=e.onInitError;try{(n=t.call(this,e)||this).initWebGLRender(),o&&o()}catch(t){if(!i)throw t;i(t)}return n}return s(e,t),e.prototype.initWebGLRender=function(){var t=this.canvas,e=this.gl=t.getContext("webgl")||t.getContext("experimental-webgl");e.enable(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()},e.prototype.initShader=function(t,e){var n=this.gl,o=n.createShader(t);if(n.shaderSource(o,e),n.compileShader(o),this.config.debug){var i=n.getShaderParameter(o,n.COMPILE_STATUS);console.log("[alpha-video-player-js] shader compile result: ",t,i),i||console.log("[alpha-video-player-js] shader compile fail: ",t,n.getShaderInfoLog(o))}return o},e.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 n=t.getProgramParameter(e,t.LINK_STATUS);console.log("[alpha-video-player-js] program connect shader result: ",n),n||console.log("[alpha-video-player-js] program connect shader fail: ",t.getProgramInfoLog(e))}return t.useProgram(e),e},e.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},e.prototype.initVertexBuffer=function(){var t=this,e=t.gl,n=t.program,o=t.config,i=function(t,e){var n="front"===e,o=[-1,1,1,1,-1,-1,1,-1],i=c[t][n?"front":"back"],r=c[t][n?"back":"front"],a=[];return o.forEach((function(t,e){e%2==0&&(a=a.concat(o.slice(e,e+2)).concat(i.slice(e,e+2)).concat(r.slice(e,e+2)))})),new Float32Array(a)}(o.orientation,o.side),r=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,i,e.STATIC_DRAW);var a=i.BYTES_PER_ELEMENT,s=e.getAttribLocation(n,"a_Position");e.vertexAttribPointer(s,2,e.FLOAT,!1,6*a,0),e.enableVertexAttribArray(s);var u=e.getAttribLocation(n,"a_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6*a,2*a),e.enableVertexAttribArray(u);var d=e.getAttribLocation(n,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6*a,4*a),e.enableVertexAttribArray(d);var l=e.getUniformLocation(n,"u_Sampler");return e.uniform1i(l,0),r},e.prototype.onCanvasResized=function(){var t=this.gl,e=this.canvas;t&&e&&t.viewport(0,0,e.width,e.height)},e.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))},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this.gl,n=this.config;n.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),n.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,n,o=this,i=o.canvas,r=o.gl,a=o.vertexShader,s=o.fragmentShader,u=o.texture,d=o.vertexBuffer,l=o.program;i&&r&&(t.prototype.destroy.call(this),null===(e=i.parentNode)||void 0===e||e.removeChild(i),r.detachShader(l,a),r.deleteShader(a),r.detachShader(l,s),r.deleteShader(s),r.deleteTexture(u),r.deleteBuffer(d),r.deleteProgram(l),null===(n=r.getExtension("WEBGL_lose_context"))||void 0===n||n.loseContext(),this.canvas=null,this.gl=null,this.vertexShader=null,this.fragmentShader=null,this.texture=null,this.vertexBuffer=null,this.program=null)},e}(m),b=function(t){function e(e){var n=this,o=e.onInitSuccess,i=e.onInitError;try{(n=t.call(this,e)||this).initCanvasRender(),o&&o()}catch(t){if(!i)throw t;i(t)}return n}return s(e,t),e.prototype.initCanvasRender=function(){var t=this,e=t.canvas,n=t.canvasWidth,o=t.canvasHeight,i=t.config,r=i.orientation,a=i.side,s=document.createElement("canvas");this.tempCanvasWidth=s.width=f(r,"width",n),this.tempCanvasHeight=s.height=f(r,"height",o);var u=p(r,a,n,o),d=u.imageCoords,l=u.alphaImageCoords;this.imageCoords=d,this.alphaImageCoords=l,this.context2d=e.getContext("2d"),this.tempContext2d=s.getContext("2d")},e.prototype.onCanvasResized=function(){var t=this,e=t.canvasWidth,n=t.canvasHeight,o=t.config,i=o.orientation,r=o.side,a=document.createElement("canvas");this.tempCanvasWidth=a.width=f(i,"width",e),this.tempCanvasHeight=a.height=f(i,"height",n);var s=p(i,r,e,n),u=s.imageCoords,d=s.alphaImageCoords;this.imageCoords=u,this.alphaImageCoords=d,this.context2d=this.canvas.getContext("2d"),this.tempContext2d=a.getContext("2d")},e.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,n=t.tempContext2d,o=t.video,i=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.tempCanvasWidth,u=t.tempCanvasHeight,d=t.imageCoords,l=t.alphaImageCoords;if(e&&n&&o&&i&&r&&a&&s&&u&&d&&l){n.drawImage(o,0,0,r,a,0,0,s,u);for(var c=n.getImageData.apply(n,d),h=c.data,p=n.getImageData.apply(n,l).data,f=3;f<h.length;f+=4)h[f]=p[f-3];e.putImageData(c,0,0)}},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.prototype.onEnded=function(){var e=this,n=e.context2d,o=e.canvasWidth,i=e.canvasHeight,r=e.config;r.autoClear&&n.clearRect(0,0,o,i),t.prototype.onEnded.call(this),r.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,n=this.canvas;n&&(t.prototype.destroy.call(this),null===(e=n.parentNode)||void 0===e||e.removeChild(n),this.canvas=null,this.context2d=null,this.tempContext2d=null,this.tempCanvasWidth=null,this.tempCanvasHeight=null,this.imageCoords=null,this.alphaImageCoords=null)},e}(m),_=function(){function t(t){if((e=document.createElement("canvas")).getContext("webgl")||e.getContext("experimental-webgl"))this.render=new g(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 b(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 u(this,void 0,void 0,(function(){return d(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}(),E=t({name:"AlphaVideoPlayer",props:{src:{type:String,default:void 0},width:{type:Number,default:void 0},height:{type:Number,default:void 0},crossOrigin:{type:String,default:void 0},muted:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},playbackRate:{type:Number,default:1},fps:{type:Number,default:0},orientation:{type:String,default:"landscape"},side:{type:String,default:"front"},videoFrame:{type:Boolean,default:!1},debug:{type:Boolean,default:!1},autoShow:{type:Boolean,default:!1},autoClear:{type:Boolean,default:!0},autoDestroy:{type:Boolean,default:!1},autoResize:{type:[String,Boolean],default:"contain"}},emits:["initSuccess","initError","load","canPlay","play","loop","pause","ended","error","destroy"],setup:function(t,a){var s=a.emit,u=a.expose,d=e(),l=null,c=function(){l&&(l.destroy(),l=null)};return n((function(){return t.src}),(function(t){return null!=t&&(null==l?void 0:l.setSrc(t))})),n((function(){return t.muted}),(function(t){return null==l?void 0:l.setMute(t)})),n((function(){return t.loop}),(function(t){return null==l?void 0:l.setLoop(t)})),n((function(){return t.playbackRate}),(function(t){return null==l?void 0:l.setPlaybackRate(t)})),o((function(){d.value&&(c(),l=new _({container:d.value,src:t.src,width:t.width,height:t.height,crossOrigin:t.crossOrigin,muted:t.muted,loop:t.loop,playbackRate:t.playbackRate,fps:t.fps,orientation:t.orientation,side:t.side,videoFrame:t.videoFrame,debug:t.debug,autoShow:t.autoShow,autoClear:t.autoClear,autoDestroy:t.autoDestroy,autoResize:t.autoResize,onInitSuccess:function(){return s("initSuccess")},onInitError:function(t){return s("initError",t)},onLoad:function(){return s("load")},onCanPlay:function(){return s("canPlay")},onPlay:function(){return s("play")},onLoop:function(){return s("loop")},onPause:function(){return s("pause")},onEnded:function(){return s("ended")},onError:function(t){return s("error",t)},onDestroy:function(){return s("destroy")}}))})),i(c),u({play:function(){return null==l?void 0:l.play()},pause:function(){return null==l?void 0:l.pause()},destroy:c,reset:function(){return null==l?void 0:l.reset()},setSrc:function(t){return null==l?void 0:l.setSrc(t)},setCurrentTime:function(t){return null==l?void 0:l.setCurrentTime(t)},setMute:function(t){return null==l?void 0:l.setMute(t)},setLoop:function(t){return null==l?void 0:l.setLoop(t)},setPlaybackRate:function(t){return null==l?void 0:l.setPlaybackRate(t)},getPlayer:function(){return l}}),function(){return r("div",{ref:d})}}});export{E as default};

package/package.json

@@ -1,10 +1,28 @@
 {
   "name": "alpha-video-player-js",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Web 视频动画特效播放 sdk",
   "main": "dist/alpha-video-player-js.js",
   "types": "dist/alpha-video-player-js.d.ts",
   "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/alpha-video-player-js.js",
+      "types": "./dist/alpha-video-player-js.d.ts"
+    },
+    "./vue3": {
+      "import": "./dist/vue3.js",
+      "types": "./dist/vue3.d.ts"
+    },
+    "./vue2": {
+      "import": "./dist/vue2.js",
+      "types": "./dist/vue2.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react.js",
+      "types": "./dist/react.d.ts"
+    }
+  },
   "scripts": {
     "dev": "rollup -c -w",
     "build": "cross-env NODE_ENV=production rollup -c",
@@ -16,7 +34,9 @@
     "video",
     "player",
     "webgl",
-    "canvas"
+    "canvas",
+    "vue",
+    "react"
   ],
   "author": "https://github.com/trp1119",
   "license": "ISC",
@@ -29,16 +49,39 @@
   "engines": {
     "node": ">=16.0.0"
   },
+  "peerDependencies": {
+    "vue": "^2.7.0 || ^3.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-terser": "^0.4.3",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "cross-env": "^7.0.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rollup": "^3.29.2",
     "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-glslify": "^1.3.1",
     "rollup-plugin-typescript2": "^0.35.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vue": "^3.0.0",
+    "vue2": "npm:vue@^2.7.0"
   }
 }