OpenHarmony开发者论坛
标题:
拆·应用丨第2期：基于开源鸿蒙的AVPlayer视频播控开发样例
[打印本页]
作者:
开源鸿蒙知行录
时间:
2026-1-21 17:28
标题:
拆·应用丨第2期：基于开源鸿蒙的AVPlayer视频播控开发样例
[md]> 【拆·应用】是为开源鸿蒙应用开发者打造的技术分享平台，是汇聚开发者的技术洞见与实践经验、提供开发心得与创新成果的展示窗口。诚邀您踊跃发声，期待您的真知灼见与技术火花！
# 样例简介
在开源鸿蒙生态建设中，多媒体能力是构建丰富用户体验的核心要素。本开发样例基于 `AVPlayer`实现，`AvPlayer`支持流媒体和本地资源解析、媒体资源解封装、视频解码和渲染功能，适用于对媒体资源进行端到端播放的场景，可直接播放mp4、mkv等格式的视频文件，为开发者提供标准化视频功能实现路径，助力构建高性能、可定制的多媒体应用。
# 使用说明
**操作面板唤起**：首页点击播放按钮，视频开始播放；再次点击画面进入全屏模式点击视频界面，唤起视频操作面板，再次点击操作面板消失，如果不做任何操作，操作界面会5s自动消失。
**视频播控**：点击暂停/播放按钮，控制视频暂停播放。
**滑动进度条**：视频跳转到指定位置播放，在中间区域显示时间进度。
**倍速切换**：可以选择1.0、1.25、1.75、2.0进行倍速调节。
**视频切换**：连接网络能在本地视频和网络视频进行切换。
> **注意**：
> `network`是网络视频，检测到没有连接网络会退出应用。
**音轨切换**：点击 `AudioTrack`音轨列表选择框，可以选择音轨进行切换。
**缩略图获取**：点击进入获取缩略图界面，可以获取视频的缩略图。
**外挂字幕**：点击 `Subtitle`开关列表选择框，可以切换外挂字幕是否显示。
# 样例代码拆解
下面是各个功能模块代码逻辑详细分解。可在此处下载[样例源码](
https://gitcode.com/openharmony/ ... ure/Media/VideoPlay
"样例源码下载链接")。
## 播控模块：包括视频播放、暂停、定点播放、倍速播放等。
1. 视频播放
- 视频播放窗口在 `CoverXComponent`自定义组件中实现。
- `CoverXComponent`中创建 `XComponent`组件，并在 `onLoad`中初始化视频。
- 初始化视频中创建视频播放器，并监听播放状态变化。
- 在监听播放状态中，等到达 `prepared`状态时，调用 `avPlayer.play()`播放视频
2. 视频暂停
- 暂停按钮绘制在 `VideoOperate`组件中。
- 使用 `Image`组件绘制播放、暂停按钮图标，点击调用视频暂停、播放接口。
3. 视频定点播放
- 使用 `Slider`组件绘制视频进度条，并设置拖动或点击时触发事件回调。
- 在回调事件中，调用 `avPlayer.seek`接口进行视频定点播放。
4. 视频倍速设置
- 使用 `Button`组件作为倍速选择按钮，点击后打开倍速选择弹框。
- 通过 `CustomDialogController`自定义弹框实现倍速选择。
- `SpeedDialog`组件中通过 `List`实现1.0X、1.25X、1.75X、2.0X倍速选择。
- `List`点击事件中，设置视频播放具体倍速。
- 调用 `avPlayer.setSpeed()`设备倍速。
- 
- 
## 视频切换：设备联网后，本地视频和网络视频都可以播放。
- 首先是 `Row`容器组件，组件中包含列表图标，播放的视频名称，和列表下拉图标。并在点击事件中设置 `isShow为true或false`，控制视频列表 `VideoPanel`是否展示。
- 通过 `VideoPanel`绘制视频列表，点击切换视频。
- `VideoPanel`中通过 `List`组件绘制视频列表，包括视频名称、是否当前播放，点击后调用 `VideoChoose`切换视频播放。
- 如下图所示，`VideoChoose`中调用 `videoReset`，即 `avPlayer.reset`重置视频。
## 音轨切换：视频音轨切换，即视频有多种语言配音可进行音轨切换。
- 通过 `Select`组件绘制，并通过 `onSelect`调用 `setAudioTrack`接口设置音轨。
- `setAudioTrack`中，通过 `deselectTrack`和 `selectTrack`进行音轨切换。
## 字幕展示：设备联网后，点击字幕开，在视频下方展示外挂字幕。
- 通过 `Select`组件绘制，并在 `onSelect`调用 `setSubtitleState`打开、关闭字幕。
- `setSubtitleState`中设置当前的字幕状态。
- 通过 `Text`组件显示字幕。
- `this.text`是监听 `subtitleUpdate`获取的字幕内容。
## 缩略图获取：视频跳转到指定位置播放，在中间区域显示时间进度。
- 通过 `createAVMetadataExtractor`从媒体资源中提取元数据，作为缩略图。通过 `createAVImageGenerator`从视频资源中获取指定时间的缩略图。
# 结语
以上是本次样例具体功能模块的实现，通过本样例让开发者们了解到如何使用 `AVPlayer`开发视频播放功能，包括创建 `AVPlayer`、设置播放资源和窗口、设置播放倍速、播放控制（播放/暂停/跳转/停止）、重置销毁资源、字幕展示等；除此之外，开源鸿蒙也提供了丰富的基础组件和其他功能模块，依托开源特性可灵活定制底层功能，借助分布式架构实现 “一次开发，多端部署”，大幅降低跨设备协同开发成本，一系列配套的开发工具和教程可让开发者快速上手，欢迎更多的开发者加入到开源鸿蒙应用开发中，创造更多奇思妙想的应用。
[/md]
欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)
Powered by Discuz! X3.5