libpag icon indicating copy to clipboard operation
libpag copied to clipboard

web端,vue中使用libpag,渲染三个文件较大的pag,在ios系统中,微信公众号网页环境,渲染显示异常

Open cl-x opened this issue 1 month ago • 1 comments

环境:web端微信公众号网页开发,vue3框架 + vite 问题:页面中渲染三个pag文件,每一个文件大概是48kb左右,在微信开发者工具中/安卓手机的微信内部打开都是显示正常,没有任何问题,但是在苹果手机中,在微信打开,发现三个pag文件渲染异常,有时候三个都是空白,有时候其中一个会显示内容,但是不是动态的,十分奇怪,但是当我把文件换成官方给的pag文件,在苹果手机上就显示正常了https://pag.io/file/like.pag 这个文件

【版本信息】

4.2.84

【平台信息】

Web 浏览器

【预期的表现】

Image

【实际的情况】

微信开发者工具会提示这个问题,但是好像不影响,在开发者工具中渲染正常 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': An argument must be provided, which must be a Response or Promise<Response> object

falling back to ArrayBuffer instantiation

Image

【Demo及附件】

pag文件地址 https://weboss.xinyifm.cn/oss/xc-h5/new-vip/vip_config/svip_pag_4

cl-x avatar Nov 27 '25 03:11 cl-x

你遇到的问题的 pag 文件是包含视频序列帧的,,可能是微信浏览器的限制导致视频无法播放,如下图介绍 https://pag.io/docs/web-play-pagfile.html

Image

软件解码器的使用可参考如下 demo ,要使用 软件解码器需要使用 libpag 4.5.4 及之后版本,老版本中解码器注册有些问题 https://github.com/libpag/pag-web/blob/main/pages/software-decoder.html

如果上述方法无法解决问题,请提供一个完整的 demo 用于复现问题,便于进一步排查问题

jinwuwu001 avatar Dec 12 '25 08:12 jinwuwu001

你好,我使用了您说的方法,写了个简单的html demo按照你给的参考demo加的,确实有点效果,但是苹果手机在第一次打开这个链接时还是显示不出来,但第二次重复点进去就会显示出来了,我也不确定是不是问题,这可能是个加载的执行问题,想着先提出来,看看是否有更好的方式 这个是我的html demo地址 https://weboss.xinyifm.cn/oss/xc-h5/new-vip/vip_config/pag_test.html?123 除此之外,我发现在vue3 + vite环境中使用pnpm安装libpag包提示以下这个问题,不知道您这边是否遇到,我这边考虑到了可能是版本兼容问题,调试发现4.5.0版本没问题,但是在上述你说解码器需要4.5.4及之后才行,这就可能有点冲突了

Image

cl-x avatar Dec 16 '25 06:12 cl-x

4.5.0版本也不行了,出现这个报错,为啥其他人好像都没遇到 Image

cl-x avatar Dec 16 '25 07:12 cl-x