【HarmonyOS 鸿蒙实战开发】视频横竖屏切换及进度条热区拖动案例

---

📚往期笔录记录🔖：

🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🔖记录一场鸿蒙开发岗位面试经历~

🔖持续更新中……

---

介绍

本示例介绍了 @ohos.multimedia.media 组件和 @ohos.window 接口以及使用 触摸热区 实现视频横竖屏切换及进度条热区拖动的功能。该场景多用于横竖屏视频等媒体播放。

效果图预览

使用说明：

• 点击全屏观看按钮，切换横屏窗口。
• 点击左上角返回按钮，恢复竖屏窗口。
• 在进度条上方位置横向拖动可带动进度条移动。

实现步骤

1. 初始化 @ohos.multimedia.media 的AVPlayer。

  async Init(): Promise<void> {
   
    await this.release();
    const context = getContext(this);
    // 获取fdSrc用于注册AVPlayer
    context.resourceManager.getRawFd(this.fileName).then(async (value: resourceManager.RawFileDescriptor) => {
   
      this.avPlayer = await media.createAVPlayer();
      this.isCreate = true;
      this.setSourceInfo(); // 视频信息上报函数
      this.setStateChangeCallback(); // 状态机上报回调函数
      this.avPlayer.fdSrc = {
   
        fd: value.fd,
        offset: value.offset,
        length: value.length
      };
    });
  }

2. 当AVPlayer初始化完毕进入initialized状态时，将XComponent和AVPlayer通过surfaceId绑定，这样可以在XComponent组件内实现视频播放功能。比起Video组件，AVPlayer可以更方便自定义全屏动画效果。

  // TODO 知识点：XComponent和AVPlayer通过surfaceId绑定
  setSurfaceID(): void {
   
    logger.info('play video: surfaceID is:' + this.surfaceID);