npm - alpha-video-player-js - Versions diffs - 1.2.0 → 1.3.1 - Mend

alpha-video-player-js 1.2.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +144 -186
package/README.zh-CN.md +154 -0
package/dist/alpha-video-player-js.d.ts +11 -4
package/dist/alpha-video-player-js.js +1 -1
package/dist/react.d.ts +13 -3
package/dist/react.js +1 -1
package/dist/vue2.d.ts +10 -3
package/dist/vue2.js +1 -1
package/dist/vue3.d.ts +37 -3
package/dist/vue3.js +1 -1
package/package.json +5 -2

package/README.md CHANGED Viewed

@@ -1,218 +1,179 @@
 # alpha-video-player-js
-## 简介
+[中文文档](./README.zh-CN.md) · [Demo](https://trp1119.github.io/alpha-video-player-js-demo)
-alpha-video-player-js 是一个 Web 视频动画特效播放 sdk，可以通过制作 Alpha 通道分离的视频素材，在 Web 端通过 WebGL 或 Canvas 重新实现 RGB 通道和 Alpha 通道的融合，从而实现播放带透明通道的视频。
+`alpha-video-player-js` is a zero-dependency web SDK for playing videos with transparency. It rebuilds an alpha video frame on a `<canvas>` by combining its RGB image with a grayscale alpha mask. Use it for high-fidelity motion effects that are more complex than APNG or Lottie.
-- 零依赖
+## Highlights
-- 接入体积小（gzip 约 5KB 量级，以构建产物为准）
-- 还原度高
-- 兼容 WebGL（GPU） 及 Canvas（CPU） 降级，性能优异
-- 支持 横向 - RGB 通道视频在前、横向 - RGB 通道视频在后、纵向 - RGB 通道视频在前、纵向 - RGB 通道视频在后 四类视频融合
+- WebGL rendering with a Canvas 2D fallback.
+- Native `<video>` playback for regular, opaque videos.
+- Supports horizontal and vertical RGB/alpha layouts, including reversed layouts.
+- Supports scaled alpha masks and alignment on the secondary axis.
+- Framework components for Vue 3, Vue 2.7+, and React.
+- No runtime dependencies; framework packages are optional peer dependencies.
-## 使用
-### 安装
+## Installation
 ```bash
-npm i alpha-video-player-js
+npm install alpha-video-player-js
 ```
-### 创建实例
+## Quick start
+The container needs an explicit size when `width` and `height` are not supplied.
 ```ts
-import AlphaVideoPlayerJs from 'alpha-video-player-js'
+import AlphaVideoPlayer from 'alpha-video-player-js'
+const container = document.querySelector<HTMLElement>('#player')!
+const player = new AlphaVideoPlayer({
+  container,
+  src: 'https://example.com/alpha-video.mp4',
+  width: 320,
+  height: 180,
+  muted: true,
+  loop: true,
+  autoShow: true,
+})
-const player = new AlphaVideoPlayerJs(config)
+await player.play()
 ```
-### TypeScript 类型
+For autoplay, keep the video muted and handle the rejected `play()` promise; browsers may still enforce autoplay policies.
-主包与框架子路径会导出下列类型，便于标注 `ref`、`getPlayer()` 返回值等。
+## Alpha video format
-**从 v1.2.0 起**：命令式 ref 类型统一为 **`IAlphaVideoPlayerRef`**；React 组件 props 为 **`IAlphaVideoPlayerProps`**（原 `AlphaVideoPlayerExpose` / 无 `I` 前缀的 `AlphaVideoPlayerRef`、`AlphaVideoPlayerProps` 已更名，升级时请全局替换）。
+An alpha video stores two images in each ordinary MP4 frame:
-| 包路径 | 导出类型 | 说明 |
-|--------|----------|------|
-| `alpha-video-player-js` | `IAlphaVideoPlayer` | 核心类实例（`new` 后的类型） |
-| | `IConfig`、`IOptionalConfig` | 构造 / `play()` 可选参数 |
-| | `IOrientation`、`ISide` | 拼合方向与 RGB 区域位置 |
-| `alpha-video-player-js/vue3`、`.../vue2` | `IAlphaVideoPlayer`、`IAlphaVideoPlayerRef` | 核心实例类型与组件 ref；**若同时用到二者，请从同一子路径导入**，避免与主包各有一份 `.d.ts` 时类型不兼容 |
-| `alpha-video-player-js/react` | `IAlphaVideoPlayerProps`、`IAlphaVideoPlayerRef` | 组件 props 与 ref |
+- **RGB region**: the visible color image.
+- **Alpha region**: a grayscale mask. Its red channel becomes the output alpha (`white = opaque`, `black = transparent`).
-```ts
-import AlphaVideoPlayer from 'alpha-video-player-js/vue3'
-import type { IAlphaVideoPlayer, IAlphaVideoPlayerRef } from 'alpha-video-player-js/vue3'
+`orientation` determines how the regions are packed and `side` determines where the RGB region is located:
-const playerRef = ref<IAlphaVideoPlayerRef | null>(null)
+| `orientation` | `side: 'front'` | `side: 'back'` |
+| --- | --- | --- |
+| `landscape` | RGB left, alpha right | Alpha left, RGB right |
+| `portrait` | RGB top, alpha bottom | Alpha top, RGB bottom |
-let core: IAlphaVideoPlayer | null = null
-const onCanPlay = () => {
-  core = playerRef.value?.getPlayer() ?? null
-}
+### Scaled alpha masks
+`alphaScale` is the alpha mask's width and height relative to the RGB image:
+```text
+1   equal-size RGB and alpha regions (default)
+0.5 alpha is half the RGB width and half the RGB height
+0   no alpha mask; play the source as a native opaque video
 ```
-### 实例参数
-| 参数          | 含义                               | 默认值    | 是否必传 |
-| ------------- | ---------------------------------- | --------- | -------- |
-| 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 |
-### 实例方法
-| 方法                          | 含义             | 参数                |
-| ----------------------------- | ---------------- | ------------------- |
-| play(config?)                 | 播放/继续播放，返回 `Promise`；失败时 reject 原始错误 | 可选，同实例参数的部分字段 |
-| pause()                       | 暂停播放         | -                   |
-| destroy()                     | 销毁实例         | -                   |
-| 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`）：
+When `alphaScale < 1`, use `alphaAlign` to locate the mask on the secondary axis: `start` means top for `landscape` / left for `portrait`; `end` means bottom / right.
 ```ts
-const player = new AlphaVideoPlayerJs({
+new AlphaVideoPlayer({
   container,
   src,
-  onError: (err) => {
-    console.error(err)
-  },
+  orientation: 'landscape',
+  side: 'front',
+  alphaScale: 0.5,
+  alphaAlign: 'start',
 })
-try {
-  await player.play()
-} catch (e) {
-  // play 失败时与 onError 为同一 err 引用
-  console.error(e)
-}
 ```
-## 框架组件
-除了 JS 版本外，还提供了 Vue 3、Vue 2（2.7+）、React 的封装组件，通过子路径导入：
+## Core API
+### Configuration
+| Option | Type / default | Description |
+| --- | --- | --- |
+| `container` | `HTMLElement` | **Required.** Mount target. |
+| `src` | `string` | Video URL. Optional at construction; call `setSrc()` later. |
+| `poster` | `string` | Poster image. A transparent fallback is used by default. |
+| `width`, `height` | `number` | Logical render size; defaults to container dimensions. |
+| `crossOrigin` | `'anonymous'` | CORS mode: `'anonymous'` or `'use-credentials'`. |
+| `muted` | `true` | Whether the video is muted. |
+| `loop` | `false` | Loop playback. |
+| `playbackRate` | `1` | Playback speed. |
+| `fps` | `0` | Animation-frame cap; `0` means uncapped. |
+| `videoFrame` | `false` | Prefer `requestVideoFrameCallback` when supported. |
+| `orientation` | `'landscape'` | Alpha-video packing direction. |
+| `side` | `'front'` | RGB region position. |
+| `alphaScale` | `1` | Alpha mask scale from `0` to `1`; `0` uses native video. |
+| `alphaAlign` | `'start'` | Scaled mask alignment: `'start'` or `'end'`. |
+| `autoShow` | `false` | Draw the first frame once playable. |
+| `autoClear` | `true` | Clear the canvas when playback ends. |
+| `autoDestroy` | `false` | Destroy the player when playback ends. |
+| `autoResize` | `'contain'` | Resize mode: `'contain'`, `'width'`, `'height'`, or `false`. |
+| `debug` | `false` | Print debug output. |
+Callbacks: `onInitSuccess`, `onInitError`, `onLoad`, `onCanPlay`, `onPlay`, `onLoop`, `onPause`, `onEnded`, `onError`, and `onDestroy`.
+### Instance methods and properties
+| Member | Description |
+| --- | --- |
+| `playing` | Read-only boolean that reports whether playback is active. |
+| `loop` | Read-only boolean that reports loop state. |
+| `play(config?)` | Starts or resumes playback and returns a `Promise`. The optional config overrides applicable settings. |
+| `pause()` | Pauses playback and stops the frame loop. |
+| `reset()` | Resets playback progress. |
+| `setSrc(src)` | Changes the video source. |
+| `setCurrentTime(seconds)` | Seeks to a time in seconds. |
+| `setMute(muted)` | Changes mute state. |
+| `setLoop(loop)` | Changes loop state. |
+| `setPlaybackRate(rate)` | Changes playback speed. |
+| `destroy()` | Releases DOM, canvas, and rendering resources. Do not reuse the instance afterward. |
+`play()` rejects with the browser's original error (for example, a `DOMException` from autoplay restrictions) and also invokes `onError` with that same value. Media load/decode failures are delivered through `onError` and then destroy the instance.
+## Framework components
+All component packages expose the same player options except `container`, which the component owns. Their refs expose `play`, `pause`, `destroy`, `reset`, `setSrc`, `setCurrentTime`, `setMute`, `setLoop`, `setPlaybackRate`, and `getPlayer`.
 ### Vue 3
-```ts
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
 import AlphaVideoPlayer from 'alpha-video-player-js/vue3'
-```
+import type { IAlphaVideoPlayerRef } from 'alpha-video-player-js/vue3'
+const player = ref<IAlphaVideoPlayerRef | null>(null)
+</script>
-```html
 <template>
-  <!-- 需要自定义定位/背景时，在外层包一层；组件根节点仅为无 class 的 div -->
-  <div class="player-wrap" :style="{ width: '250px', height: '133px' }">
+  <div style="width: 320px; height: 180px">
     <AlphaVideoPlayer
-      ref="playerRef"
-      src="https://example.com/video.mp4"
-      :width="250"
-      :height="133"
+      ref="player"
+      src="https://example.com/alpha-video.mp4"
+      :width="320"
+      :height="180"
       :muted="true"
-      :loop="false"
-      :playback-rate="playbackRate"
-      orientation="landscape"
-      side="front"
-      @initSuccess="onReady"
-      @error="onError"
+      :loop="true"
+      @initSuccess="player?.play()"
     />
   </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'
-import type { IAlphaVideoPlayerRef } from 'alpha-video-player-js/vue3'
-const playerRef = ref<IAlphaVideoPlayerRef | null>(null)
-const playbackRate = ref(1)
-const onReady = () => {
-  playerRef.value?.play()
-}
-const onError = (e: unknown) => {
-  console.error(e)
-}
-</script>
 ```
-### Vue 2（2.7+）
+Use `v-model.number` for numeric form controls such as `playbackRate`; native range inputs otherwise produce strings. After calling a component ref's `destroy()`, remount the component (for example, change its `:key`) to create a new player.
-```ts
-import AlphaVideoPlayer from 'alpha-video-player-js/vue2'
-```
+### Vue 2.7+
-```html
+```vue
 <template>
   <AlphaVideoPlayer
     ref="player"
-    src="https://example.com/video.mp4"
+    :src="src"
     :muted="true"
-    orientation="landscape"
-    side="front"
-    @init-success="onReady"
-    @error="onError"
+    @init-success="$refs.player.play()"
   />
 </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)
