视频播放器（ArkTS）

介绍

本篇Codelab使用ArkTS语言实现视频播放器，主要包括视频获取和视频播放功能：

1. 获取本地视频和网络视频。
2. 通过AVPlayer进行视频播放。
3. 通过手势调节屏幕亮度和视频播放音量。

相关概念

• AVPlayer播放管理类：视频播放组件。
• XComponent：可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。
• PanGesture手势：用于触发拖动手势事件，滑动的最小距离为5vp时拖动手势识别成功。

完整示例

gitee源码地址

源码下载

视频播放器（ArkTS）.zip

环境搭建

我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

软件要求

• DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。
• HarmonyOS SDK版本：API version 9及以上版本。

硬件要求

• 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
• HarmonyOS系统：3.1.0 Developer Release及以上版本。

环境搭建

1. 安装DevEco Studio，详情请参考下载和安装软件。
2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
   • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
   • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
3. 开发者可以参考以下链接，完成设备调试的相关配置：
   • 使用真机进行调试
   • 使用模拟器进行调试

代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在源码下载或gitee中提供。

No Preview

1. │──entry/src/main/ets // 代码区
2. │ ├──common
3. │ │ ├──bean
4. │ │ │ └──VideoBean.ets // 视频bean对象
5. │ │ ├──constants
6. │ │ │ ├──CommonConstants.ets // 公共常量类
7. │ │ │ ├──HomeConstants.ets // 首页常量类
8. │ │ │ └──PlayConstants.ets // 视频播放页面常量类
9. │ │ └──util
10. │ │ ├──DateFormatUtil.ets // 日期工具类
11. │ │ ├──Logger.ets // 日志工具类
12. │ │ └──ScreenUtil.ets // 屏幕工具类
13. │ ├──controller
14. │ │ └──VideoController // 视频控制类
15. │ ├──entryability
16. │ │ └──EntryAbility.ts // 程序入口类
17. │ ├──pages
18. │ │ ├──HomePage.ets // 首页页面
19. │ │ └──PlayPage.ets // 视频播放页面
20. │ ├──view
21. │ │ ├──HomeTabContent.ets // 首页Tab页面
22. │ │ ├──HomeTabContentButton.ets // 首页按钮子组件
23. │ │ ├──HomeTabContentDialog.ets // 添加网络视频弹框子组件
24. │ │ ├──HomeTabContentList.ets // 视频列表子组件
25. │ │ ├──HomeTabContentListItem.ets // 视频对象子组件
26. │ │ ├──PlayControl.ets // 播放控制子组件
27. │ │ ├──PlayPlayer.ets // 视频播放子组件
28. │ │ ├──PlayProgress.ets // 播放进度子组件
29. │ │ ├──PlayTitle.ets // 播放标题子组件
30. │ │ └──PlayTitleDialog.ets // 播放速度设置子组件
31. │ └──viewmodel
32. │ ├──HomeDialogModel.ets // 添加网络视频弹框类
33. │ └──HomeVideoListModel.ets // 获取视频列表数据类
34. └──entry/src/main/resource // 应用静态资源目录

获取视频

视频来源主要有本地视频和网络视频两种方式，效果如图所示：

获取本地视频，通过resourceManager.ResourceManager对象获取rawfile文件夹中的视频对象videoBean，再通过“fd://${videoBean.fd}”组装视频地址。

网络视频是通过手动输入地址，在有网的环境下点击“链接校验”，通过地址获取视频时长，当视频时长小于等于零时弹出“链接校验失败”提示，否则弹出“链接校验成功”提示。

视频播放

视频播放主要包括视频的暂停、播放、切换、倍速播放、拖动进度条设置当前进度、显示当前播放时间、音量调节等功能，本章节主要针对播放管理类（下面简称：AVPlayer）进行讲解，具体细节请参考gitee源码，效果如图所示：

播放的全流程包含：创建AVPlayer，设置播放资源，设置播放参数（音量/倍速），播放控制（播放/暂停/上一个视频/下一个视频），重置，销毁资源。状态机变化如图所示：

视频播放之前需要初始化XComponent组件用于展示视频画面。XComponent组件初始化成功之后在onLoad()中获取surfaceID用于与AVPlayer实例关联。

使用AVPlayer前需要通过createAVPlayer()构建一个实例对象，并为AVPlayer实例绑定状态机，状态机具体请参考AVPlayerState。

AVPlayer实例需设置播放路径和XComponent中获取的surfaceID，设置播放路径之后AVPlayer状态机变为initialized状态，在此状态下调用prepare()，进入prepared状态。

在prepared状态下可获取当前播放路径对应视频的总时长，并执行play()进行视频播放。

视频播放后，变为playing状态，可通过“播放/暂停”按钮切换播放状态，当视频暂停时状态机变为paused状态。

可拖动进度条设置视频播放位置，也可滑动音量调节区域设置视频播放音量、设置播放速度。

视频播放完成之后，进入completed状态，需调用reset()对视频进行重置，此时变为idle转态，在idle状态下设置下一个视频的播放地址，又会进入initialized状态。

手势控制

播放页面通过绑定平移手势（PanGesture），上下滑动调节屏幕亮度，左右滑动调节视频音量，效果如图所示：

本章节以音量调节介绍手势控制，当手指触摸音量调节区域时获取当前屏幕坐标，滑动手指实时获取屏幕坐标并计算音量。

Preview

1. // PlayPage.ets
2. Column() {
3. ...
4. Column()
5. ...
6. .gesture(
7. PanGesture(this.panOptionBright)
8. .onActionStart((event: GestureEvent) => {
9. this.playVideoModel.onBrightActionStart(event);
10. })
11. .onActionUpdate((event: GestureEvent) => {
12. this.playVideoModel.onBrightActionUpdate(event);
13. })
14. .onActionEnd(() => {
15. this.playVideoModel.onActionEnd();
16. })
17. )
18. ...
19. Column()
20. ...
21. .gesture(
22. PanGesture(this.panOptionVolume)
23. .onActionStart((event: GestureEvent) => {
24. this.playVideoModel.onVolumeActionStart(event);
25. })
26. .onActionUpdate((event: GestureEvent) => {
27. this.playVideoModel.onVolumeActionUpdate(event);
28. })
29. .onActionEnd(() => {
30. this.playVideoModel.onActionEnd();
31. })
32. )
33. ...
34. }
35. ...

总结

您已经完成了本次Codelab的学习，并了解到以下知识点：

1. AVPlayer组件的使用。
2. XComponent组件的使用。
3. PanGesture基础手势的使用。

进入华为专区，解锁更多内容