devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

OpenHarmony开发实战：视频播放器（ArkTS）_resourcemanager.getrawfd

作者：Monodyee | 2024-04-24 15:58:09

赞

踩

resourcemanager.getrawfd

本篇Codelab使用ArkTS语言实现视频播放器，主要包括主页面和视频播放页面，我们将一起完成以下功能：

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

相关概念

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

相关权限

本篇Codelab使用了网络连接，需要在配置文件module.json5文件里添加权限：ohos.permission.INTERNET。

环境搭建

软件要求

  • DevEco Studio版本：DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本：API version 9。

硬件要求

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

  1. 获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

  2. 搭建烧录环境。

    1. 完成DevEco Device Tool的安装
    2. 完成RK3568开发板的烧录

  3. 搭建开发环境。

    1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
    3. 工程创建完成后，选择使用真机进行调测。

代码结构解读

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

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

获取视频

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

获取本地视频，通过resourceManager.getRawFd方法获取rawfile文件夹中的视频资源文件描述符，构造本地视频对象。

  1. // HomeVideoListModel.ets
  2. // 获取本地视频
  3. async getLocalVideo() {
  4.   this.videoLocalList = [];
  5.   await this.assemblingVideoBean();
  6.   GlobalContext.getContext().setObject('videoLocalList', this.videoLocalList);
  7.   return this.videoLocalList;
  8. }
  9.  
  10. // HomeVideoListModel.ets
  11. // 组装本地视频对象
  12. async assemblingVideoBean() {
  13.   VIDEO_DATA.forEach(async (item: VideoItem) => {
  14.     let videoBean = await getContext().resourceManager.getRawFd(item.iSrc);
  15.     let uri = videoBean;
  16.     this.videoLocalList.push(new VideoItem(item.name, uri, ''));
  17.   });
  18. }

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

  1. // HomeDialogModel.ets
  2. // 设置网络视频路径
  3. async checkSrcValidity(checkFlag: number) {
  4.   if (this.isLoading) {
  5.     return;
  6.   }
  7.   this.isLoading = true;
  8.   this.homeTabModel.linkCheck = $r('app.string.link_checking');
  9.   this.homeTabModel.loadColor = $r('app.color.index_tab_unselected_font_color');
  10.   this.checkFlag = checkFlag;
  11.   this.createAvPlayer();
  12. }
  13.  
  14. // 校验链接有效性
  15. checkUrlValidity() {
  16.   this.isLoading = false;
  17.   this.homeTabModel.linkCheck = $r('app.string.link_check');
  18.   this.homeTabModel.loadColor = $r('app.color.index_tab_selected_font_color');
  19.   if (this.avPlayer !== null) {
  20.     this.avPlayer.release();
  21.   }
  22.   if (this.duration === HomeConstants.DURATION_TWO) {
  23.     // Failed to verify the link
  24.     this.showPrompt($r('app.string.link_check_fail'));
  25.   } else if (this.duration === HomeConstants.DURATION_ONE) {
  26.     // The address is incorrect or no network is available
  27.     this.showPrompt($r('app.string.link_check_address_internet'));
  28.   } else {
  29.     this.duration = 0;
  30.     if (this.checkFlag === 0) {
  31.       this.showPrompt($r('app.string.link_check_success'));
  32.     } else {
  33.       this.homeTabModel!.confirm();
  34.       this.homeTabModel!.controller!.close();
  35.     }
  36.   }
  37. }