-    },
-  },
-}
+export default { components: { AlphaVideoPlayer } }
 </script>
 ```
@@ -223,42 +184,39 @@ import { useRef } from 'react'
 import AlphaVideoPlayer from 'alpha-video-player-js/react'
 import type { IAlphaVideoPlayerRef } from 'alpha-video-player-js/react'
-function App() {
-  const playerRef = useRef<IAlphaVideoPlayerRef>(null)
+export function Effect() {
+  const player = useRef<IAlphaVideoPlayerRef>(null)
   return (
     <AlphaVideoPlayer
-      ref={playerRef}
-      src="https://example.com/video.mp4"
+      ref={player}
+      src="https://example.com/alpha-video.mp4"
       muted
-      orientation="landscape"
-      side="front"
-      onInitSuccess={() => playerRef.current?.play()}
-      onError={(e) => console.error(e)}
+      loop
+      onInitSuccess={() => player.current?.play()}
     />
   )
 }
 ```
-### 组件说明
+The React component also accepts `className` and `style`. Components reactively synchronize changes to `src`, `muted`, `loop`, and `playbackRate`; changing packing options (`orientation`, `side`, `alphaScale`, `alphaAlign`) requires remounting.
+### TypeScript exports
+| Import path | Types |
+| --- | --- |
+| `alpha-video-player-js` | `IAlphaVideoPlayer`, `IConfig`, `IOptionalConfig`, `IOrientation`, `ISide`, `IAlphaAlign` |
+| `alpha-video-player-js/vue3`, `.../vue2` | `IAlphaVideoPlayer`, `IAlphaVideoPlayerRef` |
+| `alpha-video-player-js/react` | `IAlphaVideoPlayerProps`, `IAlphaVideoPlayerRef` |
-- **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 均为可选，只需安装你使用的框架。
+If you need both a framework ref and the core instance type, import them from the same framework subpath. This avoids incompatibility when tooling resolves separate generated declarations.
-## 原理
+## Development
-- WebGLRender 使用 webgl texture 获取 video RGB 通道视频 和 Alpha 通道视频纹理，并在 shader 中进行自定义融合
-- CanvasRender 使用 canvas2d getImageData 获取 video RGB 通道视频 和 Alpha 通道视频图片元数据，并进行自定义融合
+```bash
+npm run dev    # Watch with Rollup
+npm run build  # Production bundles and declarations
+```
-## 示例
+## License
-https://trp1119.github.io/alpha-video-player-js-demo
+[ISC](./package.json)

package/README.zh-CN.md ADDED Viewed

