HarmonyOS 鸿蒙Next中添加画中画功能时设置视频快进后退效果控制组件显示不出来

HarmonyOS 鸿蒙Next中添加画中画功能时设置视频快进后退效果控制组件显示不出来

async createPipController() {
  this.pipController = await PiPWindow.create({
    context: UIContext,
    componentController: this.mXComponentController,
    navigationId: this.navigationId,
    templateType: PiPWindow.PiPTemplateType.VIDEO_PLAY,
    controlGroups:[
      // PiPWindow.VideoPlayControlGroup.VIDEO_PREVIOUS_NEXT,
      PiPWindow.VideoPlayControlGroup.FAST_FORWARD_BACKWARD
    ],
  });
  this.pipController.on('stateChange', (state: PiPWindow.PiPState, reason: string) => {
    this.onStateChange(state, reason);
  });
  this.pipController.on('controlPanelActionEvent', (event: PiPWindow.PiPActionEventType, status?: number) => {
    this.onActionEvent(event, status);
  });
}

cke_167.jpeg


更多关于HarmonyOS 鸿蒙Next中添加画中画功能时设置视频快进后退效果控制组件显示不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

可能是因为兼容性问题

可以从以下着手检查看看

需确认 FAST_FORWARD_BACKWARD 是否与当前 PiPTemplateType.VIDEO_PLAY 模板兼容。部分控制组需特定模板支持

controlGroups: [
  PiPWindow.VideoPlayControlGroup.FAST_FORWARD_BACKWARD
]

某些控制组需搭配其他基础控制项使用。可尝试同时添加 VIDEO_PREVIOUS_NEXT 或播放/暂停按钮验证是否显示逻辑冲突

controlGroups: [
  PiPWindow.VideoPlayControlGroup.PLAY_PAUSE, // 基础控制项
  PiPWindow.VideoPlayControlGroup.FAST_FORWARD_BACKWARD
]

更多关于HarmonyOS 鸿蒙Next中添加画中画功能时设置视频快进后退效果控制组件显示不出来的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我尝试了大佬给出的方案，

controlGroups: [
  PiPWindow.VideoPlayControlGroup.PLAY_PAUSE, // 基础控制项
  PiPWindow.VideoPlayControlGroup.FAST_FORWARD_BACKWARD
]

PiPWindow.VideoPlayControlGroup.PLAY_PAUSE 在controlGroups 设置会报红，把 PiPWindow.VideoPlayControlGroup.VIDEO_PREVIOUS_NEXT， PiPWindow.VideoPlayControlGroup.FAST_FORWARD_BACKWARD， 都添加进去会造成小窗不能创建，

楼主给的信息有点少，猜一下PiPWindow.PiPTemplateType.VIDEO_PLAY模板仅支持播放/暂停控制，如国需要扩展控制组件需确认是否支持FAST_FORWARD_BACKWARD控制组。另外检查一下PiPWindow.VideoPlayControlGroup.FAST_FORWARD_BACKWARD是否在当前SDK版本生效，因为部分版本需要组合使用VIDEO_PREVIOUS_NEXT才能显示进度控制。

楼主在startPip()方法中添加实例存在性校验，确保pipController不会被重复创建

async startPip() {
  if (!this.pipController) {
    await this.createPipController(); 
  }
  await this.pipController.startPiP();
}

在onStateChange回调中处理PiPWindow.PiPState.ACTIVE状态，此时才会渲染控制层。

再确认一下你的controlPanelActionEvent事件是否正确响应操作？

this.pipController.on('controlPanelActionEvent', (event: PiPWindow.PiPActionEventType) => {
  switch(event) {
    case PiPWindow.PiPActionEventType.FAST_FORWARD:
      // 快进逻辑
      break;
    case PiPWindow.PiPActionEventType.FAST_BACKWARD:
      // 后退逻辑
      break;
  }
});

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17，

onActionEvent(event: PiPWindow.PiPActionEventType, status: number | undefined) {
  switch (event) {
    case 'playbackStateChanged':
      if (status === 0) {
        // 暂停播放
        if (this.player) {
          this.player.updatePlayStatus(false);
          this.player.pause();
        }
        if (this.playerControl) {
          this.playerControl.pause();
        }
      } else {
        // 继续播放
        if (this.player) {
          this.player.updatePlayStatus(true);
          this.player.play();
        }
        if (this.playerControl) {
          this.playerControl.play();
        }
      }
      break;
    case 'fastForward':
      // 快进15秒
      console.log('PiP: Seek forward 15 seconds');
      if (this.playerControl) {
        this.playerControl.seekForward(15);
      }
      break;
    case 'fastBackward':
      // 快退15秒
      console.log('PiP: Seek backward 15 seconds');
      if (this.playerControl) {
        this.playerControl.seekBackward(15);
      }
      break;
    default:
      console.log('PiP: Unknown action event:', event);
      break;
  }
}

async createPipController() {
  try {
    this.pipController = await PiPWindow.create({
      context: UIContext,
      componentController: this.xComponentController,
      templateType: PiPWindow.PiPTemplateType.VIDEO_PLAY,
      contentWidth: 1600,
      contentHeight: 900,
      controlGroups: [
        PiPWindow.VideoPlayControlGroup.FAST_FORWARD_BACKWARD
      ]
    });
    
    if (this.pipController) {
      this.pipController.on('stateChange', (state: PiPWindow.PiPState, reason: string) => {
        this.onStateChange(state, reason);
      });
      this.pipController.on('controlPanelActionEvent', (event: PiPWindow.PiPActionEventType, status?: number) => {
        this.onActionEvent(event, status);
      });
    }
  } catch (error) {
    console.error('Failed to create PiP controller:', error);
    this.pipController = undefined;
  }
}

在鸿蒙Next中实现画中画视频快进后退控制组件不显示，通常涉及UI组件可见性配置问题。检查ArkUI组件属性设置，确认visible或opacity属性未被错误绑定或设置为false。排查布局层级，确保控制组件未被其他视图遮挡。验证状态管理逻辑，确保触发显示的事件（如手势识别）正确传递到组件。检查资源文件完整性，确认图标资源未缺失或尺寸异常。

在HarmonyOS Next中，画中画（PiP）功能默认的视频播放模板（VIDEO_PLAY）可能未直接暴露快进后退控制组件的UI显示。根据你的代码，虽然正确配置了FAST_FORWARD_BACKWARD控制组，但组件未显示可能是由于以下原因：

  1. 模板兼容性：当前PiP模板可能对自定义控制组的支持有限，部分控制组需要特定模板或版本支持。建议检查文档中关于PiPTemplateType的详细说明，确认VIDEO_PLAY是否完全支持该控制组。

  2. 事件处理未绑定：确保在onActionEvent中正确处理了FAST_FORWARD和FAST_BACKWARD事件，否则系统可能默认隐藏未实现功能的控件。

  3. 布局或样式冲突：画中画窗口的尺寸可能较小，系统自动隐藏了部分控件以适配布局。尝试调整PiP窗口的初始大小或检查是否有样式覆盖。

  4. API版本差异：确认使用的HarmonyOS SDK版本是否支持该功能。部分控制组可能在较新的API中才完全生效。

建议优先验证事件回调是否被正确触发，并参考官方示例检查配置细节。

回到顶部