视频播放

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

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

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

  1. // PlayPlayer.ets
  2. XComponent({
  3.   ...
  4.   controller: this.xComponentController
  5. })
  6.   .onLoad(async () => {
  7.     ...
  8.     this.surfaceID = this.xComponentController.getXComponentSurfaceId();
  9.     ...
  10.   })
  11.   ...

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

  1. // VideoController.ets
  2. async createAVPlayer() {
  3.   let avPlayer: media.AVPlayer = await media.createAVPlayer();
  4.   this.avPlayer = avPlayer;
  5.   this.bindState();
  6. }
  7.  
  8. // VideoController.ets
  9. async bindState() {
  10.   if (this.avPlayer === null) {
  11.     return;
  12.   }
  13.   this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) => {
  14.     let avplayerStatus: string = state;
  15.     if (this.avPlayer === null) {
  16.       return;
  17.     }
  18.     switch (avplayerStatus) {
  19.       case AvplayerStatus.IDLE:
  20.         ...
  21.       case AvplayerStatus.INITIALIZED:
  22.         ...
  23.       case AvplayerStatus.PREPARED:
  24.         ...
  25.       case AvplayerStatus.PLAYING:
  26.         ...
  27.       case AvplayerStatus.PAUSED:
  28.         ...
  29.       case AvplayerStatus.COMPLETED:
  30.         ...
  31.       case AvplayerStatus.RELEASED:
  32.         ...
  33.       default:
  34.         ...
  35.     }
  36.   });
  37.   this.avPlayer.on(Events.TIME_UPDATE, (time: number) => {
  38.     this.initProgress(time);
  39.   });
  40.   this.avPlayer.on(Events.ERROR, () => {
  41.     this.playError();
  42.   })
  43. }

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

  1. // VideoController.ets
  2. async firstPlay(index: number, url: resourceManager.RawFileDescriptor, iUrl: string, surfaceId: string) {
  3.   this.index = index;
  4.   this.url = url;
  5.   this.iUrl = iUrl;
  6.   this.surfaceId = surfaceId;
  7.   if (this.avPlayer === null) {
  8.     await this.createAVPlayer();
  9.   }
  10.   if (this.avPlayer !== null) {
  11.     if (this.iUrl) {
  12.       this.avPlayer.url = this.iUrl;
  13.     } else {
  14.       this.avPlayer.fdSrc = this.url;
  15.     }
  16.   }
  17. }
  18.  
  19. // VideoController.ets
  20. async bindState() {
  21.   ...
  22.   this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) => {
  23.     let avplayerStatus: string = state;
  24.     if (this.avPlayer === null) {
  25.       return;
  26.     }
  27.     switch (avplayerStatus) {
  28.       case AvplayerStatus.IDLE:
  29.         ...
  30.       case AvplayerStatus.INITIALIZED:
  31.         this.avPlayer.surfaceId = this.surfaceId;
  32.         this.avPlayer.prepare();
  33.         break;
  34.       ...
  35.     }
  36.   });
  37.   ...
  38. }

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

  1. // VideoController.ets
  2. async bindState() {
  3.   ...
  4.   this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) => {
  5.     ...
  6.     switch (avplayerStatus) {
  7.       ...
  8.       case AvplayerStatus.PREPARED:
  9.         this.avPlayer.videoScaleType = 0;
  10.         this.setVideoSize();
  11.         this.avPlayer.play();
  12.         this.duration = this.avPlayer.duration;
  13.         break;
  14.       ...
  15.     }
  16.   });
  17.   ...
  18. }

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

  1. // VideoController.ets
  2. switchPlayOrPause() {
  3.   if (this.avPlayer === null) {
  4.     return;
  5.   }
  6.   if (this.status === CommonConstants.STATUS_START) {
  7.     this.avPlayer.pause();
  8.   } else {
  9.     this.avPlayer.play();
  10.   }
  11. }
  12.  
  13. // VideoController.ets
  14. async bindState() {
  15.   ...
  16.   this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) => {
  17.     ...
  18.     switch (avplayerStatus) {
  19.       ...
  20.       case AvplayerStatus.PLAYING:
  21.         this.avPlayer.setVolume(this.playerModel.volume);
  22.         this.setBright();
  23.         this.status = CommonConstants.STATUS_START;
  24.         this.watchStatus();
  25.         break;
  26.       ...
  27.     }
  28.   });
  29.   ...
  30. }

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

  1. // VideoController.ets
  2. // 设置当前播放位置
  3. setSeekTime(value: number, mode: SliderChangeMode) {
  4.   if (mode === Number(SliderMode.MOVING)) {
  5.     this.playerModel.progressVal = value;
  6.     this.playerModel.currentTime = DateFormatUtil.secondToTime(Math.floor(value * this.duration /
  7.     CommonConstants.ONE_HUNDRED / CommonConstants.A_THOUSAND));
  8.   }
  9.   if (mode === Number(SliderMode.END) || mode === Number(SliderMode.CLICK)) {
  10.     this.seekTime = value * this.duration / CommonConstants.ONE_HUNDRED;
  11.     if (this.avPlayer !== null) {
  12.       this.avPlayer.seek(this.seekTime, media.SeekMode.SEEK_PREV_SYNC);
  13.     }
  14.   }
  15. }
  16.  
  17. // VideoController.ets
  18. // 设置播放音量
  19. onVolumeActionUpdate(event?: GestureEvent) {
  20.   if (!event) {
  21.     return;
  22.   }
  23.   if (this.avPlayer === null) {
  24.     return;
  25.   }
  26.   if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
  27.     return;
  28.   }
  29.   if (this.playerModel.brightShow === false) {
  30.     this.playerModel.volumeShow = true;
  31.     let screenWidth = GlobalContext.getContext().getObject('screenWidth') as number;
  32.     let changeVolume = (event.offsetX - this.positionX) / screenWidth;
  33.     let volume: number = this.playerModel.volume;
  34.     let currentVolume = volume + changeVolume;
  35.     let volumeMinFlag = currentVolume <= PlayConstants.MIN_VALUE;
  36.     let volumeMaxFlag = currentVolume > PlayConstants.MAX_VALUE;
  37.     this.playerModel.volume = volumeMinFlag ? PlayConstants.MIN_VALUE :
  38.       (volumeMaxFlag ? PlayConstants.MAX_VALUE : currentVolume);
  39.     this.avPlayer.setVolume(this.playerModel.volume);
  40.     this.positionX = event.offsetX;
  41.   }
  42. }
  43.  
  44. // VideoController.ets
  45. // 设置播放速度
  46. setSpeed(playSpeed: number) {
  47.   if (this.avPlayer === null) {
  48.     return;
  49.   }
  50.   if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
  51.     return;
  52.   }
  53.   this.playerModel.playSpeed = playSpeed;
  54.   this.avPlayer.setSpeed(this.playerModel.playSpeed);
  55. }

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

  1. // VideoController.ets 
  2. sync bindState() {
  3.   ...
  4.   this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) => {
  5.     let avplayerStatus: string = state;
  6.     ...
  7.     switch (avplayerStatus) {
  8.       case AvplayerStatus.IDLE:
  9.         this.resetProgress();
  10.         if (this.iUrl) {
  11.           this.avPlayer.url = this.iUrl;
  12.         } else {
  13.           this.avPlayer.fdSrc = this.url;
  14.         }
  15.         break;
  16.       case AvplayerStatus.INITIALIZED:
  17.         this.avPlayer.surfaceId = this.surfaceId;
  18.         this.avPlayer.prepare();
  19.         break;
  20.       ...
  21.       case AvplayerStatus.COMPLETED:
  22.         ...
  23.         this.avPlayer.reset();
  24.         break;
  25.       ...
  26.     }
  27.   });
  28.   ...
  29. }

