更新记录

v0.1.0（2025-12-07） 下载此版本

实现 SVGA 播放

平台兼容性

uni-app(3.6.15)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- √ √ - - - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - -

一个 使用 svga 库封装的 uniapp H5 svga 示例项目

使用示例

<script setup lang="ts">
import svgaPlayer from '@/components/svga-player/svga-player.vue'

const svgaPlayerRef = ref<InstanceType<typeof svgaPlayer>>()

const svga = [
  new URL('@/static/svga/angel.svga', import.meta.url).href,
  new URL('@/static/svga/rose.svga', import.meta.url).href,
]

onMounted(() => {
  handleSvgPlay(svga[0])
})

async function handleSvgPlay(svga: string) {
  await svgaPlayerRef.value?.play(svga)
}
</script>

<template>
  <svga-player ref="svgaPlayerRef" />
</template>

<style scoped></style>

Method 实例方法

方法名 参数 返回值 说明
play videoUrl: string Promise<void> 播放指定的 SVGA 动画。若正在播放，则忽略新的播放请求。解析错误或播放错误会触发 error 事件。播放完成会触发 end 事件。
stop 无 void 停止播放当前动画，并重置 playing 状态。不会触发 end 事件。

Events 事件

事件名 回调参数 说明
ready 无 SVGA 解析成功并挂载到播放器后触发。适合在此时执行“可播放”逻辑。
end 无 动画播放完成（loop=1）后触发。可用于播放结束后的回调，比如关闭特效等。
error error: unknown 播放失败、解析失败或容器异常时触发，返回错误对象。

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。