HarmonyOS开发案例：【视频播放器】

Android技术栈2024-04-25 16:06

介绍

本篇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。

硬件要求

  • 开发板类型：[润和RK3568开发板]。
  • OpenHarmony系统：3.2 Release。

环境搭建

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

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

  2. 搭建烧录环境。

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

  3. 搭建开发环境。

    1. 开始前请参考[工具准备]，完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后，请参考[使用工程向导]创建工程（模板选择"Empty Ability"）。
    3. 工程创建完成后，选择使用[真机进行调测]。
    4. 鸿蒙开发指导文档：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

代码结构解读

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

HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿
├──entry/src/main/ets	                   // 代码区
│  ├──common
│  │  ├──constants
│  │  │  ├──CommonConstants.ets	           // 公共常量类
│  │  │  ├──HomeConstants.ets	           // 首页常量类
│  │  │  └──PlayConstants.ets	           // 视频播放页面常量类
│  │  ├──model
│  │  │  ├──HomeTabModel.ets	           // 首页参数模型
│  │  │  └──PlayerModel.ets	               // 播放参数模型
│  │  └──util
│  │     ├──DateFormatUtil.ets	           // 日期工具类
│  │     ├──GlobalContext.ets	           // 全局工具类
│  │     ├──Logger.ets	                   // 日志工具类
│  │     └──ScreenUtil.ets                 // 屏幕工具类
│  ├──controller
│  │  └──VideoController.ets	           // 视频控制类
│  ├──entryability
│  │  └──EntryAbility.ts                   // 程序入口类
│  ├──pages
│  │  ├──HomePage.ets                      // 首页页面
│  │  └──PlayPage.ets                      // 视频播放页面
│  ├──view
│  │  ├──HomeTabContent.ets                // 首页Tab页面
│  │  ├──HomeTabContentButton.ets          // 首页按钮子组件
│  │  ├──HomeTabContentDialog.ets          // 添加网络视频弹框子组件
│  │  ├──HomeTabContentList.ets            // 视频列表子组件
│  │  ├──HomeTabContentListItem.ets        // 视频对象子组件
│  │  ├──PlayControl.ets                   // 播放控制子组件
│  │  ├──PlayPlayer.ets                    // 视频播放子组件
│  │  ├──PlayProgress.ets                  // 播放进度子组件
│  │  ├──PlayTitle.ets                     // 播放标题子组件
│  │  └──PlayTitleDialog.ets               // 播放速度设置子组件
│  └──viewmodel
│     ├──HomeDialogModel.ets         	   // 添加网络视频弹框类
│     ├──HomeVideoListModel.ets            // 获取视频列表数据类
│     ├──VideoItem.ets         	           // 视频对象
│     └──VideoSpeed.ets                    // 播放速度类
└──entry/src/main/resource                 // 应用静态资源目录

获取视频

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

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

// HomeVideoListModel.ets
// 获取本地视频
async getLocalVideo() {
  this.videoLocalList = [];
  await this.assemblingVideoBean();
  GlobalContext.getContext().setObject('videoLocalList', this.videoLocalList);
  return this.videoLocalList;
}

// HomeVideoListModel.ets
// 组装本地视频对象
async assemblingVideoBean() {
  VIDEO_DATA.forEach(async (item: VideoItem) => {
    let videoBean = await getContext().resourceManager.getRawFd(item.iSrc);
    let uri = videoBean;
    this.videoLocalList.push(new VideoItem(item.name, uri, ''));
  });
}

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

// HomeDialogModel.ets
// 设置网络视频路径
async checkSrcValidity(checkFlag: number) {
  if (this.isLoading) {
    return;
  }
  this.isLoading = true;
  this.homeTabModel.linkCheck = $r('app.string.link_checking');
  this.homeTabModel.loadColor = $r('app.color.index_tab_unselected_font_color');
  this.checkFlag = checkFlag;
  this.createAvPlayer();
}

// 校验链接有效性
checkUrlValidity() {
  this.isLoading = false;
  this.homeTabModel.linkCheck = $r('app.string.link_check');
  this.homeTabModel.loadColor = $r('app.color.index_tab_selected_font_color');
  if (this.avPlayer !== null) {
    this.avPlayer.release();
  }
  if (this.duration === HomeConstants.DURATION_TWO) {
    // Failed to verify the link
    this.showPrompt($r('app.string.link_check_fail'));
  } else if (this.duration === HomeConstants.DURATION_ONE) {
    // The address is incorrect or no network is available
    this.showPrompt($r('app.string.link_check_address_internet'));
  } else {
    this.duration = 0;
    if (this.checkFlag === 0) {
      this.showPrompt($r('app.string.link_check_success'));
    } else {
      this.homeTabModel!.confirm();
      this.homeTabModel!.controller!.close();
    }
  }
}

视频播放

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

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

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

