Platform Capabilities

技术特性

libpag 核心代码为 C++ 代码，Web 平台上使用 WebAssembly 技术将 C++ 代码 编译成 libpag.wasm 文件运行于 Web 平台环境中。使用 libpag 可以不需要了解太多 WebAssembly 的知识， 如果有兴趣可以阅读 WebAssembly文档 和 emscripten文档。

渲染使用 WebGL 环境，并不支持 Canvas2D。

内存回收

因为使用了 WebAssembly，所以使用 libpag 创建出来的对象大部分带有 C++ 的指针，并不会被浏览器的 GC 影响。所以，如果不需要使用该对象，推荐调用对象的 destroy 方法。

兼容性

Chrome
Chrome		Safari
Safari		Chrome
Chrome for Android		Safari
Safari on iOS
Chrome >= 69Safari >= 11.3Android >= 7.0iOS >= 11.3

libpag Web端是基于 WebAssembly + WebGL实现，并通过适配 Web 平台能力来支持 libpag 全能力，以上的兼容表仅代表可以运行的兼容性。

libpag 的渲染性能受以下条件影响：

  • PAG 动效文件的复杂度
  • libpag 调用方式
  • Web 浏览器环境 本文主要讲解 libpag Web端在各个浏览器中的性能，以及一些兼容兜底方案。

注册软件解码器 ffavc 需要加载多一个 wasm 文件，会增加内存和 CPU 占用。

桌面端

Chrome (Win/Mac)

性能表现良好

Safari (Mac)

性能表现良好

Firefox (Win/Mac)

除带 BMP 序列帧的 PAG 动效文件外，性能表现良好。

因为 Firefox 的 Video 标签无法解析 PAG 动效文件中 BMP 序列帧转化而成的视频，所以需要注册软件解码器 ffavc 来解析。示例Demo

移动端

Safari (iOS)

除带 BMP 序列帧的 PAG 动效文件外，性能表现良好。

libpag 解析带 BMP 序列帧的 PAG 动效文件调用了 Video 标签的 blobURL 属性解码视频，而在 iOS Safari 浏览器上当 blobURL 为 src 的 Video 时，会存在“播放到视频末尾掉帧”、“修改 currentTime 后 currentTime 属性不变化，而 video 画面渲染成功”等 BUG。

而且当 iOS 设备处于省电模式或者在微信浏览器中，存在“用户与页面交互之后才可以使用 Video 标签进行视频播放”的规则限制，所以，使用播放动效的场景需要经过用户交互之后播放。

以上两个环境兼容性的影响，可以使用注册软件解码器 ffavc 解析视频来规避，也是当前推荐的方案。示例Demo

Chrome (Android)

除带 BMP 序列帧的 PAG 动效文件外，性能表现良好。

部分 Android 设备和在微信浏览器中，存在“用户与页面交互之后才可以使用 Video 标签进行视频播放”的规则限制，所以，使用播放动效的场景需要经过用户交互之后播放。

这里也使用注册软件解码器 ffavc 解析视频来规避，但是 ffavc 软解码在 Android 设备中的性能表现较差，所以我们并不推荐使用这个方案，后续我们会努力寻求更优秀的方案来覆盖这个场景。暂时需要接入方从业务场景中引导用户产生交互来规避“用户与页面交互之后才可以使用 Video 标签进行视频播放”的规则限制。

Android 原生浏览器

因为各个厂商都有自己的自带浏览器，而自带浏览器的环境除了会收到厂商浏览器实现差异影响还会受到 GPU 芯片差异影响。所以，我们暂时没有计划对这部分机器进行兼容，我们首要的精力会放在主流的浏览器中。

← Play PAG FileUse WebWorker →