libpag-lite v0.0.7

libpag-lite

官网 | English | Web 版本 | Web lite版本 | 小程序版本 | 小程序lite版本

介绍

libpag-lite 是 libpag 在 Web 平台的简化版 SDK

特性

• 基于 Javascript + WebGL，不使用 WebAssembly
• 仅支持播放包含单独一个 BMP 视频序列帧的 PAG 动效文件
• 包体只有 57KB，GZip之后只有 15KB，比完整版 libpag 小很多
• 具有更好的兼容性

关于兼容性

简化版使用纯 Javascript 开发，所以它只依赖于 WebGL 与 Video BlobURL 这两个 Web 技术。

所以，可以配合 babel 将代码兼容到较老的浏览器版本。

值得注意的是因为 FireFox 对 H264 视频的支持不兼容带 Bframe 的视频，所以简化版不支持 FireFox 浏览器。如果需要在 FireFox 上使用，可以参考 libpag完整版 + ffavc 软件解码的方案

关于 BMP 序列帧

导出单一 BMP 序列帧的 PAG 文件

可参考 https://pag.art/docs/pag-export.html

点击菜单“文件” -> “导出” -> “PAG File(Panel)...”，选择需要导出的合成，点击设置按钮，在根节点勾选BMP，导出全BMP预合成的PAG文件。

查看 PAG 文件是否为单一 BMP 序列帧

可以下载 PAGViewer 打开 PAG 文件，点击"视图"->"显示 编辑面板"，在编辑面板中我们能看到 Video 的数量，当 Video数量为 1 时，即为单一 BMP 序列帧。

快速开始

browser

<canvas id="pag"></canvas>
<script src="https://cdn.jsdelivr.net/npm/libpag-lite@latest/lib/pag.min.js"></script>
<script>
  window.onload = async () => {
    const { PAGView, types } = window.libpag;
    const arrayBuffer = await fetch('./assets/particle_video.pag').then((res) => res.arrayBuffer());
    const canvas = document.getElementById('pag');
    canvas.width = 720;
    canvas.height = 720;
    const pagView = PAGView.init(arrayBuffer, canvas, {
      renderingMode: types.RenderingMode.WebGL
    });
    pagView.play();
  };
</script>

npm

$ npm install libpag-lite

import { PAGView, types } from 'libpag-lite';

API

PAG.PAGView

static create(mp4Data, canvas, options)

创建 View 实例

play(): Promise\<void>

播放

pause(): void

暂停

stop(): void

停止

destroy(): void

销毁

isPlaying(): boolean

是否播放中

isDestroyed(): boolean

是否已经销毁

duration(): nunber

动画持续时间，单位：秒

setRepeatCount(repeatCount): void

设置动画重复的次数

getProgress(): number

返回当前播放进度位置，取值范围为 0.0 到 1.0

setProgress(value): Promise\<boolean>

设置播放进度位置

scaleMode(): ScaleMode

返回当前缩放模式

setScaleMode(scaleMode: ScaleMode)

指定缩放内容的模式

addListener(eventName, listener):void

增加事件监听

事件列表：

removeListener(eventName, listener?):void

增加事件监听

getDebugData():DebugData

获取调试数据

Interface

RenderOptions

DebugData

Enum

RenderingMode

ScaleMode