// PlayPlayer.ets
XComponent({
  ...
  controller: this.xComponentController
})
  .onLoad(async () => {
    ...
    this.surfaceID = this.xComponentController.getXComponentSurfaceId();
    ...
  })
  ...

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

// VideoController.ets
async createAVPlayer() {
  let avPlayer: media.AVPlayer = await media.createAVPlayer();
  this.avPlayer = avPlayer;
  this.bindState();
}

// VideoController.ets
async bindState() {
  if (this.avPlayer === null) {
    return;
  }
  this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) => {
    let avplayerStatus: string = state;
    if (this.avPlayer === null) {
      return;
    }
    switch (avplayerStatus) {
      case AvplayerStatus.IDLE:
        ...
      case AvplayerStatus.INITIALIZED:
        ...
      case AvplayerStatus.PREPARED:
        ...
      case AvplayerStatus.PLAYING:
        ...
      case AvplayerStatus.PAUSED:
        ...
      case AvplayerStatus.COMPLETED:
        ...
      case AvplayerStatus.RELEASED:
        ...
      default:
        ...
    }
  });
  this.avPlayer.on(Events.TIME_UPDATE, (time: number) => {
    this.initProgress(time);
  });
  this.avPlayer.on(Events.ERROR, () => {
    this.playError();
  })
}

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

// VideoController.ets
async firstPlay(index: number, url: resourceManager.RawFileDescriptor, iUrl: string, surfaceId: string) {
  this.index = index;
  this.url = url;
  this.iUrl = iUrl;
  this.surfaceId = surfaceId;
  if (this.avPlayer === null) {
    await this.createAVPlayer();
  }
  if (this.avPlayer !== null) {
    if (this.iUrl) {
      this.avPlayer.url = this.iUrl;
    } else {
      this.avPlayer.fdSrc = this.url;
    }
  }
}

// VideoController.ets
async bindState() {
  ...
  this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) => {
    let avplayerStatus: string = state;
    if (this.avPlayer === null) {
      return;
    }
    switch (avplayerStatus) {
      case AvplayerStatus.IDLE:
        ...
      case AvplayerStatus.INITIALIZED:
        this.avPlayer.surfaceId = this.surfaceId;
        this.avPlayer.prepare();
        break;
      ...
    }
  });
  ...
}

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

// VideoController.ets
async bindState() {
  ...
  this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) => {
    ...
    switch (avplayerStatus) {
      ...
      case AvplayerStatus.PREPARED:
        this.avPlayer.videoScaleType = 0;
        this.setVideoSize();
        this.avPlayer.play();
        this.duration = this.avPlayer.duration;
        break;
      ...
    }
  });
  ...
}

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

// VideoController.ets
switchPlayOrPause() {
  if (this.avPlayer === null) {
    return;
  }
  if (this.status === CommonConstants.STATUS_START) {
    this.avPlayer.pause();
  } else {
    this.avPlayer.play();
  }
}

// VideoController.ets
async bindState() {
  ...
  this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) => {
    ...
    switch (avplayerStatus) {
      ...
      case AvplayerStatus.PLAYING:
        this.avPlayer.setVolume(this.playerModel.volume);
        this.setBright();
        this.status = CommonConstants.STATUS_START;
        this.watchStatus();
        break;
      ...
    }
  });
  ...
}

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

// VideoController.ets
// 设置当前播放位置
setSeekTime(value: number, mode: SliderChangeMode) {
  if (mode === Number(SliderMode.MOVING)) {
    this.playerModel.progressVal = value;
    this.playerModel.currentTime = DateFormatUtil.secondToTime(Math.floor(value * this.duration /
    CommonConstants.ONE_HUNDRED / CommonConstants.A_THOUSAND));
  }
  if (mode === Number(SliderMode.END) || mode === Number(SliderMode.CLICK)) {
    this.seekTime = value * this.duration / CommonConstants.ONE_HUNDRED;
    if (this.avPlayer !== null) {
      this.avPlayer.seek(this.seekTime, media.SeekMode.SEEK_PREV_SYNC);
    }
  }
}

// VideoController.ets
// 设置播放音量
onVolumeActionUpdate(event?: GestureEvent) {
  if (!event) {
    return;
  }
  if (this.avPlayer === null) {
    return;
  }
  if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
    return;
  }
  if (this.playerModel.brightShow === false) {
    this.playerModel.volumeShow = true;
    let screenWidth = GlobalContext.getContext().getObject('screenWidth') as number;
    let changeVolume = (event.offsetX - this.positionX) / screenWidth;
    let volume: number = this.playerModel.volume;
    let currentVolume = volume + changeVolume;
    let volumeMinFlag = currentVolume <= PlayConstants.MIN_VALUE;
    let volumeMaxFlag = currentVolume > PlayConstants.MAX_VALUE;
    this.playerModel.volume = volumeMinFlag ? PlayConstants.MIN_VALUE :
      (volumeMaxFlag ? PlayConstants.MAX_VALUE : currentVolume);
    this.avPlayer.setVolume(this.playerModel.volume);
    this.positionX = event.offsetX;
  }
}

