alpha-video-player-js

简介

alpha-video-player-js 是一个 Web 视频动画特效播放 sdk，可以通过制作 Alpha 通道分离的视频素材，在 Web 端通过 WebGL 或 Canvas 重新实现 RGB 通道和 Alpha 通道的融合，从而实现播放带透明通道的视频。

- 零依赖

- 接入体积小（3.95K）
- 还原度高
- 兼容 WebGL（GPU） 及 Canvas（CPU） 降级，性能优异
- 支持 横向 - RGB 通道视频在前、横向 - RGB 通道视频在后、纵向 - RGB 通道视频在前、纵向 - RGB 通道视频在后 四类视频融合

使用

$3

``bash
npm i alpha-video-player-js
`

$3

`bash
import AlphaVideoPlayerJs from 'alpha-video-player-js'

const player = new AlphaVideoPlayerJs(config)
``

$3

| 参数 | 含义 | 默认值 | 是否必传 |
| ------------- | ---------------------------------- | --------- | -------- |
| container | dom 容器 | null | 是 |
| src | 播放地址 | '' | 是 |
| width | 渲染宽度（默认取父级宽度） | - | 否 |
| height | 渲染高度（默认取父级高度） | - | 否 |
| muted | 是否静音播放 | true | 否 |
| loop | 是否循环播放 | false | 否 |
| playbackRate | 播放速率 | 1 | 否 |
| fps | 播放帧率 | 0 | 否 |
| videoFrame | 是否启用 requestVideoFrameCallback 渲染 | false | 否 |
| orientation | 视频排布方式 landscape \| portrait | landscape | 否 |
| side | RGB 通道视频位置 front \| back | front | 否 |
| autoShow | 是否自动显示（初始化后自动显示第一帧） | false | 否 |
| autoClear | 是否自动清除（播放完毕后自动清除显示内容） | true | 否 |
| autoDestroy | 是否自动销毁（播放完毕后自动销毁 canvas 与 video 元素） | false | 否 |
| debug | 是否开启 sdk 错误打印 | false | 否 |
| onInitSuccess | 初始化成功回调 | - | 否 |
| onInitError | 初始化失败回调 | - | 否 |
| onLoad | 加载完毕回调 | - | 否 |
| onCanPlay | 可以播放回调 | - | 否 |
| onPlay | 开始播放回调 | - | 否 |
| onLood | 循环播放回调 | - | 否 |
| onPause | 暂停播放回调 | - | 否 |
| onEnded | 结束播放回调 | - | 否 |
| onError | 播放错误回调 | - | 否 |
| onDestroy | 销毁实例回调 | - | 否 |

$3

| 方法 | 含义 | 类型 |
| ------- | ---------- | ------- |
| playing | 是否播放中 | Boolean |
| loop | 是否循环 | Boolean |

$3

| 方法 | 含义 | 参数 |
| ----------------------------- | ---------------- | ------------------- |
| play() | 播放/继续播放 | - |
| pause() | 暂停播放 | - |
| destroy() | 销毁实例 | - |
| reset() | 重置播放进度 | - |
| setSrc(src) | 设置播放地址 | 播放地址（string） |
| setCurrentTime(time) | 设置播放进度 | 播放进度（number，秒） |
| setMute(muted) | 设置是否静音播放 | 是否静音（boolean） |
| setLoop(loop) | 设置是否循环播放 | 是否循环（boolean） |
| setPlaybackRate(playbackRate) | 设置播放倍速 | 播放倍速（number） |

原理

- WebGLRender 使用 webgl texture 获取 video RGB 通道视频 和 Alpha 通道视频纹理，并在 shader 中进行自定义融合
- CanvasRender 使用 canvas2d getImageData 获取 video RGB 通道视频 和 Alpha 通道视频图片元数据，并进行自定义融合

示例

https://trp1119.github.io/alpha-video-player-js-demo