手势控制

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

  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. ...

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

  1. // VideoController.ets
  2. // 手指触摸到音量调节区域
  3. onVolumeActionStart(event?: GestureEvent) {
  4.   if (!event) {
  5.     return;
  6.   }
  7.   this.positionX = event.offsetX;
  8. }
  9.  
  10. // 手指在音量调节区域水平滑动
  11. onVolumeActionUpdate(event?: GestureEvent) {
  12.   if (!event) {
  13.     return;
  14.   }
  15.   if (this.avPlayer === null) {
  16.     return;
  17.   }
  18.   if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
  19.     return;
  20.   }
  21.   if (this.playerModel.brightShow === false) {
  22.     this.playerModel.volumeShow = true;
  23.     let screenWidth = GlobalContext.getContext().getObject('screenWidth') as number;
  24.     let changeVolume = (event.offsetX - this.positionX) / screenWidth;
  25.     let volume: number = this.playerModel.volume;
  26.     let currentVolume = volume + changeVolume;
  27.     let volumeMinFlag = currentVolume <= PlayConstants.MIN_VALUE;
  28.     let volumeMaxFlag = currentVolume > PlayConstants.MAX_VALUE;
  29.     this.playerModel.volume = volumeMinFlag ? PlayConstants.MIN_VALUE :
  30.       (volumeMaxFlag ? PlayConstants.MAX_VALUE : currentVolume);
  31.     this.avPlayer.setVolume(this.playerModel.volume);
  32.     this.positionX = event.offsetX;
  33.   }
  34. }

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

 有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/480278
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号