// VideoController.ets
// 设置播放速度
setSpeed(playSpeed: number) {
  if (this.avPlayer === null) {
    return;
  }
  if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
    return;
  }
  this.playerModel.playSpeed = playSpeed;
  this.avPlayer.setSpeed(this.playerModel.playSpeed);
}

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

// VideoController.ets 
sync bindState() {
  ...
  this.avPlayer.on(Events.STATE_CHANGE, async (state: media.AVPlayerState) => {
    let avplayerStatus: string = state;
    ...
    switch (avplayerStatus) {
      case AvplayerStatus.IDLE:
        this.resetProgress();
        if (this.iUrl) {
          this.avPlayer.url = this.iUrl;
        } else {
          this.avPlayer.fdSrc = this.url;
        }
        break;
      case AvplayerStatus.INITIALIZED:
        this.avPlayer.surfaceId = this.surfaceId;
        this.avPlayer.prepare();
        break;
      ...
      case AvplayerStatus.COMPLETED:
        ...
        this.avPlayer.reset();
        break;
      ...
    }
  });
  ...
}

手势控制

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

// PlayPage.ets
Column() {
  ...
  Column()
    ...
    .gesture(
      PanGesture(this.panOptionBright)
        .onActionStart((event?: GestureEvent) => {
          this.playVideoModel.onBrightActionStart(event);
        })
        .onActionUpdate((event?: GestureEvent) => {
          this.playVideoModel.onBrightActionUpdate(event);
        })
        .onActionEnd(() => {
          this.playVideoModel.onActionEnd();
        })
    )
  ...
  Column()
    ...
    .gesture(
      PanGesture(this.panOptionVolume)
        .onActionStart((event?: GestureEvent) => {
          this.playVideoModel.onVolumeActionStart(event);
        })
        .onActionUpdate((event?: GestureEvent) => {
          this.playVideoModel.onVolumeActionUpdate(event);
        })
        .onActionEnd(() => {
          this.playVideoModel.onActionEnd();
        })
    )
  ...
}
...

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

// VideoController.ets
// 手指触摸到音量调节区域
onVolumeActionStart(event?: GestureEvent) {
  if (!event) {
    return;
  }
  this.positionX = event.offsetX;
}

// 手指在音量调节区域水平滑动
onVolumeActionUpdate(event?: GestureEvent) {
  if (!event) {
    return;
  }
  if (this.avPlayer === null) {
    return;
  }
  if (CommonConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
    return;
  }
  if (this.playerModel.brightShow === false) {
    this.playerModel.volumeShow = true;
    let screenWidth = GlobalContext.getContext().getObject('screenWidth') as number;
    let changeVolume = (event.offsetX - this.positionX) / screenWidth;
    let volume: number = this.playerModel.volume;
    let currentVolume = volume + changeVolume;
    let volumeMinFlag = currentVolume <= PlayConstants.MIN_VALUE;
    let volumeMaxFlag = currentVolume > PlayConstants.MAX_VALUE;
    this.playerModel.volume = volumeMinFlag ? PlayConstants.MIN_VALUE :
      (volumeMaxFlag ? PlayConstants.MAX_VALUE : currentVolume);
    this.avPlayer.setVolume(this.playerModel.volume);
    this.positionX = event.offsetX;
  }
}
相关推荐
SuperHeroWu713 分钟前
【HarmonyOS】HarmonyOS和React Native混合开发 （一）之环境安装
react native·harmonyos·鸿蒙·开发环境·环境安装·rn·混合开发
轻口味41 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
无处安放的波澜43 分钟前
【HarmonyOS 5.0】第十二篇-ArkUI公共属性(一)
华为·harmonyos·arkts·鸿蒙·鸿蒙系统
Kai HVZ1 小时前
python爬虫----爬取视频实战
爬虫·python·音视频
李洋-蛟龙腾飞公司1 小时前
HarmonyOS Next 应用元服务开发-分布式数据对象迁移数据文件资产迁移
分布式·华为·harmonyos
大土豆的bug记录2 小时前
鸿蒙历史搜索功能：tag标签根据文字宽度自动换行 展示更多
华为·harmonyos
轻口味2 小时前
【每日学点鸿蒙知识】Charles抓包、lock文件处理、WebView组件、NFC相关、CallMethod失败等
华为·harmonyos
强哥之神2 小时前
Nexa AI发布OmniAudio-2.6B：一款快速的音频语言模型，专为边缘部署设计
人工智能·深度学习·机器学习·语言模型·自然语言处理·音视频·openai
j喬乔3 小时前
Node导入不了命名函数？记一次Bug的探索
typescript·node.js
一个处女座的程序猿O(∩_∩)O4 小时前
开源鸿蒙 5.0 正式版发布
华为·harmonyos
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库