PAG格式是什么文件

PAG 后缀的文件是一种视频。

如何播放？

下载播放器，路径： PAG · Portable Animated Graphics

在Vue项目中使用教程 

1. 先安装插件

npm i -D copy-webpack-plugin

2. 在vite.config.js 中配置

• 默认打包为 dist 路径下
• Webpack 和 Rollup 等打包工具是默认没有打包 .wasm 文件的，需要node_modules 下的libpag/lib/libpag.wasm 文件打包到最终产物中。

const { defineConfig } = require('@vue/cli-service')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')
module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        patterns: [{
            from: path.resolve(__dirname, './node_modules/libpag/lib/libpag.wasm'), // 不会打包的路径
            to: './js/libpag.wasm'// 打包到dist下的路径  
        }], 
    }
})

3.  pag格式的视频需要放在 public 目录下。

4. 在 Vue3 组件中使用

<template>
    <div  class="canvas">
      <canvas id="pag"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PAGInit } from 'libpag'

const outPag = ref('../outPag.pag')  // pag格式的视频

// Play Video
  PAGInit().then(PAG => {
    fetch(outPag.value)
      .then(response => response.blob())
      .then(async blob => {
        const file = new window.File([blob], outPag.value.replace(/(.*\/)*([^.]+)/i, '$2'))
        const pagFile = await PAG.PAGFile.load(file)
        const canvas = document.getElementById('pag') as HTMLCanvasElement
        canvas.width = pagFile.width()
        canvas.height = pagFile.height()
        const pagView = await PAG.PAGView.init(pagFile, '#pag')
          pagView?.isPlaying ? pagView?.pause() : pagView?.play()
        })
  })
</script>