@@ -0,0 +1,154 @@
+# alpha-video-player-js（中文文档）
+[English](./README.md) · [在线演示](https://trp1119.github.io/alpha-video-player-js-demo)
+`alpha-video-player-js` 是零运行时依赖的 Web 透明视频播放 SDK。它把同一 MP4 帧内的 RGB 画面与灰度 Alpha 遮罩重新合成到 `<canvas>`，用于播放高还原度的透明视频动效。
+## 特性
+- 优先使用 WebGL，Canvas 2D 自动降级。
+- `alphaScale: 0` 时自动使用原生 `<video>` 播放普通不透明视频。
+- 支持横向、纵向、RGB 在前/后四类拼合格式，以及缩放 Alpha 遮罩。
+- 提供 Vue 3、Vue 2.7+、React 组件入口。
+- 零运行时依赖。
+## 安装与快速使用
+```bash
+npm install alpha-video-player-js
+```
+```ts
+import AlphaVideoPlayer from 'alpha-video-player-js'
+const player = new AlphaVideoPlayer({
+  container: document.querySelector<HTMLElement>('#player')!,
+  src: 'https://example.com/alpha-video.mp4',
+  width: 320,
+  height: 180,
+  muted: true,
+  loop: true,
+  autoShow: true,
+})
+await player.play()
+```
+未传 `width` / `height` 时，容器必须有可计算的尺寸。浏览器自动播放策略可能拒绝 `play()`，请处理其 Promise 拒绝。
+## 素材格式
+每帧视频由 RGB 区和 Alpha 区组成：RGB 区为彩色画面，Alpha 区为灰度遮罩，其 R 通道被用作输出透明度（白色不透明，黑色透明）。
+| `orientation` | `side: 'front'` | `side: 'back'` |
+| --- | --- | --- |
+| `landscape` | RGB 在左，Alpha 在右 | Alpha 在左，RGB 在右 |
+| `portrait` | RGB 在上，Alpha 在下 | Alpha 在上，RGB 在下 |
+`alphaScale` 表示 Alpha 遮罩相对 RGB 的宽高缩放：`1` 为等尺寸（默认），`0.5` 为宽高各一半，`0` 表示普通不透明视频。缩小遮罩可由 `alphaAlign` 对齐：横向布局的 `start/end` 分别为上/下；纵向布局分别为左/右。
+```ts
+new AlphaVideoPlayer({
+  container,
+  src,
+  orientation: 'landscape',
+  side: 'front',
+  alphaScale: 0.5,
+  alphaAlign: 'start',
+})
+```
+## 核心配置
+| 配置 | 默认值 | 说明 |
+| --- | --- | --- |
+| `container` | — | **必填**，挂载容器。 |
+| `src` | — | 视频地址；可稍后用 `setSrc()` 设置。 |
+| `poster` | 透明封面 | 视频封面。 |
+| `width` / `height` | 容器尺寸 | 逻辑渲染尺寸。 |
+| `crossOrigin` | `'anonymous'` | `'anonymous'` 或 `'use-credentials'`。 |
+| `muted` / `loop` / `playbackRate` | `true` / `false` / `1` | 播放状态与倍速。 |
+| `fps` / `videoFrame` | `0` / `false` | 帧率上限；是否优先用 `requestVideoFrameCallback`。 |
+| `orientation` / `side` | `'landscape'` / `'front'` | 素材拼合方式。 |
+| `alphaScale` / `alphaAlign` | `1` / `'start'` | 遮罩缩放与副轴对齐。 |
+| `autoShow` / `autoClear` / `autoDestroy` | `false` / `true` / `false` | 首帧、结束清理、自动销毁。 |
+| `autoResize` | `'contain'` | `'contain'`、`'width'`、`'height'` 或 `false`。 |
+| `debug` | `false` | 是否输出调试日志。 |
+回调：`onInitSuccess`、`onInitError`、`onLoad`、`onCanPlay`、`onPlay`、`onLoop`、`onPause`、`onEnded`、`onError`、`onDestroy`。
+## 实例 API
+`playing` 与 `loop` 为只读状态；其余公开方法包括：
+```ts
+player.play(config?)
+player.pause()
+player.reset()
+player.setSrc(src)
+player.setCurrentTime(seconds)
+player.setMute(muted)
+player.setLoop(loop)
+player.setPlaybackRate(rate)
+player.destroy()
+```
+`play()` 失败时会 reject 浏览器的原始错误，并以相同值调用 `onError`。媒体加载、解码或跨域失败也会通过 `onError` 上报，然后销毁实例。`destroy()` 后不要复用该实例。
+## 框架组件
+组件入口分别为 `alpha-video-player-js/vue3`、`alpha-video-player-js/vue2` 和 `alpha-video-player-js/react`。组件接收除 `container` 外的全部核心配置，ref 暴露 `play`、`pause`、`destroy`、`reset`、`setSrc`、`setCurrentTime`、`setMute`、`setLoop`、`setPlaybackRate` 与 `getPlayer`。
+### Vue 3
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import AlphaVideoPlayer from 'alpha-video-player-js/vue3'
+import type { IAlphaVideoPlayerRef } from 'alpha-video-player-js/vue3'
+const player = ref<IAlphaVideoPlayerRef | null>(null)
+</script>
+<template>
+  <AlphaVideoPlayer ref="player" :src="src" :muted="true" @initSuccess="player?.play()" />
+</template>
+```
+`playbackRate` 等数字型表单绑定请用 `v-model.number`。手动调用组件 ref 的 `destroy()` 后，应通过 `:key` 或 `v-if` 重新挂载组件。
+### React
+```tsx
+import { useRef } from 'react'
+import AlphaVideoPlayer from 'alpha-video-player-js/react'
+import type { IAlphaVideoPlayerRef } from 'alpha-video-player-js/react'
+export function Effect({ src }: { src: string }) {
+  const player = useRef<IAlphaVideoPlayerRef>(null)
+  return <AlphaVideoPlayer ref={player} src={src} muted onInitSuccess={() => player.current?.play()} />
+}
+```
+React 组件额外支持 `className` 与 `style`。`src`、`muted`、`loop`、`playbackRate` 会响应式同步；`orientation`、`side`、`alphaScale`、`alphaAlign` 变更时需要重新挂载。
+## 类型导入
+| 导入路径 | 类型 |
+| --- | --- |
+| `alpha-video-player-js` | `IAlphaVideoPlayer`、`IConfig`、`IOptionalConfig`、`IOrientation`、`ISide`、`IAlphaAlign` |
+| `.../vue3`、`.../vue2` | `IAlphaVideoPlayer`、`IAlphaVideoPlayerRef` |
+| `.../react` | `IAlphaVideoPlayerProps`、`IAlphaVideoPlayerRef` |
+同时使用框架 ref 与核心实例类型时，请从同一个框架子路径导入，避免生成声明文件被拆分解析时的类型不兼容。
+## 开发
+```bash
+npm run dev
+npm run build
+```
+## 许可证
+[ISC](./package.json)

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

@@ -3,6 +3,8 @@ interface IConfig {
     width?: number;
     height?: number;
     src?: string;
+    /** 视频封面；未传时使用内置透明封面规避 Android WebView 默认 poster 的 CORS 问题 */
+    poster?: string;
     /** 跨域视频资源；默认 anonymous */
     crossOrigin?: 'anonymous' | 'use-credentials';
     muted?: boolean;
@@ -11,17 +13,21 @@ interface IConfig {
     fps?: number;
     orientation?: IOrientation;
     side?: ISide;
+    /** Alpha 遮罩宽高相对 RGB 内容的缩放比例；0 表示普通不透明视频 */
+    alphaScale?: number;
+    /** Alpha 缩小后在副轴上的对齐方式 */
+    alphaAlign?: IAlphaAlign;
     videoFrame?: boolean;
     debug?: boolean;
     autoShow?: boolean;
     autoClear?: boolean;
     autoDestroy?: boolean;
     /**
-     * 视频加载后按比例自适应 canvas 尺寸（默认 'contain'）。
-     * - 'contain'：自动判断，确保视频完整填入 canvas 盒子（类似 object-fit: contain）
+     * 视频加载后按比例自适应渲染目标尺寸（默认 'contain'）。
+     * - 'contain'：自动判断，确保视频完整填入容器盒子（类似 object-fit: contain）
      * - 'width'：固定宽度，按视频比例自动调整高度
      * - 'height'：固定高度，按视频比例自动调整宽度
-     * - false：不自适应，canvas 保持初始尺寸
+     * - false：不自适应，渲染目标保持初始尺寸
      */
     autoResize?: 'width' | 'height' | 'contain' | false;
     onInitSuccess?: () => void;
@@ -39,6 +45,7 @@ interface IConfig {
 type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
 type IOrientation = 'landscape' | 'portrait';
 type ISide = 'front' | 'back';
+type IAlphaAlign = 'start' | 'end';
 declare class Render {
     private render;
@@ -58,4 +65,4 @@ declare class Render {
 /** 核心类实例类型（`new Render(...)` 的实例），便于业务侧标注 ref / getPlayer() 等 */
 type IAlphaVideoPlayer = InstanceType<typeof Render>;
-export { type IAlphaVideoPlayer, type IConfig, type IOptionalConfig, type IOrientation, type ISide, Render as default };
+export { type IAlphaAlign, type IAlphaVideoPlayer, type IConfig, type IOptionalConfig, type IOrientation, type ISide, Render as default };

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

	@@ -1 +1 @@
1	- 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?2i:i:"width"===e?i:2i},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=sa,h.height=da,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(lh),v="width"===u?Math.round(c/h):l,f=vd;pd===this.canvasWidth&&f===this.canvasHeight\|\|(!function(t,e,i){var n=o();t.width=en,t.height=in,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,6s,0),e.enableVertexAttribArray(d);var h=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(h,2,e.FLOAT,!1,6s,2s),e.enableVertexAttribArray(h);var c=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(c,2,e.FLOAT,!1,6s,4s),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};
1	+ 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{h(n.next(t))}catch(t){r(t)}}function s(t){try{h(n.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}h((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(h){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,h])}}}"function"==typeof SuppressedError&&SuppressedError;var o="start",r=function(){return"undefined"!=typeof window&&window.devicePixelRatio\|\|1},a=function(t){if(void 0===t&&(t=1),"number"!=typeof t\|\|!isFinite(t)\|\|t<0\|\|t>1)throw new Error("[alpha-video-player-js]: alphaScale must be a finite number between 0 and 1.");return t},s=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=o);var r=a(i);if("landscape"===t){var s=1/(1+r),h=r/(1+r);return{rgb:{x:"front"===e?0:h,y:0,width:s,height:1},alpha:{x:"front"===e?s:0,y:"start"===n?0:1-r,width:h,height:r}}}var d=1/(1+r),l=r/(1+r);return{rgb:{x:0,y:"front"===e?0:l,width:1,height:d},alpha:{x:"start"===n?0:1-r,y:"front"===e?d:0,width:r,height:l}}},h=function(t){var e=t.x,i=t.y,n=t.width,o=t.height;return[e,1-i,e+n,1-i,e,1-i-o,e+n,1-i-o]},d=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},l=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},c={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",alphaScale:1,alphaAlign:o,autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},u=function(){function t(t,e){if(void 0===e&&(e=!1),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.renderVideoDirectly=!1,this.playing=!1,!t.container)throw new Error("[alpha-video-player-js]: container can not be empty！");if(this.renderVideoDirectly=e,this.setConfig(t),this.container=t.container,!e){this.canvas=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,a=r(),s=e\|\|n,h=i\|\|o;s&&h\|\|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 d=document.createElement("canvas");return d.width=sa,d.height=ha,d.style.width="100%",d.style.height="100%",d.style.pointerEvents="none",t.appendChild(d),d}(this.container,t.width,t.height);var i=this.canvas,n=i.width,o=i.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){if(t){var e=Object.assign({},c,this.config\|\|{},t);e.alphaScale=a(e.alphaScale),e.alphaAlign=e.alphaAlign\|\|o,this.config=e}},t.prototype.initVideo=function(){var t=this.config,e=t.src,i=t.poster,n=t.playbackRate,o=t.muted,r=t.loop,a=t.crossOrigin,s=this.video=document.createElement("video");if(s.crossOrigin=null!=a?a:"anonymous",s.poster=i\|\|"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",s.src=e,s.autoplay=!1,s.preload="auto",s.playbackRate=n,s.loop=r,s.muted=o,o&&s.setAttribute("muted",""),s.setAttribute("playsinline",""),s.setAttribute("webkit-playsinline",""),s.setAttribute("x-webkit-airplay",""),this.renderVideoDirectly){var h=this.config.width\|\|this.container.offsetWidth,d=this.config.height\|\|this.container.offsetHeight;s.style.display="block",s.style.width=h?"".concat(h,"px"):"100%",s.style.height=d?"".concat(d,"px"):"100%",s.style.visibility=this.config.autoShow?"visible":"hidden",s.style.pointerEvents="none",this.container.appendChild(s)}else s.style.position="absolute",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.pointerEvents="none",document.body.appendChild(s);this.bindInstance(),this.addEvent(),s.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}else 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:d(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.renderVideoDirectly?(this.setNativeVideoVisible(!0),this.playing=!0):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(){d(this.video),this.video.pause(),this.renderVideoDirectly?this.playing=!1: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.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){d(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){d(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){d(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){d(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,i=this,n=i.video,a=i.config,h=i.canvas;if(this.videoWidth=n.videoWidth,this.videoHeight=n.videoHeight,a.autoResize&&(h\|\|this.renderVideoDirectly)&&n.videoWidth>0&&n.videoHeight>0){var d=r(),l=function(t,e,i,n,r){if(void 0===n&&(n=1),void 0===r&&(r=o),0===n)return t/e;var a=s(i,"front",n,r).rgb;return ta.width/(ea.height)}(n.videoWidth,n.videoHeight,a.orientation,a.alphaScale,a.alphaAlign),c=h?h.width/d:a.width\|\|(null===(t=this.container)\|\|void 0===t?void 0:t.offsetWidth)\|\|n.videoWidth,u=h?h.height/d:a.height\|\|(null===(e=this.container)\|\|void 0===e?void 0:e.offsetHeight)\|\|n.videoHeight,p=void 0;if("width"===a.autoResize\|\|"height"===a.autoResize)p=a.autoResize;else p=l>=c/u?"width":"height";var v="width"===p?c:Math.round(ul),f="width"===p?Math.round(c/l):u,y=fd;!h\|\|vd===this.canvasWidth&&y===this.canvasHeight?this.renderVideoDirectly&&(n.style.width="".concat(v,"px"),n.style.height="".concat(f,"px")):(!function(t,e,i){var n=r();t.width=en,t.height=in,t.style.width=e+"px",t.style.height=i+"px"}(h,v,f),this.canvasWidth=h.width,this.canvasHeight=h.height,this.onCanvasResized())}a.onLoad&&a.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!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.setNativeVideoVisible=function(t){this.renderVideoDirectly&&this.video&&(this.video.style.visibility=t?"visible":"hidden")},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}(),p=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,r=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=o);var r=[-1,1,1,1,-1,-1,1,-1],a=s(t,e,i,n),d=a.rgb,l=a.alpha,c=h(d),u=h(l),p=[];return r.forEach((function(t,e){e%2==0&&(p=p.concat(r.slice(e,e+2)).concat(c.slice(e,e+2)).concat(u.slice(e,e+2)))})),new Float32Array(p)}(n.orientation,n.side,n.alphaScale,n.alphaAlign),a=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,r,e.STATIC_DRAW);var d=r.BYTES_PER_ELEMENT,l=e.getAttribLocation(i,"a_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6d,0),e.enableVertexAttribArray(l);var c=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(c,2,e.FLOAT,!1,6d,2d),e.enableVertexAttribArray(c);var u=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6d,4d),e.enableVertexAttribArray(u);var p=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(p,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&&l(e)&&(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,h=n.texture,d=n.vertexBuffer,l=n.program;o&&r&&(t.prototype.destroy.call(this),null===(e=o.parentNode)\|\|void 0===e\|\|e.removeChild(o),r.detachShader(l,a),r.deleteShader(a),r.detachShader(l,s),r.deleteShader(s),r.deleteTexture(h),r.deleteBuffer(d),r.deleteProgram(l),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}(u),v=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.canvas;this.context2d=t.getContext("2d"),this.resizeAlphaCanvas()},i.prototype.onCanvasResized=function(){this.context2d=this.canvas.getContext("2d"),this.resizeAlphaCanvas()},i.prototype.resizeAlphaCanvas=function(){var t=this.alphaCanvas\|\|document.createElement("canvas");t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d")},i.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,i=t.alphaContext2d,n=t.video,o=t.canPlay,r=t.videoWidth,a=t.videoHeight,h=t.canvasWidth,d=t.canvasHeight,c=t.config;if(e&&i&&n&&o&&l(n)&&r&&a&&h&&d){var u=s(c.orientation,c.side,c.alphaScale,c.alphaAlign),p=u.rgb,v=u.alpha;e.drawImage(n,p.xr,p.ya,p.widthr,p.heighta,0,0,h,d);var f=e.getImageData(0,0,h,d),y=f.data;i.drawImage(n,v.xr,v.ya,v.widthr,v.heighta,0,0,h,d);for(var g=i.getImageData(0,0,h,d).data,m=3;m<y.length;m+=4)y[m]=g[m-3];e.putImageData(f,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.alphaCanvas=null,this.alphaContext2d=null)},i}(u),f=function(t){function i(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{i=t.call(this,e,!0)\|\|this,null==n\|\|n()}catch(t){if(!o)throw t;o(t)}return i}return e(i,t),i.prototype.onEnded=function(){var e=this.config;e.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this),e.autoDestroy&&this.destroy()},i.prototype.destroy=function(){t.prototype.destroy.call(this)},i}(u),y=function(){function t(t){var e,i=a(t.alphaScale),n=Object.assign({},t,{alphaScale:i});if(0===i)this.render=new f(n);else if((e=document.createElement("canvas")).getContext("webgl")\|\|e.getContext("experimental-webgl"))this.render=new p(n);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(n)}}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{y as default};

package/dist/react.d.ts CHANGED Viewed

@@ -5,6 +5,8 @@ interface IConfig {
     width?: number;
     height?: number;
     src?: string;
+    /** 视频封面；未传时使用内置透明封面规避 Android WebView 默认 poster 的 CORS 问题 */
+    poster?: string;
     /** 跨域视频资源；默认 anonymous */
     crossOrigin?: 'anonymous' | 'use-credentials';
     muted?: boolean;
@@ -13,17 +15,21 @@ interface IConfig {
     fps?: number;
     orientation?: IOrientation;
     side?: ISide;
+    /** Alpha 遮罩宽高相对 RGB 内容的缩放比例；0 表示普通不透明视频 */
+    alphaScale?: number;
+    /** Alpha 缩小后在副轴上的对齐方式 */
+    alphaAlign?: IAlphaAlign;
     videoFrame?: boolean;
     debug?: boolean;
     autoShow?: boolean;
     autoClear?: boolean;
     autoDestroy?: boolean;
     /**
-     * 视频加载后按比例自适应 canvas 尺寸（默认 'contain'）。
-     * - 'contain'：自动判断，确保视频完整填入 canvas 盒子（类似 object-fit: contain）
+     * 视频加载后按比例自适应渲染目标尺寸（默认 'contain'）。
+     * - 'contain'：自动判断，确保视频完整填入容器盒子（类似 object-fit: contain）
      * - 'width'：固定宽度，按视频比例自动调整高度
      * - 'height'：固定高度，按视频比例自动调整宽度
-     * - false：不自适应，canvas 保持初始尺寸
+     * - false：不自适应，渲染目标保持初始尺寸
      */
     autoResize?: 'width' | 'height' | 'contain' | false;
     onInitSuccess?: () => void;
@@ -41,6 +47,7 @@ interface IConfig {
 type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
 type IOrientation = 'landscape' | 'portrait';
 type ISide = 'front' | 'back';
+type IAlphaAlign = 'start' | 'end';
 declare class Render {
     private render;
@@ -78,6 +85,7 @@ type IAlphaVideoPlayerRef = {
 interface IAlphaVideoPlayerProps {
     src?: string;
+    poster?: string;
     width?: number;
     height?: number;
     crossOrigin?: 'anonymous' | 'use-credentials';
@@ -87,6 +95,8 @@ interface IAlphaVideoPlayerProps {
     fps?: number;
     orientation?: IOrientation;
     side?: ISide;
+    alphaScale?: number;
+    alphaAlign?: IAlphaAlign;
     videoFrame?: boolean;
     debug?: boolean;
     autoShow?: boolean;

package/dist/react.js CHANGED Viewed

	@@ -1 +1 @@
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?2n:n:"width"===e?n:2n},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=ar,u.height=sr,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(cu),v="width"===h?Math.round(d/u):c,f=vs;ps===this.canvasWidth&&f===this.canvasHeight\|\|(!function(t,e,n){var o=l();t.width=eo,t.height=no,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,6a,0),e.enableVertexAttribArray(s);var u=e.getAttribLocation(n,"a_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6a,2a),e.enableVertexAttribArray(u);var l=e.getAttribLocation(n,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6a,4a),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};
1	+ import t,{forwardRef as e,useRef as i,useEffect as n,useImperativeHandle as o}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 i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},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 i(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}function s(t,e,i,n){return new(i\|\|(i=Promise))((function(o,r){function a(t){try{l(n.next(t))}catch(t){r(t)}}function s(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}l((n=n.apply(t,e\|\|[])).next())}))}function l(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(l){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,l])}}}"function"==typeof SuppressedError&&SuppressedError;var d="start",u=function(){return"undefined"!=typeof window&&window.devicePixelRatio\|\|1},c=function(t){if(void 0===t&&(t=1),"number"!=typeof t\|\|!isFinite(t)\|\|t<0\|\|t>1)throw new Error("[alpha-video-player-js]: alphaScale must be a finite number between 0 and 1.");return t},h=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=d);var o=c(i);if("landscape"===t){var r=1/(1+o),a=o/(1+o);return{rgb:{x:"front"===e?0:a,y:0,width:r,height:1},alpha:{x:"front"===e?r:0,y:"start"===n?0:1-o,width:a,height:o}}}var s=1/(1+o),l=o/(1+o);return{rgb:{x:0,y:"front"===e?0:l,width:1,height:s},alpha:{x:"start"===n?0:1-o,y:"front"===e?s:0,width:o,height:l}}},v=function(t){var e=t.x,i=t.y,n=t.width,o=t.height;return[e,1-i,e+n,1-i,e,1-i-o,e+n,1-i-o]},p=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},f=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},y={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",alphaScale:1,alphaAlign:d,autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},g=function(){function t(t,e){if(void 0===e&&(e=!1),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.renderVideoDirectly=!1,this.playing=!1,!t.container)throw new Error("[alpha-video-player-js]: container can not be empty！");if(this.renderVideoDirectly=e,this.setConfig(t),this.container=t.container,!e){this.canvas=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=u(),a=e\|\|n,s=i\|\|o;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 l=document.createElement("canvas");return l.width=ar,l.height=sr,l.style.width="100%",l.style.height="100%",l.style.pointerEvents="none",t.appendChild(l),l}(this.container,t.width,t.height);var i=this.canvas,n=i.width,o=i.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){if(t){var e=Object.assign({},y,this.config\|\|{},t);e.alphaScale=c(e.alphaScale),e.alphaAlign=e.alphaAlign\|\|d,this.config=e}},t.prototype.initVideo=function(){var t=this.config,e=t.src,i=t.poster,n=t.playbackRate,o=t.muted,r=t.loop,a=t.crossOrigin,s=this.video=document.createElement("video");if(s.crossOrigin=null!=a?a:"anonymous",s.poster=i\|\|"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",s.src=e,s.autoplay=!1,s.preload="auto",s.playbackRate=n,s.loop=r,s.muted=o,o&&s.setAttribute("muted",""),s.setAttribute("playsinline",""),s.setAttribute("webkit-playsinline",""),s.setAttribute("x-webkit-airplay",""),this.renderVideoDirectly){var l=this.config.width\|\|this.container.offsetWidth,d=this.config.height\|\|this.container.offsetHeight;s.style.display="block",s.style.width=l?"".concat(l,"px"):"100%",s.style.height=d?"".concat(d,"px"):"100%",s.style.visibility=this.config.autoShow?"visible":"hidden",s.style.pointerEvents="none",this.container.appendChild(s)}else s.style.position="absolute",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.pointerEvents="none",document.body.appendChild(s);this.bindInstance(),this.addEvent(),s.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}else this.playing=!1},t.prototype.play=function(t){var e,i;return s(this,void 0,void 0,(function(){var n,o;return l(this,(function(r){switch(r.label){case 0:p(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 n=r.sent(),this.renderVideoDirectly?(this.setNativeVideoVisible(!0),this.playing=!0):this.drawFrame(),[2,n];case 3:throw o=r.sent(),null===(i=(e=this.config).onError)\|\|void 0===i\|\|i.call(e,o),o;case 4:return[2]}}))}))},t.prototype.pause=function(){p(this.video),this.video.pause(),this.renderVideoDirectly?this.playing=!1: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.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){p(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){p(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){p(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){p(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,i=this,n=i.video,o=i.config,r=i.canvas;if(this.videoWidth=n.videoWidth,this.videoHeight=n.videoHeight,o.autoResize&&(r\|\|this.renderVideoDirectly)&&n.videoWidth>0&&n.videoHeight>0){var a=u(),s=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=d),0===n)return t/e;var r=h(i,"front",n,o).rgb;return tr.width/(er.height)}(n.videoWidth,n.videoHeight,o.orientation,o.alphaScale,o.alphaAlign),l=r?r.width/a:o.width\|\|(null===(t=this.container)\|\|void 0===t?void 0:t.offsetWidth)\|\|n.videoWidth,c=r?r.height/a:o.height\|\|(null===(e=this.container)\|\|void 0===e?void 0:e.offsetHeight)\|\|n.videoHeight,v=void 0;if("width"===o.autoResize\|\|"height"===o.autoResize)v=o.autoResize;else v=s>=l/c?"width":"height";var p="width"===v?l:Math.round(cs),f="width"===v?Math.round(l/s):c,y=fa;!r\|\|pa===this.canvasWidth&&y===this.canvasHeight?this.renderVideoDirectly&&(n.style.width="".concat(p,"px"),n.style.height="".concat(f,"px")):(!function(t,e,i){var n=u();t.width=en,t.height=in,t.style.width=e+"px",t.style.height=i+"px"}(r,p,f),this.canvasWidth=r.width,this.canvasHeight=r.height,this.onCanvasResized())}o.onLoad&&o.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!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.setNativeVideoVisible=function(t){this.renderVideoDirectly&&this.video&&(this.video.style.visibility=t?"visible":"hidden")},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}(),m=function(t){function e(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 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 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},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 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},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,i=t.program,n=t.config,o=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=d);var o=[-1,1,1,1,-1,-1,1,-1],r=h(t,e,i,n),a=r.rgb,s=r.alpha,l=v(a),u=v(s),c=[];return o.forEach((function(t,e){e%2==0&&(c=c.concat(o.slice(e,e+2)).concat(l.slice(e,e+2)).concat(u.slice(e,e+2)))})),new Float32Array(c)}(n.orientation,n.side,n.alphaScale,n.alphaAlign),r=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW);var a=o.BYTES_PER_ELEMENT,s=e.getAttribLocation(i,"a_Position");e.vertexAttribPointer(s,2,e.FLOAT,!1,6a,0),e.enableVertexAttribArray(s);var l=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6a,2a),e.enableVertexAttribArray(l);var u=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6a,4a),e.enableVertexAttribArray(u);var c=e.getUniformLocation(i,"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&&f(e)&&(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,i=this.config;i.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),i.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,i,n=this,o=n.canvas,r=n.gl,a=n.vertexShader,s=n.fragmentShader,l=n.texture,d=n.vertexBuffer,u=n.program;o&&r&&(t.prototype.destroy.call(this),null===(e=o.parentNode)\|\|void 0===e\|\|e.removeChild(o),r.detachShader(u,a),r.deleteShader(a),r.detachShader(u,s),r.deleteShader(s),r.deleteTexture(l),r.deleteBuffer(d),r.deleteProgram(u),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)},e}(g),b=function(t){function e(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 a(e,t),e.prototype.initCanvasRender=function(){var t=this.canvas;this.context2d=t.getContext("2d"),this.resizeAlphaCanvas()},e.prototype.onCanvasResized=function(){this.context2d=this.canvas.getContext("2d"),this.resizeAlphaCanvas()},e.prototype.resizeAlphaCanvas=function(){var t=this.alphaCanvas\|\|document.createElement("canvas");t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d")},e.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,i=t.alphaContext2d,n=t.video,o=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.canvasWidth,l=t.canvasHeight,d=t.config;if(e&&i&&n&&o&&f(n)&&r&&a&&s&&l){var u=h(d.orientation,d.side,d.alphaScale,d.alphaAlign),c=u.rgb,v=u.alpha;e.drawImage(n,c.xr,c.ya,c.widthr,c.heighta,0,0,s,l);var p=e.getImageData(0,0,s,l),y=p.data;i.drawImage(n,v.xr,v.ya,v.widthr,v.heighta,0,0,s,l);for(var g=i.getImageData(0,0,s,l).data,m=3;m<y.length;m+=4)y[m]=g[m-3];e.putImageData(p,0,0)}},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.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()},e.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.alphaCanvas=null,this.alphaContext2d=null)},e}(g),w=function(t){function e(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{i=t.call(this,e,!0)\|\|this,null==n\|\|n()}catch(t){if(!o)throw t;o(t)}return i}return a(e,t),e.prototype.onEnded=function(){var e=this.config;e.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this),e.autoDestroy&&this.destroy()},e.prototype.destroy=function(){t.prototype.destroy.call(this)},e}(g),E=function(){function t(t){var e,i=c(t.alphaScale),n=Object.assign({},t,{alphaScale:i});if(0===i)this.render=new w(n);else if((e=document.createElement("canvas")).getContext("webgl")\|\|e.getContext("experimental-webgl"))this.render=new m(n);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(n)}}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 l(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}(),A=e((function(e,r){var a=i(null),s=i(null),l=i(e);return l.current=e,n((function(){var t,e,i,n,o,r,u;if(a.current){var c=l.current;return s.current=new E({container:a.current,src:c.src,poster:c.poster,width:c.width,height:c.height,crossOrigin:c.crossOrigin,muted:null===(t=c.muted)\|\|void 0===t\|\|t,loop:null!==(e=c.loop)&&void 0!==e&&e,playbackRate:null!==(i=c.playbackRate)&&void 0!==i?i:1,fps:c.fps,orientation:null!==(n=c.orientation)&&void 0!==n?n:"landscape",side:null!==(o=c.side)&&void 0!==o?o:"front",alphaScale:null!==(r=c.alphaScale)&&void 0!==r?r:1,alphaAlign:null!==(u=c.alphaAlign)&&void 0!==u?u:d,videoFrame:c.videoFrame,debug:c.debug,autoShow:c.autoShow,autoClear:c.autoClear,autoDestroy:c.autoDestroy,autoResize:c.autoResize,onInitSuccess:function(){var t,e;return null===(e=(t=l.current).onInitSuccess)\|\|void 0===e?void 0:e.call(t)},onInitError:function(t){var e,i;return null===(i=(e=l.current).onInitError)\|\|void 0===i?void 0:i.call(e,t)},onLoad:function(){var t,e;return null===(e=(t=l.current).onLoad)\|\|void 0===e?void 0:e.call(t)},onCanPlay:function(){var t,e;return null===(e=(t=l.current).onCanPlay)\|\|void 0===e?void 0:e.call(t)},onPlay:function(){var t,e;return null===(e=(t=l.current).onPlay)\|\|void 0===e?void 0:e.call(t)},onLoop:function(){var t,e;return null===(e=(t=l.current).onLoop)\|\|void 0===e?void 0:e.call(t)},onPause:function(){var t,e;return null===(e=(t=l.current).onPause)\|\|void 0===e?void 0:e.call(t)},onEnded:function(){var t,e;return null===(e=(t=l.current).onEnded)\|\|void 0===e?void 0:e.call(t)},onError:function(t){var e,i;return null===(i=(e=l.current).onError)\|\|void 0===i?void 0:i.call(e,t)},onDestroy:function(){var t,e;return null===(e=(t=l.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}}}),[]),n((function(){var t;null!=e.src&&(null===(t=s.current)\|\|void 0===t\|\|t.setSrc(e.src))}),[e.src]),n((function(){var t,i;null===(t=s.current)\|\|void 0===t\|\|t.setMute(null===(i=e.muted)\|\|void 0===i\|\|i)}),[e.muted]),n((function(){var t,i;null===(t=s.current)\|\|void 0===t\|\|t.setLoop(null!==(i=e.loop)&&void 0!==i&&i)}),[e.loop]),n((function(){var t,i;null===(t=s.current)\|\|void 0===t\|\|t.setPlaybackRate(null!==(i=e.playbackRate)&&void 0!==i?i:1)}),[e.playbackRate]),o(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})}));A.displayName="AlphaVideoPlayer";export{A as default};

package/dist/vue2.d.ts CHANGED Viewed

@@ -5,6 +5,8 @@ interface IConfig {
     width?: number;
     height?: number;
     src?: string;
+    /** 视频封面；未传时使用内置透明封面规避 Android WebView 默认 poster 的 CORS 问题 */
+    poster?: string;
     /** 跨域视频资源；默认 anonymous */
     crossOrigin?: 'anonymous' | 'use-credentials';
     muted?: boolean;
@@ -13,17 +15,21 @@ interface IConfig {
     fps?: number;
     orientation?: IOrientation;
     side?: ISide;
+    /** Alpha 遮罩宽高相对 RGB 内容的缩放比例；0 表示普通不透明视频 */
+    alphaScale?: number;
+    /** Alpha 缩小后在副轴上的对齐方式 */
+    alphaAlign?: IAlphaAlign;
     videoFrame?: boolean;
     debug?: boolean;
     autoShow?: boolean;
     autoClear?: boolean;
     autoDestroy?: boolean;
     /**
-     * 视频加载后按比例自适应 canvas 尺寸（默认 'contain'）。
-     * - 'contain'：自动判断，确保视频完整填入 canvas 盒子（类似 object-fit: contain）
+     * 视频加载后按比例自适应渲染目标尺寸（默认 'contain'）。
+     * - 'contain'：自动判断，确保视频完整填入容器盒子（类似 object-fit: contain）
      * - 'width'：固定宽度，按视频比例自动调整高度
      * - 'height'：固定高度，按视频比例自动调整宽度
-     * - false：不自适应，canvas 保持初始尺寸
+     * - false：不自适应，渲染目标保持初始尺寸
      */
     autoResize?: 'width' | 'height' | 'contain' | false;
     onInitSuccess?: () => void;
@@ -41,6 +47,7 @@ interface IConfig {
 type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
 type IOrientation = 'landscape' | 'portrait';
 type ISide = 'front' | 'back';
+type IAlphaAlign = 'start' | 'end';
 declare class Render {
     private render;

package/dist/vue2.js CHANGED Viewed

	@@ -1 +1 @@
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?2n:n:"width"===e?n:2n},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=sa,l.height=da,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(cl),v="width"===h?Math.round(u/l):c,f=vd;pd===this.canvasWidth&&f===this.canvasHeight\|\|(!function(t,e,n){var o=r();t.width=eo,t.height=no,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,6s,0),e.enableVertexAttribArray(d);var l=e.getAttribLocation(n,"a_Video_Texture_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6s,2s),e.enableVertexAttribArray(l);var u=e.getAttribLocation(n,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6s,4s),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};
1	+ import t from"vue";var e=function(t,i){return e=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])},e(t,i)};function i(t,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=t}e(t,i),t.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}function n(t,e,i,n){return new(i\|\|(i=Promise))((function(o,r){function a(t){try{l(n.next(t))}catch(t){r(t)}}function s(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}l((n=n.apply(t,e\|\|[])).next())}))}function o(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(l){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,l])}}}"function"==typeof SuppressedError&&SuppressedError;var r="start",a=function(){return"undefined"!=typeof window&&window.devicePixelRatio\|\|1},s=function(t){if(void 0===t&&(t=1),"number"!=typeof t\|\|!isFinite(t)\|\|t<0\|\|t>1)throw new Error("[alpha-video-player-js]: alphaScale must be a finite number between 0 and 1.");return t},l=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=r);var o=s(i);if("landscape"===t){var a=1/(1+o),l=o/(1+o);return{rgb:{x:"front"===e?0:l,y:0,width:a,height:1},alpha:{x:"front"===e?a:0,y:"start"===n?0:1-o,width:l,height:o}}}var d=1/(1+o),h=o/(1+o);return{rgb:{x:0,y:"front"===e?0:h,width:1,height:d},alpha:{x:"start"===n?0:1-o,y:"front"===e?d:0,width:o,height:h}}},d=function(t){var e=t.x,i=t.y,n=t.width,o=t.height;return[e,1-i,e+n,1-i,e,1-i-o,e+n,1-i-o]},h=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},u=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},c={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",alphaScale:1,alphaAlign:r,autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},p=function(){function t(t,e){if(void 0===e&&(e=!1),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.renderVideoDirectly=!1,this.playing=!1,!t.container)throw new Error("[alpha-video-player-js]: container can not be empty！");if(this.renderVideoDirectly=e,this.setConfig(t),this.container=t.container,!e){this.canvas=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=a(),s=e\|\|n,l=i\|\|o;s&&l\|\|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 d=document.createElement("canvas");return d.width=sr,d.height=lr,d.style.width="100%",d.style.height="100%",d.style.pointerEvents="none",t.appendChild(d),d}(this.container,t.width,t.height);var i=this.canvas,n=i.width,o=i.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){if(t){var e=Object.assign({},c,this.config\|\|{},t);e.alphaScale=s(e.alphaScale),e.alphaAlign=e.alphaAlign\|\|r,this.config=e}},t.prototype.initVideo=function(){var t=this.config,e=t.src,i=t.poster,n=t.playbackRate,o=t.muted,r=t.loop,a=t.crossOrigin,s=this.video=document.createElement("video");if(s.crossOrigin=null!=a?a:"anonymous",s.poster=i\|\|"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",s.src=e,s.autoplay=!1,s.preload="auto",s.playbackRate=n,s.loop=r,s.muted=o,o&&s.setAttribute("muted",""),s.setAttribute("playsinline",""),s.setAttribute("webkit-playsinline",""),s.setAttribute("x-webkit-airplay",""),this.renderVideoDirectly){var l=this.config.width\|\|this.container.offsetWidth,d=this.config.height\|\|this.container.offsetHeight;s.style.display="block",s.style.width=l?"".concat(l,"px"):"100%",s.style.height=d?"".concat(d,"px"):"100%",s.style.visibility=this.config.autoShow?"visible":"hidden",s.style.pointerEvents="none",this.container.appendChild(s)}else s.style.position="absolute",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.pointerEvents="none",document.body.appendChild(s);this.bindInstance(),this.addEvent(),s.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}else this.playing=!1},t.prototype.play=function(t){var e,i;return n(this,void 0,void 0,(function(){var n,r;return o(this,(function(o){switch(o.label){case 0:h(this.video),t&&this.setConfig(t),o.label=1;case 1:return o.trys.push([1,3,,4]),[4,this.video.play()];case 2:return n=o.sent(),this.renderVideoDirectly?(this.setNativeVideoVisible(!0),this.playing=!0):this.drawFrame(),[2,n];case 3:throw r=o.sent(),null===(i=(e=this.config).onError)\|\|void 0===i\|\|i.call(e,r),r;case 4:return[2]}}))}))},t.prototype.pause=function(){h(this.video),this.video.pause(),this.renderVideoDirectly?this.playing=!1: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.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),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=this,n=i.video,o=i.config,s=i.canvas;if(this.videoWidth=n.videoWidth,this.videoHeight=n.videoHeight,o.autoResize&&(s\|\|this.renderVideoDirectly)&&n.videoWidth>0&&n.videoHeight>0){var d=a(),h=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=r),0===n)return t/e;var a=l(i,"front",n,o).rgb;return ta.width/(ea.height)}(n.videoWidth,n.videoHeight,o.orientation,o.alphaScale,o.alphaAlign),u=s?s.width/d:o.width\|\|(null===(t=this.container)\|\|void 0===t?void 0:t.offsetWidth)\|\|n.videoWidth,c=s?s.height/d:o.height\|\|(null===(e=this.container)\|\|void 0===e?void 0:e.offsetHeight)\|\|n.videoHeight,p=void 0;if("width"===o.autoResize\|\|"height"===o.autoResize)p=o.autoResize;else p=h>=u/c?"width":"height";var v="width"===p?u:Math.round(ch),f="width"===p?Math.round(u/h):c,y=fd;!s\|\|vd===this.canvasWidth&&y===this.canvasHeight?this.renderVideoDirectly&&(n.style.width="".concat(v,"px"),n.style.height="".concat(f,"px")):(!function(t,e,i){var n=a();t.width=en,t.height=in,t.style.width=e+"px",t.style.height=i+"px"}(s,v,f),this.canvasWidth=s.width,this.canvasHeight=s.height,this.onCanvasResized())}o.onLoad&&o.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!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.setNativeVideoVisible=function(t){this.renderVideoDirectly&&this.video&&(this.video.style.visibility=t?"visible":"hidden")},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}(),v=function(t){function e(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 i(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 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},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 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},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,i=t.program,n=t.config,o=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=r);var o=[-1,1,1,1,-1,-1,1,-1],a=l(t,e,i,n),s=a.rgb,h=a.alpha,u=d(s),c=d(h),p=[];return o.forEach((function(t,e){e%2==0&&(p=p.concat(o.slice(e,e+2)).concat(u.slice(e,e+2)).concat(c.slice(e,e+2)))})),new Float32Array(p)}(n.orientation,n.side,n.alphaScale,n.alphaAlign),a=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,a),e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW);var s=o.BYTES_PER_ELEMENT,h=e.getAttribLocation(i,"a_Position");e.vertexAttribPointer(h,2,e.FLOAT,!1,6s,0),e.enableVertexAttribArray(h);var u=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6s,2s),e.enableVertexAttribArray(u);var c=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(c,2,e.FLOAT,!1,6s,4s),e.enableVertexAttribArray(c);var p=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(p,0),a},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&&u(e)&&(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,i=this.config;i.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),i.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,i,n=this,o=n.canvas,r=n.gl,a=n.vertexShader,s=n.fragmentShader,l=n.texture,d=n.vertexBuffer,h=n.program;o&&r&&(t.prototype.destroy.call(this),null===(e=o.parentNode)\|\|void 0===e\|\|e.removeChild(o),r.detachShader(h,a),r.deleteShader(a),r.detachShader(h,s),r.deleteShader(s),r.deleteTexture(l),r.deleteBuffer(d),r.deleteProgram(h),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)},e}(p),f=function(t){function e(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 i(e,t),e.prototype.initCanvasRender=function(){var t=this.canvas;this.context2d=t.getContext("2d"),this.resizeAlphaCanvas()},e.prototype.onCanvasResized=function(){this.context2d=this.canvas.getContext("2d"),this.resizeAlphaCanvas()},e.prototype.resizeAlphaCanvas=function(){var t=this.alphaCanvas\|\|document.createElement("canvas");t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d")},e.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,i=t.alphaContext2d,n=t.video,o=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.canvasWidth,d=t.canvasHeight,h=t.config;if(e&&i&&n&&o&&u(n)&&r&&a&&s&&d){var c=l(h.orientation,h.side,h.alphaScale,h.alphaAlign),p=c.rgb,v=c.alpha;e.drawImage(n,p.xr,p.ya,p.widthr,p.heighta,0,0,s,d);var f=e.getImageData(0,0,s,d),y=f.data;i.drawImage(n,v.xr,v.ya,v.widthr,v.heighta,0,0,s,d);for(var g=i.getImageData(0,0,s,d).data,m=3;m<y.length;m+=4)y[m]=g[m-3];e.putImageData(f,0,0)}},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.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()},e.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.alphaCanvas=null,this.alphaContext2d=null)},e}(p),y=function(t){function e(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{i=t.call(this,e,!0)\|\|this,null==n\|\|n()}catch(t){if(!o)throw t;o(t)}return i}return i(e,t),e.prototype.onEnded=function(){var e=this.config;e.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this),e.autoDestroy&&this.destroy()},e.prototype.destroy=function(){t.prototype.destroy.call(this)},e}(p),g=function(){function t(t){var e,i=s(t.alphaScale),n=Object.assign({},t,{alphaScale:i});if(0===i)this.render=new y(n);else if((e=document.createElement("canvas")).getContext("webgl")\|\|e.getContext("experimental-webgl"))this.render=new v(n);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 f(n)}}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 n(this,void 0,void 0,(function(){return o(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}(),m=t.extend({name:"AlphaVideoPlayer",props:{src:{type:String,default:void 0},poster:{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"},alphaScale:{type:Number,default:1},alphaAlign:{type:String,default:r},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 g({container:e,src:t.src,poster:t.poster,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,alphaScale:t.alphaScale,alphaAlign:t.alphaAlign,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{m as default};

package/dist/vue3.d.ts CHANGED Viewed

@@ -6,6 +6,8 @@ interface IConfig {
     width?: number;
     height?: number;
     src?: string;
+    /** 视频封面；未传时使用内置透明封面规避 Android WebView 默认 poster 的 CORS 问题 */
+    poster?: string;
     /** 跨域视频资源；默认 anonymous */
     crossOrigin?: 'anonymous' | 'use-credentials';
     muted?: boolean;
@@ -14,17 +16,21 @@ interface IConfig {
     fps?: number;
     orientation?: IOrientation;
     side?: ISide;
+    /** Alpha 遮罩宽高相对 RGB 内容的缩放比例；0 表示普通不透明视频 */
+    alphaScale?: number;
+    /** Alpha 缩小后在副轴上的对齐方式 */
+    alphaAlign?: IAlphaAlign;
     videoFrame?: boolean;
     debug?: boolean;
     autoShow?: boolean;
     autoClear?: boolean;
     autoDestroy?: boolean;
     /**
-     * 视频加载后按比例自适应 canvas 尺寸（默认 'contain'）。
-     * - 'contain'：自动判断，确保视频完整填入 canvas 盒子（类似 object-fit: contain）
+     * 视频加载后按比例自适应渲染目标尺寸（默认 'contain'）。
+     * - 'contain'：自动判断，确保视频完整填入容器盒子（类似 object-fit: contain）
      * - 'width'：固定宽度，按视频比例自动调整高度
      * - 'height'：固定高度，按视频比例自动调整宽度
-     * - false：不自适应，canvas 保持初始尺寸
+     * - false：不自适应，渲染目标保持初始尺寸
      */
     autoResize?: 'width' | 'height' | 'contain' | false;
     onInitSuccess?: () => void;
@@ -42,12 +48,17 @@ interface IConfig {
 type IOptionalConfig = Omit<IConfig, 'container' | 'src'> & Partial<Pick<IConfig, 'container' | 'src'>>;
 type IOrientation = 'landscape' | 'portrait';
 type ISide = 'front' | 'back';
+type IAlphaAlign = 'start' | 'end';
 declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
     src: {
         type: StringConstructor;
         default: any;
     };
+    poster: {
+        type: StringConstructor;
+        default: any;
+    };
     width: {
         type: NumberConstructor;
         default: any;
@@ -84,6 +95,14 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<ISide>;
         default: string;
     };
+    alphaScale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    alphaAlign: {
+        type: PropType<IAlphaAlign>;
+        default: IAlphaAlign;
+    };
     videoFrame: {
         type: BooleanConstructor;
         default: boolean;
@@ -115,6 +134,10 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
         type: StringConstructor;
         default: any;
     };
+    poster: {
+        type: StringConstructor;
+        default: any;
+    };
     width: {
         type: NumberConstructor;
         default: any;
@@ -151,6 +174,14 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<ISide>;
         default: string;
     };
+    alphaScale: {
+        type: NumberConstructor;
+        default: number;
+    };
+    alphaAlign: {
+        type: PropType<IAlphaAlign>;
+        default: IAlphaAlign;
+    };
     videoFrame: {
         type: BooleanConstructor;
         default: boolean;
@@ -190,6 +221,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
     width: number;
     height: number;
     src: string;
+    poster: string;
     crossOrigin: "anonymous" | "use-credentials";
     muted: boolean;
     loop: boolean;
@@ -197,6 +229,8 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
     fps: number;
     orientation: IOrientation;
     side: ISide;
+    alphaScale: number;
+    alphaAlign: IAlphaAlign;
     videoFrame: boolean;
     debug: boolean;
     autoShow: boolean;

package/dist/vue3.js CHANGED Viewed

	@@ -1 +1 @@
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?2n:n:"width"===e?n:2n},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=ar,u.height=sr,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(cu),f="width"===h?Math.round(d/u):c,v=fs;ps===this.canvasWidth&&v===this.canvasHeight\|\|(!function(t,e,n){var o=l();t.width=eo,t.height=no,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,6a,0),e.enableVertexAttribArray(s);var u=e.getAttribLocation(n,"a_Video_Texture_Position");e.vertexAttribPointer(u,2,e.FLOAT,!1,6a,2a),e.enableVertexAttribArray(u);var d=e.getAttribLocation(n,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6a,4a),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};
1	+ import{defineComponent as t,ref as e,watch as i,onMounted as n,onBeforeUnmount as o,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 i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},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 i(){this.constructor=t}a(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}function l(t,e,i,n){return new(i\|\|(i=Promise))((function(o,r){function a(t){try{l(n.next(t))}catch(t){r(t)}}function s(t){try{l(n.throw(t))}catch(t){r(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(a,s)}l((n=n.apply(t,e\|\|[])).next())}))}function d(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(l){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,l])}}}"function"==typeof SuppressedError&&SuppressedError;var u="start",h=function(){return"undefined"!=typeof window&&window.devicePixelRatio\|\|1},c=function(t){if(void 0===t&&(t=1),"number"!=typeof t\|\|!isFinite(t)\|\|t<0\|\|t>1)throw new Error("[alpha-video-player-js]: alphaScale must be a finite number between 0 and 1.");return t},p=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=u);var o=c(i);if("landscape"===t){var r=1/(1+o),a=o/(1+o);return{rgb:{x:"front"===e?0:a,y:0,width:r,height:1},alpha:{x:"front"===e?r:0,y:"start"===n?0:1-o,width:a,height:o}}}var s=1/(1+o),l=o/(1+o);return{rgb:{x:0,y:"front"===e?0:l,width:1,height:s},alpha:{x:"start"===n?0:1-o,y:"front"===e?s:0,width:o,height:l}}},v=function(t){var e=t.x,i=t.y,n=t.width,o=t.height;return[e,1-i,e+n,1-i,e,1-i-o,e+n,1-i-o]},f=function(t){if(!t)throw new Error("[alpha-video-player-js]: setting failed, please instantiate first!")},y=function(t){return t.readyState>=2&&t.videoWidth>0&&t.videoHeight>0},g={playbackRate:1,muted:!0,loop:!1,fps:0,orientation:"landscape",side:"front",alphaScale:1,alphaAlign:u,autoShow:!1,autoClear:!0,autoDestroy:!1,autoResize:"contain",debug:!1,videoFrame:!1},m=function(){function t(t,e){if(void 0===e&&(e=!1),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.renderVideoDirectly=!1,this.playing=!1,!t.container)throw new Error("[alpha-video-player-js]: container can not be empty！");if(this.renderVideoDirectly=e,this.setConfig(t),this.container=t.container,!e){this.canvas=function(t,e,i){var n=t.offsetWidth,o=t.offsetHeight,r=h(),a=e\|\|n,s=i\|\|o;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 l=document.createElement("canvas");return l.width=ar,l.height=sr,l.style.width="100%",l.style.height="100%",l.style.pointerEvents="none",t.appendChild(l),l}(this.container,t.width,t.height);var i=this.canvas,n=i.width,o=i.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){if(t){var e=Object.assign({},g,this.config\|\|{},t);e.alphaScale=c(e.alphaScale),e.alphaAlign=e.alphaAlign\|\|u,this.config=e}},t.prototype.initVideo=function(){var t=this.config,e=t.src,i=t.poster,n=t.playbackRate,o=t.muted,r=t.loop,a=t.crossOrigin,s=this.video=document.createElement("video");if(s.crossOrigin=null!=a?a:"anonymous",s.poster=i\|\|"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",s.src=e,s.autoplay=!1,s.preload="auto",s.playbackRate=n,s.loop=r,s.muted=o,o&&s.setAttribute("muted",""),s.setAttribute("playsinline",""),s.setAttribute("webkit-playsinline",""),s.setAttribute("x-webkit-airplay",""),this.renderVideoDirectly){var l=this.config.width\|\|this.container.offsetWidth,d=this.config.height\|\|this.container.offsetHeight;s.style.display="block",s.style.width=l?"".concat(l,"px"):"100%",s.style.height=d?"".concat(d,"px"):"100%",s.style.visibility=this.config.autoShow?"visible":"hidden",s.style.pointerEvents="none",this.container.appendChild(s)}else s.style.position="absolute",s.style.width="0",s.style.height="0",s.style.overflow="hidden",s.style.pointerEvents="none",document.body.appendChild(s);this.bindInstance(),this.addEvent(),s.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}else this.playing=!1},t.prototype.play=function(t){var e,i;return l(this,void 0,void 0,(function(){var n,o;return d(this,(function(r){switch(r.label){case 0:f(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 n=r.sent(),this.renderVideoDirectly?(this.setNativeVideoVisible(!0),this.playing=!0):this.drawFrame(),[2,n];case 3:throw o=r.sent(),null===(i=(e=this.config).onError)\|\|void 0===i\|\|i.call(e,o),o;case 4:return[2]}}))}))},t.prototype.pause=function(){f(this.video),this.video.pause(),this.renderVideoDirectly?this.playing=!1: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.renderVideoDirectly&&this.setNativeVideoVisible(!!this.config.autoShow),this.video?(this.video.src=t,this.video.load(),this.video.currentTime=0):this.initVideo()},t.prototype.setCurrentTime=function(t){f(this.video),this.video.currentTime=t},t.prototype.setMute=function(t){f(this.video),this.video.muted=t,t?this.video.setAttribute("muted",""):this.video.removeAttribute("muted")},t.prototype.setLoop=function(t){f(this.video),this.video.loop=t},t.prototype.setPlaybackRate=function(t){f(this.video),this.video.playbackRate=t},t.prototype.onLoad=function(){var t,e,i=this,n=i.video,o=i.config,r=i.canvas;if(this.videoWidth=n.videoWidth,this.videoHeight=n.videoHeight,o.autoResize&&(r\|\|this.renderVideoDirectly)&&n.videoWidth>0&&n.videoHeight>0){var a=h(),s=function(t,e,i,n,o){if(void 0===n&&(n=1),void 0===o&&(o=u),0===n)return t/e;var r=p(i,"front",n,o).rgb;return tr.width/(er.height)}(n.videoWidth,n.videoHeight,o.orientation,o.alphaScale,o.alphaAlign),l=r?r.width/a:o.width\|\|(null===(t=this.container)\|\|void 0===t?void 0:t.offsetWidth)\|\|n.videoWidth,d=r?r.height/a:o.height\|\|(null===(e=this.container)\|\|void 0===e?void 0:e.offsetHeight)\|\|n.videoHeight,c=void 0;if("width"===o.autoResize\|\|"height"===o.autoResize)c=o.autoResize;else c=s>=l/d?"width":"height";var v="width"===c?l:Math.round(ds),f="width"===c?Math.round(l/s):d,y=fa;!r\|\|va===this.canvasWidth&&y===this.canvasHeight?this.renderVideoDirectly&&(n.style.width="".concat(v,"px"),n.style.height="".concat(f,"px")):(!function(t,e,i){var n=h();t.width=en,t.height=in,t.style.width=e+"px",t.style.height=i+"px"}(r,v,f),this.canvasWidth=r.width,this.canvasHeight=r.height,this.onCanvasResized())}o.onLoad&&o.onLoad()},t.prototype.onCanvasResized=function(){},t.prototype.onCanplay=function(){var t=this.config;this.canPlay=!0,this.renderVideoDirectly?t.autoShow&&this.setNativeVideoVisible(!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.setNativeVideoVisible=function(t){this.renderVideoDirectly&&this.video&&(this.video.style.visibility=t?"visible":"hidden")},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}(),b=function(t){function e(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 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 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},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 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},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,i=t.program,n=t.config,o=function(t,e,i,n){void 0===i&&(i=1),void 0===n&&(n=u);var o=[-1,1,1,1,-1,-1,1,-1],r=p(t,e,i,n),a=r.rgb,s=r.alpha,l=v(a),d=v(s),h=[];return o.forEach((function(t,e){e%2==0&&(h=h.concat(o.slice(e,e+2)).concat(l.slice(e,e+2)).concat(d.slice(e,e+2)))})),new Float32Array(h)}(n.orientation,n.side,n.alphaScale,n.alphaAlign),r=e.createBuffer();e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,o,e.STATIC_DRAW);var a=o.BYTES_PER_ELEMENT,s=e.getAttribLocation(i,"a_Position");e.vertexAttribPointer(s,2,e.FLOAT,!1,6a,0),e.enableVertexAttribArray(s);var l=e.getAttribLocation(i,"a_Video_Texture_Position");e.vertexAttribPointer(l,2,e.FLOAT,!1,6a,2a),e.enableVertexAttribArray(l);var d=e.getAttribLocation(i,"a_Alpha_Video_Texture_Position");e.vertexAttribPointer(d,2,e.FLOAT,!1,6a,4a),e.enableVertexAttribArray(d);var h=e.getUniformLocation(i,"u_Sampler");return e.uniform1i(h,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&&y(e)&&(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,i=this.config;i.autoClear&&e.clear(e.COLOR_BUFFER_BIT),t.prototype.onEnded.call(this),i.autoDestroy&&this.destroy()},e.prototype.destroy=function(){var e,i,n=this,o=n.canvas,r=n.gl,a=n.vertexShader,s=n.fragmentShader,l=n.texture,d=n.vertexBuffer,u=n.program;o&&r&&(t.prototype.destroy.call(this),null===(e=o.parentNode)\|\|void 0===e\|\|e.removeChild(o),r.detachShader(u,a),r.deleteShader(a),r.detachShader(u,s),r.deleteShader(s),r.deleteTexture(l),r.deleteBuffer(d),r.deleteProgram(u),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)},e}(m),w=function(t){function e(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 s(e,t),e.prototype.initCanvasRender=function(){var t=this.canvas;this.context2d=t.getContext("2d"),this.resizeAlphaCanvas()},e.prototype.onCanvasResized=function(){this.context2d=this.canvas.getContext("2d"),this.resizeAlphaCanvas()},e.prototype.resizeAlphaCanvas=function(){var t=this.alphaCanvas\|\|document.createElement("canvas");t.width=this.canvasWidth,t.height=this.canvasHeight,this.alphaCanvas=t,this.alphaContext2d=t.getContext("2d")},e.prototype.drawFrameOnce=function(){var t=this,e=t.context2d,i=t.alphaContext2d,n=t.video,o=t.canPlay,r=t.videoWidth,a=t.videoHeight,s=t.canvasWidth,l=t.canvasHeight,d=t.config;if(e&&i&&n&&o&&y(n)&&r&&a&&s&&l){var u=p(d.orientation,d.side,d.alphaScale,d.alphaAlign),h=u.rgb,c=u.alpha;e.drawImage(n,h.xr,h.ya,h.widthr,h.heighta,0,0,s,l);var v=e.getImageData(0,0,s,l),f=v.data;i.drawImage(n,c.xr,c.ya,c.widthr,c.heighta,0,0,s,l);for(var g=i.getImageData(0,0,s,l).data,m=3;m<f.length;m+=4)f[m]=g[m-3];e.putImageData(v,0,0)}},e.prototype.drawFrame=function(){this.drawFrameOnce(),t.prototype.drawFrame.call(this)},e.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()},e.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.alphaCanvas=null,this.alphaContext2d=null)},e}(m),A=function(t){function e(e){var i=this,n=e.onInitSuccess,o=e.onInitError;try{i=t.call(this,e,!0)\|\|this,null==n\|\|n()}catch(t){if(!o)throw t;o(t)}return i}return s(e,t),e.prototype.onEnded=function(){var e=this.config;e.autoClear&&this.setNativeVideoVisible(!1),t.prototype.onEnded.call(this),e.autoDestroy&&this.destroy()},e.prototype.destroy=function(){t.prototype.destroy.call(this)},e}(m),E=function(){function t(t){var e,i=c(t.alphaScale),n=Object.assign({},t,{alphaScale:i});if(0===i)this.render=new A(n);else if((e=document.createElement("canvas")).getContext("webgl")\|\|e.getContext("experimental-webgl"))this.render=new b(n);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 w(n)}}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 l(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}(),_=t({name:"AlphaVideoPlayer",props:{src:{type:String,default:void 0},poster:{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"},alphaScale:{type:Number,default:1},alphaAlign:{type:String,default:u},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,l=a.expose,d=e(),u=null,h=function(){u&&(u.destroy(),u=null)};return i((function(){return t.src}),(function(t){return null!=t&&(null==u?void 0:u.setSrc(t))})),i((function(){return t.muted}),(function(t){return null==u?void 0:u.setMute(t)})),i((function(){return t.loop}),(function(t){return null==u?void 0:u.setLoop(t)})),i((function(){return t.playbackRate}),(function(t){return null==u?void 0:u.setPlaybackRate(t)})),n((function(){d.value&&(h(),u=new E({container:d.value,src:t.src,poster:t.poster,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,alphaScale:t.alphaScale,alphaAlign:t.alphaAlign,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")}}))})),o(h),l({play:function(){return null==u?void 0:u.play()},pause:function(){return null==u?void 0:u.pause()},destroy:h,reset:function(){return null==u?void 0:u.reset()},setSrc:function(t){return null==u?void 0:u.setSrc(t)},setCurrentTime:function(t){return null==u?void 0:u.setCurrentTime(t)},setMute:function(t){return null==u?void 0:u.setMute(t)},setLoop:function(t){return null==u?void 0:u.setLoop(t)},setPlaybackRate:function(t){return null==u?void 0:u.setPlaybackRate(t)},getPlayer:function(){return u}}),function(){return r("div",{ref:d})}}});export{_ as default};

package/package.json CHANGED Viewed

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