<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 实例

名称	类型	说明	必传
data	ArrayBuffer	PAG文件	Y
canvas	HTMLCanvasElement	用于绘图的 canvas 标签	Y
options	RenderOptions	渲染选项	Y

play(): Promise<void>

播放

pause(): void

暂停

stop(): void

停止

destroy(): void

销毁

isPlaying(): boolean

是否播放中

isDestroyed(): boolean

是否已经销毁

duration(): nunber

动画持续时间，单位：秒

setRepeatCount(repeatCount): void

设置动画重复的次数

名称	类型	说明	默认值	必传
repeatCount	number	设置动画重复的次数，如为 0 动画则无限播放。	1	N

getProgress(): number

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

setProgress(value): Promise<boolean>

设置播放进度位置

名称	类型	说明	默认值	必传
progress	number	设置播放进度位置，取值范围为 0.0 到 1.0		Y

scaleMode(): ScaleMode

返回当前缩放模式

setScaleMode(scaleMode: ScaleMode)

指定缩放内容的模式

名称	类型	说明	默认值	必传
scaleMode	ScaleMode	缩放模式，可选值：`None` 、`Stretch` 、 `LetterBox` 和 `Zoom`	`LetterBox`	N

addListener(eventName, listener):void

增加事件监听

名称	类型	说明	默认值	必传
eventName	string	事件名称		Y
listener	funtion	监听器		Y

事件列表：

名称	说明
onAnimationStart	动画开始播放
onAnimationCancel	动画取消播放
onAnimationEnd	动画结束播放
onAnimationRepeat	动画循环播放

removeListener(eventName, listener?):void

增加事件监听

名称	类型	说明	默认值	必传
eventName	string	事件名称		Y
listener	funtion	监听器，如不传入 `listener` 则移除该事件下所有监听器	undefined	N

getDebugData():DebugData

获取调试数据

Interface

RenderOptions

键	类型	说明	默认值	必传
renderingMode	enum RenderingMode	渲染模式，可选值： `WebGL` 、`Canvas`	`WebGL`	N
useScale	boolean	是否按照设备dpi进行缩放	true	N

DebugData

键	类型	说明
FPS	number	过去一秒内渲染帧数量
draw	number	当前帧渲染耗时，单位 ms
decodePAGFile	number	PAG 文件解码耗时，单位 ms
coverMP4	number	合成 MP4 耗时，单位 ms

Enum

RenderingMode

键	类型	值	说明
Canvas	String	Canvas	2D 渲染
WebGL	String	WebGL	WebGL 渲染

ScaleMode

键	类型	值	说明
None	String	None	不缩放
Stretch	String	Stretch	拉伸内容到适应画布
LetterBox	String	LetterBox	根据原始比例缩放内容
Zoom	String	Zoom	根据原始比例被缩放适应，一个轴会被裁剪