1.安装
npm i video-animation-player2.引入
import Vap from "video-animation-player"3.使用
// 第二步创建实例
import Vap from "video-animation-player"let dom= document.getElementById("vap-warp")
let vapPlayer = new Vap({container: dom, // 要渲染的载体，dom元素src: url, // vap动画地址config: json, // 播放vap动画需要的 json文件。必填width: window.innerWidth, // 容器宽度height: window.innerHeight, // 容器高度fps: 30, // 帧数，json文件中有这个视频的帧数的，可以看一下，mute: true, // 静音type: 2, // 组件基于type字段做了实例化缓存，不同的VAP实例应该使用不同的type值（如0、1、2等）loop: false, // 循环precache: true, // 预加载视频，下载完再播。小动画建议边下边播，大动画还是先下后播吧，因为太大了或者网络不好，会一卡一卡的。beginPoint: 0, // 起始播放时间点(单位秒),在一些浏览器中可能无效accurate: true, // 是否启用精准模式（使用requestVideoFrameCallback提升融合效果，浏览器不兼容时自动降级）})vapPlayer.play() // 开始播放vapPlayer.on("ended", () => {// 监听播放完成的事件vapPlayer.destroy()vapPlayer = null})
4.实例方法
# 实例方法
1、on(): 绑定h5 video事件或者自定义事件(frame： 接收当前帧和播放时间戳) 如on('playering', function() {// do some thing})
2、destroy()：销毁实例，清除video、canvas等
3、pause()：暂停播放
4、play()：继续播放
5、setTime(s)：设置播放时间点(单位秒)
转载：vue + 使用vap播放动画，video-animation-player_vap特效使用教程 前端使用-CSDN博客
)
)
