目前使用的地方涉及高德地图上渲染动画marker,使用方式如下很实用
*
文档简介地址https://www.npmjs.com/package/video-animation-player
*
代码地址链接地址 https://github.com/Tencent/vap/blob/master/Introduction.md
安装(注意,需要UI提供VAP格式的MP4文件和JSON文件)
npm i video-animation-player
创建实例
import Vap from 'video-animation-player'
# init
let vap = new Vap(options)
实例方法
1、on(): 绑定h5 video事件或者自定义事件(frame: 接收当前帧和播放时间戳) 如on('playering', function() {// do some thing})
2、destroy():销毁实例,清除video、canvas等
3、pause():暂停播放
4、play():继续播放
5、setTime(s):设置播放时间点(单位秒)
实例参数
参数 | 含义 | 默认值 |
---|---|---|
container | dom容器 | null |
src | mp4视频地址 | “” |
config | 配置json对象(详情见下文) | ‘’ |
width | 宽度 | 375 |
height | 高度 | 375 |
fps | 动画帧数(生成素材时在工具中填写的fps值) | 20 |
mute | 是否对视频静音 | false |
loop | 是否循环播放 | false |
type | 组件基于type字段做了实例化缓存,不同的VAP实例应该使用不同的type值(如0、1、2等) | undefined |
beginPoint | 起始播放时间点(单位秒),在一些浏览器中可能无效 | 0 |
fontStyle | 融合字体样式用法参考 | ‘’ |
accurate | 是否启用精准模式(使用requestVideoFrameCallback提升融合效果,浏览器不兼容时自动降级) | false |
precache | 是否预加载视频资源(默认关闭,即边下边播) | false |
onDestory | 组件销毁时回调 | undefined |
onLoadError | 加载失败回调 | undefined |
ext(无固定名) | 融合参数(和json配置文件中保持一致) | ‘’ |
标题VAP动画插件vue使用展示
this.vap = new Vap({
container: document.getElementById('Dom'),
src: require('./vap.mp4'),
config: require('./vap.json'),
width: 1050,
height: 750,
accurate: true,
loop: true
})
this.vap.play()