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 VideoPAGInit().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 HTMLCanvasElementcanvas.width = pagFile.width()canvas.height = pagFile.height()const pagView = await PAG.PAGView.init(pagFile, '#pag')pagView?.isPlaying ? pagView?.pause() : pagView?.play()})})
</script>

PAG格式是什么文件相关推荐

C++ Opencv 读取指定路径中的所有文件（图片）及指定路径中指定格式的所有文件（图片）
读取指令路径下的所有文件,程序如下: #include <io.h> #include < fstream> #include < string> #include ...
python使用fpdf生成发票格式的pdf文件包含：文字、图片logo、表格、条形码等；
python使用fpdf生成发票格式的pdf文件包含:文字.图片logo.表格.条形码等: pip install fpdf #python使用fpdf生成发票格式的pdf文件包含:文字.图片logo ...
如何制作chm格式的帮助文件
我们经常需要为应用程序制作chm格式的帮助文件.一般都会通过微软提供的HTML Help Workshop这个软件来完成. 该工具的下载地址是: http://www.microsoft.com/do ...
创建Unicode格式的INI文件
前段时间由于开发一个软件,需要调用别人的接口,虽然我的软件是Unicode编码,对方的模块也是Unicode编码,但是对方提供的接口却是Ansi接口,在非中文系统下,由于涉及到中文路径,导致Ansi和 ...
C#获取文件夹下指定格式的所有文件
C#获取文件夹下指定格式的所有文件的方法,虽然很简单,但还是分享一下吧,用到时可以稍加修改和优化就可以使用. 获取指定目录下所有文件 //最要使用 System.IO.Directory.GetFil ...
python解析log文件_python解析基于xml格式的日志文件
大家中午好,由于过年一直还没回到状态,好久没分享一波小知识了,今天,继续给大家分享一波Python解析日志的小脚本. 首先,同样的先看看日志是个啥样. 都是xml格式的,是不是看着就头晕了??没事,我 ...
python文件写入字典格式输出_Python把对应格式的csv文件转换成字典类型存储脚本的方法...
该脚本是为了结合之前的编写的脚本,来实现数据的比对模块,实现数据的自动化!由于数据格式是定死的,该代码只做参考,有什么问题可以私信我! CSV的数据格式截图如下: readDataToDic.py源代 ...
yuv编码成h264格式写成文件
yuv编码成h264格式写成文件 (使用ffmpeg 编码yuv420p编码成h264格式) #include <stdio.h> #include <stdlib.h> #i ...
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪前置条件安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...

PAG格式是什么文件

如何播放？

在Vue项目中使用教程

PAG格式是什么文件相关推荐

最新文章

热门文章