| 文件 | 最后提交记录 | 最后更新时间 |
|---|---|---|
| 11 个月前 | ||
| 19 天前 | ||
| 1 年前 | ||
| 1 年前 | ||
| 19 天前 | ||
| 1 年前 | ||
| 19 天前 | ||
| 1 年前 | ||
| 1 年前 | ||
| 1 年前 | ||
| 1 年前 | ||
| 1 个月前 | ||
| 1 年前 | ||
| 1 年前 | ||
| 1 个月前 | ||
| 1 个月前 | ||
| 1 年前 | ||
| 1 年前 | ||
| 1 年前 | ||
| 1 年前 | ||
| 1 年前 | ||
| 1 年前 |
OHOS-VAP
1. 三方库概述
| 项目 | 内容 |
|---|---|
| 库名 | @ohos/vap |
| 版本 | 1.1.9-rc.1 |
| 功能描述 | 腾讯 VAP(Video Animation Player)的 OpenHarmony 版本,基于 OpenGL 技术和特殊算法打造的动画粒子特效渲染组件,提供高性能、炫酷视频动画播放解决方案 |
| 原库参考 | 腾讯 VAP |
| 开源协议 | Apache License 2.0 |
在数字娱乐和在线互动的时代,视觉效果的精美程度直接影响用户体验。OHOS-VAP 不仅能够为应用程序提供令人惊叹的动画效果,更为用户创造了一种身临其境的视觉享受。
2. 主要特征
- 相比Webp, Apng动图方案,具有高压缩率(素材更小)、硬件解码(解码更快)的优点.
- 相比Lottie,能实现更复杂的动画效果(比如粒子特效)
- 高性能渲染:凭借 OpenGL 的强大能力,OHOS-VAP 实现了高效的粒子特效渲染,确保流畅的用户体验,适用于各种设备。
- 易于集成:OHOS-VAP 设计简洁,易于与现有项目集成,帮助开发者快速实现酷炫的动画效果,提升应用的吸引力。
- 多平台支持:兼容多个设备,无论是手机、平板还是电脑,OHOS-VAP 都能提供一致的视觉效果,助力跨终端应用开发。
3. 应用场景
- 直播间特效:在各大短视频平台中如抖音,快手,得物,企鹅电竞,利用 OHOS-VAP 为直播间增添炫酷的礼物特效,提升观众的互动体验,增加直播的趣味性。
- 电商活动推广:在游戏领域及电商平台的活动中,使用 OHOS-VAP 实现令人惊叹的产品展示效果,吸引用户眼球,推动销售转化。
- 游戏体验提升:为游戏场景增添粒子特效,提升整体游戏体验,让玩家沉浸在更为生动的虚拟世界中。

