VAP是企鹅电竞实现融合礼物特效的组件,将图片/文字与原始mp4视频融合在一起,支持透明度,项目详细介绍请参考 VAP
1、安装
npm i video-animation-player
2、创建实例
import Vap from 'video-animation-player'
# init
let vap = new Vap(options)
3、实例方法
# 实例方法
1、on(): 绑定h5 video事件 如on('playering', function() {// do some thing})
2、destroy():销毁实例,清除video、canvas等
3、pause():暂停播放
4、play():继续播放
5、setTime(s):设置播放时间点(单位秒)
4、实例参数
参数名 | 含义 |
---|---|
container | dom容器 |
src | mp4视频地址 |
config | 配置json对象(详情见下文) |
width | 宽度 |
height | 高度 |
fps | 动画帧数(生成素材时在工具中填写的fps值) |
mute | 是否对视频静音 |
loop | 是否循环播放 |
type | 组件基于type字段做了实例化缓存,不同的VAP实例应该使用不同的type值(如0、1、2等) |
beginPoint | 起始播放时间点(单位秒),在一些浏览器中可能无效 |
precache | 是否预加载视频资源(默认关闭,即边下边播) |
onDestory | 组件销毁时回调 |
onLoadError | 加载失败回调 |
ext(无固定名) | 融合参数(和json配置文件中保持一致) |
内容格式固定,使用VAP素材生成工具生成
使用webgl texture获取video和图片/文字的纹理,并在shader中进行自定义融合,