关于融合动画播放只有声音但视频未渲染的问题

前言

　　关于APP的webview内嵌h5的页面，有时候需要播放带透明通道的融合动画，一般我们都用腾讯开发的van.js。如果是vue项目就使用 video-animation-player

 

注意点一：

　　vapPlayer播放mp4需要config配置文件，配置文件是json，一般UI会给我们，不过新的基本都是VAPX 格式的视频，这个格式自带json，我们要用可以直接从视频里面解析出json来用，不需要再单独引入json文件。

// 从 MP4 二进制中提取内嵌的 VAPX 配置
const parseEmbeddedConfig = async (file: File | Blob) => {
  const bytes = new Uint8Array(await file.arrayBuffer())
  const marker = new TextEncoder().encode('{"info":')
  let start = -1
  outer: for (let i = 0; i <= bytes.length - marker.length; i++) {
    for (let j = 0; j < marker.length; j++)
      if (bytes[i + j] !== marker[j]) continue outer
    start = i
    break
  }
  if (start < 0) return null

  let depth = 0, inString = false, escaped = false
  for (let i = start; i < bytes.length; i++) {
    const char = bytes[i]
    if (inString) {
      if (escaped) escaped = false
      else if (char === 0x5c) escaped = true
      else if (char === 0x22) inString = false
      continue
    }
    if (char === 0x22) inString = true
    else if (char === 0x7b) depth++
    else if (char === 0x7d && --depth === 0) {
      return JSON.parse(new TextDecoder().decode(bytes.slice(start, i + 1)))
    }
  }
  return null
}

 

注意点二：

　　vapPlayer播放的视频帧数需要偶数，一般是30帧或24帧，不能是25帧，如果设置为奇数，那么 accurate: false 的情况，就会导致视频播放不出来，只有声音。但如果设置accurate: true，在安卓机上就会很卡，像是一帧一帧的播放，所以帧数问题要UI注意。

 

最后安卓视频播放有一个优化点，开启硬件加载

<!-- AndroidManifest.xml -->
<application android:hardwareAccelerated="true">