4. 构建依赖
- IDE版本:DevEco Studio 5.0.1.403
- SDK版本:ohos_sdk_public 5.0.0 (API Version 12 Release)
- 对于开发人员可以调用
this.xComponentContext.play()接口来实现自定义视频传参路径(支持网络URL)
C/C++层目录结构
├─include # 遮罩 融合 渲染器 工具类头文件存放
│ ├─mask
│ ├─mix
│ ├─render
│ └─util
├─manager # xcomponent 生命周期管理
├─mask # 遮罩的实现
├─mix # 融合实现
├─napi # Napi 层功能的封装
├─render # 渲染器的实现
├─types # 接口声明
│ └─libvap # so文件接口声明
└─util # 工具类的实现
入口文件与代码结构
主入口文件: vap_module/Index.ets
核心源文件:
vap_module/Index.ets- 模块导出入口vap_module/src/main/ets/VAPPlayer.ets- VAPPlayer 类实现(API 模式)vap_module/src/main/ets/Index.ets- VAPComponent 组件实现(组件模式)、VAPComponentController、MixInputDataBean、VideoInfoBeanvap_module/src/main/ets/DataDeclare.ets- 所有接口、类型、枚举声明vap_module/src/main/ets/HttpReq.ets- 网络资源下载工具vap_module/src/main/ets/LogUtil.ets- 日志工具
5. 下载安装
ohpm install @ohos/vap
OpenHarmony ohpm 环境配置等更多内容,请参考如何安装 OpenHarmony ohpm 包。
6. 源码下载
- 本项目依赖 json 库,通过
git submodule引入,下载代码时需加上--recursive参数。
git clone --recursive https://gitcode.com/CPF-ApplicationTPC/openharmony_tpc_samples.git
- 开始编译项目。
7. 快速使用
头文件引入
在使用文件中进行头文件的引入
import { VAPPlayer, MixData } from '@ohos/vap';
定义 VAPPlayer 组件
private vapPlayer: VAPPlayer | undefined = undefined;
@State buttonEnabled: boolean = true; // 该状态为控制按钮是否可以点击
@State src: string = "/storage/Users/currentUser/Documents/1.mp4"; // 该路径可为网络路径
配置网络资源下载路径
// 具体使用可参考示例代码
// 获取沙箱路径
let context : Context = getContext(this) as Context
let dir = context.filesDir
界面
private xComponentId: string = 'xcomponentId_' + util.generateRandomUUID()
XComponent({
id: this.xComponentId, // 唯一标识
type: 'surface',
libraryname: 'vap'
})
.onLoad((xComponentContext?: object | Record<string, () => void>) => {
if (xComponentContext) {
this.vapPlayer = new VAPPlayer(this.xComponentId)
this.vapPlayer.setContext(xComponentContext)
this.vapPlayer.sandDir = dir // 设置存储路径
}
})
.backgroundColor(Color.Transparent)
.height('100%')
.visibility(this.buttonEnabled ? Visibility.Hidden: Visibility.Visible)
.width('80%')
设置视频对齐方式
通过setFitType这个接口设置视频对齐方式(支持FIT_XY,FIT_CENTER,CENTER_CROP)

