h5端播放map4透明通道

前言

　　通常情况端上做刷礼物动画时，需要播放背景透明的礼物特效动画，这种情况map4相对其他json/webgl/gif/svga等等格式的动画来说体积往往更小且像素会更清晰，更能打动大哥们得打赏~，端上一般引用QGVAPlayer插件播放，而h5需要引入video-animation-player

 

　　直接上代码

　　第一步：

cnpm i video-animation-player 

 

　　第二步：

<template>
  <van-image ref="vedioRef" :src="urlImg" class="mp4-transparent-vedio" />
</template>

<script lang='ts' setup>
import { ref, nextTick } from 'vue'
import Vap from 'video-animation-player'

const show = ref<boolean>(false)
const vedioRef = ref()
const url = ref<string>('')
const urlImg = ref<string>('')
const vapPlayer = ref()

const playVideo = (animation:string = '', animationUrl:string = '', json:string = '', fps:number = 30) => {
  url.value = animation
  urlImg.value = animationUrl
  show.value = true

  nextTick(() => {
    vapPlayer.value = new Vap({
      container: vedioRef.value, // 要渲染的载体，dom元素
      src: url.value, // vap动画地址
      config: json, // 播放vap动画需要的 json文件。必填
      width: window.innerWidth, // 容器宽度
      height: window.innerHeight, // 容器高度
      fps, // 帧数，json文件中有这个视频的帧数的，可以看一下，
      mute: true, // 静音
      type: 2, // 组件基于type字段做了实例化缓存，不同的VAP实例应该使用不同的type值（如0、1、2等）
      loop: false, // 循环
      precache: false, // 预加载视频，下载完再播。小动画建议边下边播，大动画还是先下后播吧，因为太大了或者网络不好，会一卡一卡的。
      beginPoint: 0, // 起始播放时间点(单位秒),在一些浏览器中可能无效
      accurate: true, // 是否启用精准模式（使用requestVideoFrameCallback提升融合效果，浏览器不兼容时自动降级）
    })

    vapPlayer.value.play() // 开始播放
    vapPlayer.value.on("ended", () => {
      // 监听播放完成的事件
      closeVedio()
    })
  })
}

const closeVedio = () => {
  vapPlayer.value.destroy()
  vapPlayer.value = null
  show.value = false
}

defineExpose({
  playVideo,
  closeVedio,
});
</script>

<style scoped lang="scss">
.mp4-transparent-vedio {
  width: 100vw;
  height: 100vh;
}
</style>