vue+video-animation-player播放vap视频

lipenghao1112024-02-07 22:34

1.安装

npm i video-animation-player

2.引入

import Vap from "video-animation-player"

3.使用

javascript 复制代码

// 第二步创建实例
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.实例方法

javascript 复制代码

# 实例方法
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博客