接口需要在play之前使用
this.vapPlayer?.setFitType(fitType)
循环播放(setLoop / loops)
用于控制下一次 play() 时整条素材重复播放的次数。请在 play() 之前配置(与 setFitType、setVideoMode 的时机一致),可使用 setLoop(loops);在组件模式下还可直接改 loops 字段。
| 类 | 接口 / 成员 | 参数 | 默认值 | 说明 |
|---|---|---|---|---|
VAPPlayer |
setLoop(loops: number): void |
loops: number |
1 |
在 play() 调用时把循环次数下发到 native。传入 Infinity 表示无限循环,直至 stop() / stopAsync() 或页面销毁等事件触发时结束播放。 |
VAPComponent |
setLoop(loops: number): void |
loops: number |
1 |
与 VAPPlayer 语义一致。 |
VAPComponent |
loops: number(公有属性) |
— | 1 |
可直接赋值,例如 this.vapCmp.loops = 3;play() 仍会使用当前的 this.loops 下发 native。若希望在 XComponent 上下文已就绪时立即同步到 native,可优先使用 setLoop()(内部会调用 vapContext.setLoop)。 |
说明
- 在一次正常播完(完成回调)或执行
stop()等路径后,VAPComponent内部实现往往会把循环计数恢复为1;若下一轮仍要固定次数或无限循环,请在再次play()前重新调用setLoop()(或重新赋值loops)。 Infinity仅表示不限制次数;停止播放仍需通过stop/ 生命周期等显式结束,示例工程中的多实例页有参考用法。
// 连续播放 3 次后触发 play 的完成回调
this.vapPlayer?.setLoop(3);
this.vapPlayer?.play(uri, opts, () => { this.buttonEnabled = true; });
// 无限循环直至 stop()
this.vapPlayer?.setLoop(Infinity);
this.vapPlayer?.play(uri, opts, () => { /* 主动 stop 前可能不触发 */ });
使用
播放接口 Play 的使用
融合动画信息顺序自定义,需要指定 tag, tag 为视频制作时指定,该信息可通过this.vapPlayer.getVideoInfo(uri)接口获取本地视频信息,
通过this.vapPlayer.getVideoInfoAsync(uri)获取在线视频信息。
当融合信息为字体时,可配置字体的对齐,颜色,大小
let opts: Array<MixData> = [{
tag: 'sImg1',
imgUri: getContext(this).filesDir + '/head1.png'
}, {
tag: 'abc',
txt: "星河Harmony NEXT",
imgUri: getContext(this).filesDir + '/head1.png'
}, {
tag: 'sTxt1',
txt: "星河Harmony NEXT",
textAlign: this.textAlign,
fontWeight: this.fontWeight,
color: this.color
}];
this.buttonEnabled = false;
this.vapPlayer?.play(getContext(this).filesDir + "/vapx.mp4", opts, () => {
this.buttonEnabled = true;
});
当融合信息是图片时,可以使用本地的png图片或image.PixelMap,若使用image.PixelMap,当前仅支持像素格式为image.PixelMapFormat.RGBA_8888数据。
let info = await this.vapPlayer?.getVideoInfoAsync("https://static.mszmapp.com/files/20250530/8d7032c2665096d51ca1736c74753998.mp4")
console.log('getVideoInfo info ' + JSON.stringify(info))
let color = new ArrayBuffer(16);
let colorView = new Int8Array(color);
colorView.set([
// 第一行
0, 255, 0, 255, // 左 (绿色)
255, 255, 0, 255, // 右 (黄色)
// 第二行
0, 255, 0, 255, // 左 (绿色)
255, 255, 0, 255 // 右 (黄色)
])
let pixelMap = image.createPixelMapSync({size: {height:2, width: 2}, pixelFormat: image.PixelMapFormat.RGBA_8888})
pixelMap.writeBufferToPixelsSync(color)
let opts: Array<MixData> = []
if (info?.srcInfos !== undefined) {
for (let s of info?.srcInfos) {
if (s.type === SrcType.IMG) {
opts.push({
tag: s.tag,
imgUri: pixelMap
})
} else if (s.type === SrcType.TXT) {
opts.push({
tag: s.tag,
txt: "星河Harmony NEXT 星河Harmony NEXT",
})
}
}
}
this.buttonEnabled = false;
this.vapPlayer?.play("https://static.mszmapp.com/files/20250530/8d7032c2665096d51ca1736c74753998.mp4", opts, () => {
LogUtil.info("js get callback")
this.buttonEnabled = true;
});
暂停的使用
this.vapPlayer?.pause()
停止的使用
this.vapPlayer?.stop()
异步停止的使用 (StopAsync)
this.vapPlayer?.stopAsync('unique_id', 3000).then(() => {
console.log('停止操作完成');
}).catch((error) => {
console.error('停止失败:', error);
});
this.vapPlayer?.setStopCompleteCallback(() => {
console.log('停止操作已成功完成');
});
监听手势
- 在动画播放过程中点击播放区域,如果点击到融合动画资源,回调会返回该资源(字符串)
- 接口需要在
play之前使用
this.vapPlayer?.on('click', (state)=>{
if(state) {
console.log('js get onClick: ' + state)
}
})
监听播放生命周期变化
接口需要在play之前使用
this.vapPlayer?.on('stateChange', (state, ret)=>{
if(state) {
console.log('js get on: ' + state)
if(ret)
console.log('js get on frame: ' + JSON.stringify(ret))
}
})
- 回调参数
state反映当前播放的状态
enum VapState {
UNKNOWN,
READY,
START,
RENDER,
COMPLETE,
DESTROY,
FAILED,
ATLAST
}
- 参数
ret,当state为RENDER或START返回AnimConfig对象 - 参数
ret,当state为FAILED反映当前的错误码 - 参数
ret,其余状态为undefined
应用退出后台
onPageHide(): void {
console.log('[LIFECYCLE-Page] onPageHide');
this.vapPlayer?.stop()
}
可在页面的生命周期中调用onPageHide方法
兼容老视频(alphaplayer 对称的视频)
this.vapPlayer?.setVideoMode(VideoMode.VIDEO_MODE_SPLIT_HORIZONTAL)
对于老视频推荐调用这个接口,接口需要在play之前使用
8. 接口规格说明
8.1 类规格说明
8.1.1 VAPPlayer 类
功能描述: VAP 视频动画播放器核心类(API 模式),实现 XComponentContext 接口,提供播放控制、状态监听、融合数据管理等功能。
| 成员名称 | 成员类型 | 参数列表 | 返回类型 | 功能描述 |
|---|---|---|---|---|
constructor |
构造函数 | id: string |
VAPPlayer |
创建 VAPPlayer 实例,id 需与 XComponent 的 id 一致 |
setContext |
公开方法 | context: object |
void |
设置 XComponent 上下文对象,在 XComponent onLoad 回调中调用 |
play |
公开方法 | uri: string, mixData?: Array\<MixData\>, cbFn?: () => void |
Promise\<void\> |
播放视频动画。uri 支持本地路径和网络URL;cbFn 为播放完成回调 |
pause |
公开方法 | 无 | void |
暂停当前播放 |
stop |
公开方法 | 无 | void |
同步停止当前播放 |
stopAsync |
公开方法 | id?: string, timeoutMs?: number (默认3000) |
Promise\<void\> |
异步停止播放,支持超时控制。超时后自动强制同步停止 |
setStopCompleteCallback |
公开方法 | callback: () => void |
void |
设置停止完成回调,配合 stopAsync 使用 |
on |
公开方法 | type: string, callback: (state?: VapState | string, ret?: number | AnimConfig | undefined) => void |
void |
注册事件监听器。支持 'click' 和 'stateChange' 两种事件 |
off |
公开方法 | type: string |
void |
移除指定类型的事件监听器 |
setLoop |
公开方法 | loops: number |
void |
设置循环播放次数。Infinity 表示无限循环。需在 play() 之前调用 |
setFitType |
公开方法 | fitType: FitType |
void |
设置视频对齐方式。需在 play() 之前调用 |
setVideoMode |
公开方法 | videoMode: VideoMode |
void |
设置视频模式(兼容老版本视频)。需在 play() 之前调用 |
setSpeed |
公开方法 | speed: VAPSpeed |
void |
设置播放速度。需在 play() 之前调用 |
setStopAtLast |
公开方法 | 无 | void |
设置在最后一帧停止。需在 play() 之前调用 |
getVideoInfo |
公开方法 | uri: string |
VideoInfo | undefined |
获取本地视频的融合动画信息 |
getVideoInfoAsync |
公开方法 | uri: string |
Promise\<VideoInfo | undefined\> |
获取在线视频的融合动画信息(会先下载视频) |
setDownloadAttribute |
公开方法 | dTime: number, downloadProgress?: (data: DownloadData) => void |
void |
设置下载超时时间(毫秒)和下载进度回调 |
sandDir |
公开属性 | — | string |
网络资源下载存储路径,默认为空。使用网络URL时需设置 |
8.1.2 VAPComponent 类
功能描述: VAP 视频动画组件(组件模式),封装了 XComponent 和播放逻辑,可直接作为 UI 组件使用。
| 成员名称 | 成员类型 | 参数列表 | 返回类型 | 功能描述 |
|---|---|---|---|---|
play |
公开方法 | uri: string, mixData?: Array\<MixData\>, cbFn?: () => void |
Promise\<void\> |
播放视频动画 |
pause |
公开方法 | 无 | void |
暂停当前播放 |
stop |
公开方法 | 无 | void |
同步停止当前播放 |
stopAsync |
公开方法 | callback?: () => void, timeoutMs?: number (默认3000) |
Promise\<void\> |
异步停止播放,支持完成回调和超时控制 |
setLoop |
公开方法 | loops: number |
void |
设置循环播放次数。需在 play() 之前调用 |
setFitType |
公开方法 | fitType: FitType |
void |
设置视频对齐方式 |
on |
公开方法 | type: string, callback: (state?: number | string, ret?: number | AnimConfig) => void |
void |
注册事件监听器 |
getVideoInfo |
公开方法 | uri: string |
VideoInfo | undefined |
获取本地视频信息 |
setDownloadAttribute |
公开方法 | dTime: number, downloadProgress?: (data: DownloadData) => void |
void |
设置下载超时时间和进度回调 |
loops |
公开属性 | — | number (默认 1) |
循环播放次数,可直接赋值。play() 时将此值下发到 native |
sandDir |
公开属性 | — | string |
网络资源下载存储路径 |
mCmpController |
公开属性 | — | VAPComponentController | null |
组件控制器实例,用于外部控制组件 |
8.1.3 VAPComponentController 类
功能描述: VAPComponent 的外部控制器,允许在组件外部调用播放控制方法。
| 成员名称 | 成员类型 | 参数列表 | 返回类型 | 功能描述 |
|---|---|---|---|---|
attach |
公开方法 | component: VAPComponent |
void |
绑定控制器到 VAPComponent 实例 |
play |
公开方法 | uri: string, mixData?: Array\<MixData\>, cbFn?: () => void |
void |
播放视频动画 |
pause |
公开方法 | 无 | void |
暂停播放 |
stop |
公开方法 | 无 | void |
停止播放 |
stopAsync |
公开方法 | timeoutMs?: number (默认3000), _id?: string |
Promise\<void\> |
异步停止播放 |
setFitType |
公开方法 | fitType: FitType |
void |
设置视频对齐方式 |
getVideoInfo |
公开方法 | uri: string |
VideoInfo | undefined |
获取视频信息 |
setLoop |
公开方法 | loops: number |
void |
设置循环播放次数 |
8.2 接口与类型规格说明
8.2.1 MixData 接口
功能描述: 融合动画数据接口,定义融合到视频动画中的图片或文字信息。
| 字段名 | 类型 | 是否可选 | 说明 |
|---|---|---|---|
tag |
string |
否 | 融合标签,视频制作时指定的标识 |
txt |
string |
可选 | 融合文字内容 |
imgUri |
string | image.PixelMap |
可选 | 融合图片路径(本地路径/网络URL)或 PixelMap 对象。PixelMap 仅支持 RGBA_8888 格式 |
color |
VAPColor |
可选 | 文字颜色 |
fontWeight |
VAPFontWeight |
可选 | 文字粗细 |
textAlign |
VAPTextAlign |
可选 | 文字对齐方式 |
fontSize |
number |
可选 | 文字大小 |
maxLines |
number |
可选 | 文字最大行数 |
textHeightMarginRatio |
number |
可选 | 文字高度边距比例 |
8.2.2 VAPColor 接口
功能描述: RGBA 颜色值。
| 字段名 | 类型 | 是否可选 | 说明 |
|---|---|---|---|
a |
number |
否 | Alpha 通道值 (0-255) |
r |
number |
否 | Red 通道值 (0-255) |
g |
number |
否 | Green 通道值 (0-255) |
b |
number |
否 | Blue 通道值 (0-255) |
8.2.3 AnimConfig 接口
功能描述: 动画配置信息,在 stateChange 回调的 RENDER 和 START 状态时返回。
| 字段名 | 类型 | 是否可选 | 说明 |
|---|---|---|---|
version |
number |
否 | 动画版本号 |
totalFrames |
number |
否 | 总帧数 |
width |
number |
否 | 动画宽度 |
height |
number |
否 | 动画高度 |
videoWidth |
number |
否 | 视频宽度 |
videoHeight |
number |
否 | 视频高度 |
orien |
Orien |
否 | 视频方向 |
fps |
number |
否 | 帧率 |
isMix |
boolean |
否 | 是否包含融合数据 |
alphaPointRect |
PointRect |
否 | Alpha 区域矩形 |
rgbPointRect |
PointRect |
否 | RGB 区域矩形 |
currentFrame |
number |
否 | 当前帧号 |
8.2.4 VideoInfo 接口
功能描述: 视频融合动画信息,通过 getVideoInfo / getVideoInfoAsync 获取。
| 字段名 | 类型 | 是否可选 | 说明 |
|---|---|---|---|
width |
number |
否 | 视频宽度 |
height |
number |
否 | 视频高度 |
totalFrames |
number |
否 | 总帧数 |
fps |
number |
否 | 帧率 |
srcInfos |
Array\<SrcInfo\> |
否 | 融合源信息列表 |
8.2.5 SrcInfo 接口
功能描述: 融合源信息,描述视频中可替换的图片或文字区域。
| 字段名 | 类型 | 是否可选 | 说明 |
|---|---|---|---|
tag |
string |
否 | 融合标签标识 |
type |
SrcType |
否 | 融合类型(图片或文字) |
x |
number |
否 | 区域 X 坐标 |
y |
number |
否 | 区域 Y 坐标 |
w |
number |
否 | 区域宽度 |
h |
number |
否 | 区域高度 |
8.2.6 PointRect 接口
功能描述: 区域矩形坐标。
| 字段名 | 类型 | 是否可选 | 说明 |
|---|---|---|---|
x |
number |
否 | X 坐标 |
y |
number |
否 | Y 坐标 |
w |
number |
否 | 宽度 |
h |
number |
否 | 高度 |
8.2.7 XComponentContext 接口
功能描述: XComponent 上下文接口,定义了 native 层暴露的所有播放控制方法。VAPPlayer 实现了此接口。
| 方法名 | 参数列表 | 返回类型 | 功能描述 |
|---|---|---|---|
play |
uri: string, mixData?: Array\<MixData\>, cbFn?: () => void, id?: string |
void |
播放视频 |
on |
type: string, callback: (state?: VapState | string, ret?: number | AnimConfig | undefined) => void, id?: string |
void |
注册事件监听 |
off |
type: string, id?: string |
void |
移除事件监听 |
pause |
id?: string |
void |
暂停播放 |
stop |
id?: string |
void |
停止播放 |
stopAsync |
id?: string, timeoutMs?: number |
Promise\<void\> |
异步停止 |
setLoop |
loops: number, id?: string |
void |
设置循环次数 |
getVideoInfo |
uri: string, id?: string |
VideoInfo | undefined |
获取视频信息 |
getVideoInfoAsync |
uri: string, id?: string |
Promise\<VideoInfo | undefined\> |
异步获取视频信息 |
setFitType |
fitType: FitType, id?: string |
void |
设置对齐方式 |
setVideoMode |
videoMode: VideoMode, id?: string |
void |
设置视频模式 |
setSpeed |
speed: VAPSpeed, id?: string |
void |
设置播放速度 |
setStopAtLast |
id?: string |
void |
在最后一帧停止 |
8.2.8 VAPCallback 接口
功能描述: 回调接口,定义状态变更和点击事件的回调方法。
| 字段名 | 类型 | 是否可选 | 说明 |
|---|---|---|---|
onStateChange |
(state: VapState, ret?: number | AnimConfig) => void |
可选 | 播放状态变更回调 |
onClick |
(text: string) => void |
可选 | 点击融合区域回调 |
8.2.9 DownloadData 类
功能描述: 下载进度数据。
| 字段名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
receiveSize |
number |
0 |
已下载大小 |
totalSize |
number |
0 |
总文件大小 |
8.3 枚举规格说明
8.3.1 VapState 枚举
功能描述: 播放状态枚举,用于 stateChange 事件回调。
| 枚举值 | 数值 | 说明 |
|---|---|---|
UNKNOWN |
0 | 未知状态 |
READY |
1 | 准备就绪 |
START |
2 | 播放开始 |
RENDER |
3 | 正在渲染 |
COMPLETE |
4 | 播放完成 |
DESTROY |
5 | 播放器已销毁 |
FAILED |
6 | 播放失败 |
ATLAST |
7 | 最后一帧停止(配合 setStopAtLast 使用) |
8.3.2 FitType 枚举
功能描述: 视频对齐方式枚举。
| 枚举值 | 数值 | 说明 |
|---|---|---|
FIT_XY |
0 | 拉伸填充(默认) |
FIT_CENTER |
1 | 居中等比缩放 |
CENTER_CROP |
2 | 居中裁剪缩放 |
8.3.3 VideoMode 枚举
功能描述: 视频模式枚举,用于兼容老版本视频。
| 枚举值 | 数值 | 说明 |
|---|---|---|
VIDEO_MODE_SPLIT_HORIZONTAL |
1 | 左右对齐(alpha左/rgb右) |
VIDEO_MODE_SPLIT_VERTICAL |
2 | 上下对齐(alpha上/rgb下) |
VIDEO_MODE_SPLIT_HORIZONTAL_REVERSE |
3 | 左右对齐(rgb左/alpha右) |
VIDEO_MODE_SPLIT_VERTICAL_REVERSE |
4 | 上下对齐(rgb上/alpha下) |
8.3.4 VAPFontWeight 枚举
功能描述: 字体粗细枚举。
| 枚举值 | 数值 | 说明 |
|---|---|---|
THIN |
0 | 极细 (100) |
EXTRA_LIGHT |
1 | 特细 (200) |
LIGHT |
2 | 细 (300) |
NORMAL |
3 | 正常 (400) |
MEDIUM |
4 | 中等 (500) |
SEMI_BOLD |
5 | 半粗 (600) |
BOLD |
6 | 粗 (700) |
EXTRA_BOLD |
7 | 特粗 (800) |
BLACK |
8 | 极粗 (900) |
8.3.5 VAPTextAlign 枚举
功能描述: 文字对齐方式枚举。
| 枚举值 | 数值 | 说明 |
|---|---|---|
TEXT_ALIGN_LEFT |
0 | 左对齐 |
TEXT_ALIGN_RIGHT |
1 | 右对齐 |
TEXT_ALIGN_CENTER |
2 | 居中对齐 |
TEXT_ALIGN_JUSTIFY |
3 | 两端对齐 |
TEXT_ALIGN_START |
4 | 起始对齐 |
TEXT_ALIGN_END |
5 | 结束对齐 |
8.3.6 SrcType 枚举
功能描述: 融合源类型枚举。
| 枚举值 | 数值 | 说明 |
|---|---|---|
UNKNOWN |
0 | 未知类型 |
IMG |
1 | 图片类型 |
TXT |
2 | 文字类型 |
8.3.7 Orien 枚举
功能描述: 视频方向枚举。
| 枚举值 | 数值 | 说明 |
|---|---|---|
ORIEN_DEFAULT |
0 | 兼容模式 |
ORIEN_PORTRAIT |
1 | 适配竖屏 |
ORIEN_LANDSCAPE |
2 | 适配横屏 |
8.3.8 VAPSpeed 枚举
功能描述: 播放速度枚举。
| 枚举值 | 数值 | 说明 |
|---|---|---|
VAP_Speed_1_00_X |
1.0 | 正常速度 |
VAP_Speed_0_50_X |
0.5 | 半速播放 |
VAP_Speed_1_50_X |
1.5 | 1.5倍速 |
VAP_Speed_2_00_X |
2.0 | 2倍速 |
8.4 事件列表
| 事件名 | 回调参数 | 触发时机 |
|---|---|---|
click |
text: string |
点击到融合动画资源区域时,返回该资源的标签字符串 |
stateChange |
state: VapState, ret?: number | AnimConfig | undefined |
播放状态变化时触发。RENDER/START 时 ret 为 AnimConfig;FAILED 时 ret 为错误码 |
9. 约束与限制
在下述版本通过
- DevEco Studio 5.0(5.0.3.810), SDK: API12(5.0.0.60)
10. 权限设置
- 如果确定视频文件在沙箱中则不必配置
- 在应用模块的
module.json5中添加权限, 例如:entry\src\main\module.json5 READ_MEDIA读取用户目录下的文件(比如 文档);WRITE_MEDIA(下载到用户目录下);INTERNET下载网络文件
"requestPermissions": [
{
"name": "ohos.permission.READ_MEDIA",
"reason": "$string:read_file",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
},
{
"name": "ohos.permission.WRITE_MEDIA",
"reason": "$string:write_file",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
},
{
"name": "ohos.permission.INTERNET"
}
]
11. 编译构建
- 工程创建成功后,构建请运行
Build -> Build Hap(s)/APP(s) -> build App(s)选项 /entry/build/default/outputs生成hap包- 签名安装生成的
hap包
12. 测试demo
点击 Play 按钮,测试动画效果,再次点击进入循环播放
附录:导出汇总
| 导出名称 | 类型 | 来源文件 | 说明 |
|---|---|---|---|
VAPPlayer |
类 | vap_module/src/main/ets/VAPPlayer.ets |
API 模式播放器,实现 XComponentContext 接口 |
VAPComponent |
组件 | vap_module/src/main/ets/Index.ets |
组件模式,可直接作为 UI 组件使用 |
VAPComponentController |
类 | vap_module/src/main/ets/Index.ets |
组件控制器,用于外部控制 VAPComponent |
MixInputDataBean |
类 | vap_module/src/main/ets/Index.ets |
MixData 接口的实现类 |
VideoInfoBean |
类 | vap_module/src/main/ets/Index.ets |
VideoInfo 接口的实现类 |
VideoSize |
类 | vap_module/src/main/ets/Index.ets |
视频尺寸 |
DownloadData |
类 | vap_module/src/main/ets/DataDeclare.ets |
下载进度数据 |
MixData |
接口 | vap_module/src/main/ets/DataDeclare.ets |
融合数据接口 |
VAPColor |
接口 | vap_module/src/main/ets/DataDeclare.ets |
RGBA 颜色接口 |
VAPCallback |
接口 | vap_module/src/main/ets/DataDeclare.ets |
回调接口 |
AnimConfig |
接口 | vap_module/src/main/ets/DataDeclare.ets |
动画配置接口 |
PointRect |
接口 | vap_module/src/main/ets/DataDeclare.ets |
区域矩形接口 |
SrcInfo |
接口 | vap_module/src/main/ets/DataDeclare.ets |
融合源信息接口 |
VideoInfo |
接口 | vap_module/src/main/ets/DataDeclare.ets |
视频信息接口 |
XComponentContext |
接口 | vap_module/src/main/ets/DataDeclare.ets |
XComponent 上下文接口 |
VAPFontWeight |
枚举 | vap_module/src/main/ets/DataDeclare.ets |
字体粗细 |
VAPTextAlign |
枚举 | vap_module/src/main/ets/DataDeclare.ets |
文字对齐 |
FitType |
枚举 | vap_module/src/main/ets/DataDeclare.ets |
视频对齐方式 |
VapState |
枚举 | vap_module/src/main/ets/DataDeclare.ets |
播放状态(含 ATLAST) |
Orien |
枚举 | vap_module/src/main/ets/DataDeclare.ets |
视频方向 |
SrcType |
枚举 | vap_module/src/main/ets/DataDeclare.ets |
融合源类型 |
VideoMode |
枚举 | vap_module/src/main/ets/DataDeclare.ets |
视频模式 |
VAPSpeed |
枚举 | vap_module/src/main/ets/DataDeclare.ets |
播放速度 |