鸿蒙5.0版开发：UI界面-@ohos.PiPWindow (画中画窗口)

最新推荐文章于 2025-05-29 17:00:18 发布
原创 最新推荐文章于 2025-05-29 17:00:18 发布 · 1.2k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #前端 #ArkTS #UI

往期鸿蒙全套实战文章必看：

@ohos.PiPWindow (画中画窗口)

该模块提供画中画基础功能，包括判断当前系统是否开启画中画功能，以及创建画中画控制器用于启动、停止画中画等。主要用于视频播放、视频通话或视频会议场景下，以小窗（画中画）模式呈现内容。

说明：

本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

需要在支持SystemCapability.Window.SessionManager能力的系统上使用该模块。

导入模块

import { PiPWindow } from '@kit.ArkUI';

PiPWindow.isPiPEnabled

isPiPEnabled(): boolean

用于判断当前系统是否支持画中画功能。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

返回值：

类型说明
boolean当前系统是否开启画中画功能。true表示支持，false则表示不支持。

示例：

let enable: boolean = PiPWindow.isPiPEnabled();
console.info('isPipEnabled:' + enable);

PiPWindow.create

create(config: PiPConfiguration): Promise<PiPController>

创建画中画控制器，使用Promise异步回调。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
configPiPConfiguration是创建画中画控制器的参数。该参数不能为空，并且构造该参数的context和componentController不能为空。构造该参数时，如果指定了templateType，需保证templateType是PiPTemplateType类型；如果指定了controlGroups，需保证controlGroups与templateType匹配。

返回值：

类型说明
Promise<PiPController>Promise对象。返回当前创建的画中画控制器。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
401Params error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. 3.Parameter verification failed.
801Capability not supported.Failed to call the API due to limited device capabilities.

示例：

import { BusinessError } from '@kit.BasicServicesKit';
import { BuilderNode, FrameNode, NodeController, Size, UIContext } from '@kit.ArkUI';

class Params {
  text: string = '';
  constructor(text: string) {
    this.text = text;
  }
}

// 开发者可以通过@Builder装饰器实现布局构建
@Builder
function buildText(params: Params) {
  Column() {
    Text(params.text)
      .fontSize(20)
      .fontColor(Color.Red)
  }
  .width('100%') // 宽度方向充满画中画窗口
  .height('100%') // 高度方向充满画中画窗口
}

// 开发者可通过继承NodeController实现自定义UI控制器
class TextNodeController extends NodeController {
  private message: string;
  private textNode: BuilderNode<[Params]> | null = null;
  constructor(message: string) {
    super();
    this.message = message;
  }

  // 通过BuilderNode加载自定义布局
  makeNode(context: UIContext): FrameNode | null {
    this.textNode = new BuilderNode(context);
    this.textNode.build(wrapBuilder<[Params]>(buildText), new Params(this.message));
    return this.textNode.getFrameNode();
  }

  // 开发者可自定义该方法实现布局更新
  update(message: string) {
    console.log(`update message: ${message}`);
    if (this.textNode !== null) {
      this.textNode.update(new Params(message));
    }
  }
}

let pipController: PiPWindow.PiPController | undefined = undefined;
let mXComponentController: XComponentController = new XComponentController(); // 开发者应使用该mXComponentController初始化XComponent: XComponent( {id: 'video', type: 'surface', controller: mXComponentController} )，保证XComponent的内容可以被迁移到画中画窗口。
let nodeController: TextNodeController = new TextNodeController('this is custom UI');
let navId: string = "page_1"; // 假设当前页面的导航id为page_1，详见PiPConfiguration定义，具体导航名称由开发者自行定义。
let contentWidth: number = 800; // 假设当前内容宽度800px。
let contentHeight: number = 600; // 假设当前内容高度600px。
let config: PiPWindow.PiPConfiguration = {
  context: getContext(this),
  componentController: mXComponentController,
  navigationId: navId,
  templateType: PiPWindow.PiPTemplateType.VIDEO_PLAY,
  contentWidth: contentWidth,
  contentHeight: contentHeight,
  controlGroups: [PiPWindow.VideoPlayControlGroup.VIDEO_PREVIOUS_NEXT],
  customUIController: nodeController, // 可选，如果需要在画中画显示内容上方展示自定义UI，可设置该参数。
};

let promise : Promise<PiPWindow.PiPController> = PiPWindow.create(config);
promise.then((data : PiPWindow.PiPController) => {
  pipController = data;
  console.info(`Succeeded in creating pip controller. Data:${data}`);
}).catch((err: BusinessError) => {
  console.error(`Failed to create pip controller. Cause:${err.code}, message:${err.message}`);
});

PiPWindow.create12+

create(config: PiPConfiguration, contentNode: typeNode.XComponent): Promise<PiPController>

通过typeNode创建画中画控制器，使用Promise异步回调。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
configPiPConfiguration是创建画中画控制器的参数。该参数不能为空，并且构造该参数的context不能为空。构造该参数时，如果指定了templateType，需保证templateType是PiPTemplateType类型；如果指定了controlGroups，需保证controlGroups与templateType匹配
。
contentNodetypeNode.XComponent是用于渲染画中画窗口中的内容。该参数不能为空。

返回值：

类型说明
Promise<PiPController>Promise对象。返回当前创建的画中画控制器。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
401Params error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types. 3.Parameter verification failed.
801Capability not supported.Failed to call the API due to limited device capabilities.

示例：

import { BusinessError } from '@kit.BasicServicesKit';
import { PiPWindow, UIContext } from '@kit.ArkUI';
import { typeNode } from '@ohos.arkui.node';

let pipController: PiPWindow.PiPController | undefined = undefined;
let xComponentController: XComponentController = new XComponentController();
let context: UIContext | undefined = undefined; // 可传入UIContext或在布局中通过this.getUIContext()为context赋有效值
let xComponent = typeNode.createNode(context, 'XComponent');
xComponent.initialize({
  id:'xcomponent',
  type:XComponentType.SURFACE,
  controller:xComponentController
});
let contentWidth: number = 800; // 假设当前内容宽度800px。
let contentHeight: number = 600; // 假设当前内容高度600px。
let config: PiPWindow.PiPConfiguration = {
  context: getContext(this),
  componentController: xComponentController,
  templateType: PiPWindow.PiPTemplateType.VIDEO_PLAY,
  contentWidth: contentWidth,
  contentHeight: contentHeight
};

let promise : Promise<PiPWindow.PiPController> = PiPWindow.create(config, xComponent);
promise.then((data : PiPWindow.PiPController) => {
  pipController = data;
  console.info(`Succeeded in creating pip controller. Data:${data}`);
}).catch((err: BusinessError) => {
  console.error(`Failed to create pip controller. Cause:${err.code}, message:${err.message}`);
});

PiPConfiguration

创建画中画控制器时的参数。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

名称类型必填说明
contextBaseContext是表示上下文环境。
componentControllerXComponentController是表示原始XComponent控制器。
navigationIdstring否当前page导航id。
1、UIAbility使用Navigation管理页面，需要设置Navigation控件的id属性，并将该id设置给画中画控制器，确保还原场景下能够从画中画窗口恢复到原页面。
2、UIAbility使用Router管理页面时，无需设置navigationId。
3、UIAbility只有单页面时，无需设置navigationId，还原场景下也能够从画中画窗口恢复到原页面。
templateTypePiPTemplateType否模板类型，用以区分视频播放、视频通话或视频会议。
contentWidthnumber否原始内容宽度，单位为px。用于确定画中画窗口比例。当使用typeNode的方式创建PiPController时，不传值则默认为1920。当不使用typeNode的方式创建PiPController时，不传值则默认为XComponent组件的宽度。
contentHeightnumber否原始内容高度，单位为px。用于确定画中画窗口比例。用于确定画中画窗口比例。当使用typeNode的方式创建PiPController时，不传值则默认为1080。当不使用typeNode的方式创建PiPController时，不传值则默认为XComponent组件的高度。
controlGroups12+Array<PiPControlGroup>否画中画控制面板的可选控件组列表，应用可以对此进行配置以决定是否显示。如果应用没有配置，面板将显示基础控件（如视频播放控件组的播放/暂停控件）；如果应用选择配置，则最多可以选择三个控件。从API version 12开始支持此参数。
customUIController12+NodeController否用于实现在画中画界面内容上方展示自定义UI功能。从API version 12开始支持此参数。

PiPTemplateType

画中画媒体类型枚举。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

名称值说明
VIDEO_PLAY0表示将要切换为画中画播放的媒体类型是视频，系统依此加载视频播放模板。
VIDEO_CALL1表示将要切换为画中画播放的媒体类型是视频通话，系统依此加载视频通话模板。
VIDEO_MEETING2表示将要切换为画中画播放的媒体类型是视频会议，系统依此加载视频会议模板。
VIDEO_LIVE3表示将要切换为画中画播放的媒体类型是直播，系统依此加载直播模板。

PiPState

画中画生命周期状态枚举。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

名称值说明
ABOUT_TO_START1表示画中画将要启动。
STARTED2表示画中画已经启动。
ABOUT_TO_STOP3表示画中画将要停止。
STOPPED4表示画中画已经停止。
ABOUT_TO_RESTORE5表示画中画将从小窗播放恢复到原始播放界面。
ERROR6表示画中画生命周期执行过程出现了异常。

PiPControlGroup12+

type PiPControlGroup = VideoPlayControlGroup | VideoCallControlGroup | VideoMeetingControlGroup | VideoLiveControlGroup

画中画控制面板的可选控件组列表，应用可以配置是否显示可选控件。默认情况下控制面板只显示基础控件（如视频播放控件组的播放/暂停控件）。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

类型说明
VideoPlayControlGroup视频播放控件组。
VideoCallControlGroup视频通话控件组。
VideoMeetingControlGroup视频会议控件组。
VideoLiveControlGroup视频直播控件组。

VideoPlayControlGroup12+

视频播放控件组枚举。仅当PiPTemplateType为VIDEO_PLAY时使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

名称值说明
VIDEO_PREVIOUS_NEXT101视频上一个/下一个控件组。
与视频快进/后退控件组为互斥控件组。如添加视频快进/后退控件组，则不可添加该控件组。
FAST_FORWARD_BACKWARD102视频快进/后退控件组。
与视频上一个/下一个控件组为互斥控件组。如添加视频上一个/下一个控件组，则不可添加该控件组。

VideoCallControlGroup12+

视频通话控件组枚举。仅当PiPTemplateType 为VIDEO_CALL时使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

名称值说明
MICROPHONE_SWITCH201打开/关闭麦克风控件组。
HANG_UP_BUTTON202挂断控件组。
CAMERA_SWITCH203打开/关闭摄像头控件组。
MUTE_SWITCH204静音控件组。

VideoMeetingControlGroup12+

视频会议控件组枚举。仅当PiPTemplateType 为VIDEO_MEETING时使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

名称值说明
HANG_UP_BUTTON301挂断控件组。
CAMERA_SWITCH302打开/关闭摄像头控件组。
MUTE_SWITCH303静音控件组。
MICROPHONE_SWITCH304打开/关闭麦克风控件组。

VideoLiveControlGroup12+

视频直播控件组枚举。仅当PiPTemplateType 为VIDEO_LIVE时使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

名称值说明
VIDEO_PLAY_PAUSE401播放/暂停直播控件组
MUTE_SWITCH402静音控件组。

PiPActionEventType

type PiPActionEventType = PiPVideoActionEvent | PiPCallActionEvent | PiPMeetingActionEvent | PiPLiveActionEvent

画中画控制面板控件动作事件类型，支持以下四种。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

类型说明
PiPVideoActionEvent视频播放控制面板控件事件类型。
PiPCallActionEvent视频通话控制面板控件事件类型。
PiPMeetingActionEvent视频会议控制面板控件事件类型。
PiPLiveActionEvent直播控制面板控件事件类型。

PiPVideoActionEvent

type PiPVideoActionEvent = ‘playbackStateChanged’ | ‘nextVideo’ | ‘previousVideo’ | ‘fastForward’ | ‘fastBackward’

视频播放控制事件类型。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

类型说明
‘playbackStateChanged’播放状态发生了变化。
‘nextVideo’播放下一个视频。
‘previousVideo’播放上一个视频。
‘fastForward’12+视频进度快进。从API version 12 开始支持。
‘fastBackward’12+视频进度后退。从API version 12 开始支持。

PiPCallActionEvent

type PiPCallActionEvent = ‘hangUp’ | ‘micStateChanged’ | ‘videoStateChanged’ | ‘voiceStateChanged’

视频通话控制事件类型。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

类型说明
‘hangUp’挂断视频通话。
‘micStateChanged’打开或关闭麦克风。
‘videoStateChanged’打开或关闭摄像头。
‘voiceStateChanged’12+静音或解除静音。

PiPMeetingActionEvent

type PiPMeetingActionEvent = ‘hangUp’ | ‘voiceStateChanged’ | ‘videoStateChanged’ | ‘micStateChanged’

视频会议控制事件类型。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

类型说明
‘hangUp’挂断视频会议。
‘voiceStateChanged’静音或解除静音。
‘videoStateChanged’打开或关闭摄像头。
‘micStateChanged’12+打开或关闭麦克风。

PiPLiveActionEvent

type PiPLiveActionEvent = ‘playbackStateChanged’ | ‘voiceStateChanged’

直播控制事件类型。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

类型说明
‘playbackStateChanged’播放或暂停直播。
‘voiceStateChanged’12+静音或解除静音。

PiPControlStatus12+

控制面板控件状态枚举。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

名称值说明
PLAY1播放。
PAUSE0暂停。
OPEN1打开。
CLOSE0关闭。

PiPControlType12+

控制面板控件类型枚举。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

名称值说明
VIDEO_PLAY_PAUSE0播放/暂停控件。
VIDEO_PREVIOUS1视频上一个控件。
VIDEO_NEXT2视频下一个控件。
FAST_FORWARD3视频快进控件
FAST_BACKWARD4视频快退控件。
HANG_UP_BUTTON5挂断控件。
MICROPHONE_SWITCH6打开/关闭麦克风控件。
CAMERA_SWITCH7打开/关闭摄像头控件。
MUTE_SWITCH8打开/关闭静音控件。

ControlPanelActionEventCallback12+

type ControlPanelActionEventCallback = (event: PiPActionEventType, status?: number) => void

描述画中画控制面板控件动作事件回调。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
eventPiPActionEventType是回调画中画控制面板控件动作事件类型。
应用依据控件动作事件做相应处理，如触发’playbackStateChanged’事件时，需要开始或停止视频。
statusnumber否表示可切换状态的控件当前的状态，如具备打开和关闭两种状态的麦克风控件组、摄像头控件组和静音控件组，打开为1，关闭为0。其余控件该参数返回默认值-1。

ControlEventParam12+

画中画控制面板控件动作回调的参数。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

名称类型必填说明
controlTypePiPControlType是回调画中画控制面板控件动作事件类型。应用依据控件类型做相应处理，如视频模板中暂停/播放控件被点击时，需要开始或停止视频。
statusPiPControlStatus否表示可切换状态的控件当前的状态，如具备打开和关闭两种状态的麦克风控件组、摄像头控件组和静音控件组，打开为PiPControlStatus.PLAY，关闭为PiPControlStatus.PAUSE。如不具备开/关和播放/暂停状态的挂断控件默认返回值为-1。

PiPController

画中画控制器实例。用于启动、停止画中画以及更新回调注册等。

下列API示例中都需先使用PiPWindow.create()方法获取到PiPController实例，再通过此实例调用对应方法。

系统能力： SystemCapability.Window.SessionManager

startPiP

startPiP(): Promise<void>

启动画中画，使用Promise异步回调。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

返回值：

类型说明
Promise<void>无返回结果的Promise对象。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
1300012The PiP window state is abnormal.
1300013Failed to create the PiP window.
1300014PiP internal error.
1300015Repeated PiP operation.

示例：

let promise : Promise<void> = pipController.startPiP();
promise.then(() => {
  console.info(`Succeeded in starting pip.`);
}).catch((err: BusinessError) => {
  console.error(`Failed to start pip. Cause:${err.code}, message:${err.message}`);
});

stopPiP

stopPiP(): Promise<void>

停止画中画，使用Promise异步回调。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

返回值：

类型说明
Promise<void>无返回结果的Promise对象。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
1300011Failed to destroy the PiP window.
1300012The PiP window state is abnormal.
1300015Repeated PiP operation.

示例：

let promise : Promise<void> = pipController.stopPiP();
promise.then(() => {
  console.info(`Succeeded in stopping pip.`);
}).catch((err: BusinessError) => {
  console.error(`Failed to stop pip. Cause:${err.code}, message:${err.message}`);
});

setAutoStartEnabled

setAutoStartEnabled(enable: boolean): void

设置是否需要在返回桌面时自动启动画中画。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
enableboolean是如返回桌面时需自动启动画中画，则该参数配置为true，否则为false。若设置中自动启动画中画开关为关闭状态，就算该参数配置为true，应用返回桌面时也不会自动启动画中画窗口。

示例：

let enable: boolean = true;
pipController.setAutoStartEnabled(enable);

updateContentSize

updateContentSize(width: number, height: number): void

当媒体源切换时，向画中画控制器更新媒体源尺寸信息。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
widthnumber是表示媒体内容宽度，必须为大于0的数字，单位为px。用于更新画中画窗口比例。
heightnumber是表示媒体内容高度，必须为大于0的数字，单位为px。用于更新画中画窗口比例。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
401Params error. Possible causes: 1.Mandatory parameters are left unspecified. 2.Incorrect parameter types.

示例：

let width: number = 540; // 假设当前内容宽度变为540px。
let height: number = 960; // 假设当前内容高度变为960px。
pipController.updateContentSize(width, height);

updatePiPControlStatus12+

updatePiPControlStatus(controlType: PiPControlType, status: PiPControlStatus): void

更新控制面板控件功能状态。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
controlTypePiPControlType是表示画中画控制面板控件类型。目前仅支持VIDEO_PLAY_PAUSE、MICROPHONE_SWITCH、CAMERA_SWITCH和MUTE_SWITCH这几种控件类型，传入其他控件类型无效。
statusPiPControlStatus是表示画中画控制面板控件状态。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
401Params error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3. Parameter verification failed

示例：

let controlType: PiPWindow.PiPControlType = PiPWindow.PiPControlType.VIDEO_PLAY_PAUSE; // 视频播放控制面板中播放/暂停控件。
let status: PiPWindow.PiPControlStatus = PiPWindow.PiPControlStatus.PLAY; // 视频播放控制面板中播放/暂停控件为播放状态。
pipController.updatePiPControlStatus(controlType, status);

setPiPControlEnabled12+

setPiPControlEnabled(controlType: PiPControlType, enabled: boolean): void

更新控制面板控件使能状态。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
controlTypePiPControlType是表示画中画控制面板控件类型。
enabledboolean是表示画中画控制面板控件使能状态。true表示控件为可使用状态，false则为禁用状态。

错误码：

以下错误码的详细介绍。

错误码ID错误信息
401Params error. Possible causes: 1. Mandatory parameters are left unspecified. 2. Incorrect parameter types. 3. Parameter verification failed

示例：

let controlType: PiPWindow.PiPControlType = PiPWindow.PiPControlType.VIDEO_PLAY_PAUSE; // 视频播放控制面板中播放/暂停控件。
let enabled: boolean = false; // 视频播放控制面板中播放/暂停控件为禁用状态。
pipController.setPiPControlEnabled(controlType, enabled);

on(‘stateChange’)

on(type: ‘stateChange’, callback: (state: PiPState, reason: string) => void): void

开启画中画生命周期状态的监听。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
typestring是监听事件，固定为’stateChange’，即画中画生命周期状态变化事件。
callbackfunction是回调生命周期状态变化事件以及原因：
state：PiPState，表示当前画中画生命周期状态；
reason：string，表示当前生命周期的切换原因。

示例：

pipController.on('stateChange', (state: PiPWindow.PiPState, reason: string) => {
  let curState: string = '';
  switch (state) {
    case PiPWindow.PiPState.ABOUT_TO_START:
      curState = 'ABOUT_TO_START';
      break;
    case PiPWindow.PiPState.STARTED:
      curState = 'STARTED';
      break;
    case PiPWindow.PiPState.ABOUT_TO_STOP:
      curState = 'ABOUT_TO_STOP';
      break;
    case PiPWindow.PiPState.STOPPED:
      curState = 'STOPPED';
      break;
    case PiPWindow.PiPState.ABOUT_TO_RESTORE:  
      curState = 'ABOUT_TO_RESTORE';
      break;
    case PiPWindow.PiPState.ERROR:
      curState = 'ERROR';
      break;
    default:
      break;
  }
  console.info('stateChange:' + curState + ' reason:' + reason);
});

off(‘stateChange’)

off(type: ‘stateChange’): void

关闭画中画生命周期状态的监听。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
typestring是监听事件，固定为’stateChange’，即画中画生命周期状态变化事件。

示例：

pipController.off('stateChange');

on(‘controlPanelActionEvent’)

on(type: ‘controlPanelActionEvent’, callback: ControlPanelActionEventCallback): void

开启画中画控制面板控件动作事件的监听。推荐使用on(‘controlEvent’)来开启画中画控制面板控件动作事件的监听。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
typestring是监听事件，固定为’controlPanelActionEvent’，即画中画控制面板控件动作事件。
callbackControlPanelActionEventCallback是描述画中画控制面板控件动作事件回调。

示例：

pipController.on('controlPanelActionEvent', (event: PiPWindow.PiPActionEventType, status?: number) => {
  switch (event) {
    case 'playbackStateChanged':
      if (status === 0) {
        //停止视频
      } else if (status === 1) {
        //播放视频
      }
      break;
    case 'nextVideo':
      // 切换到下一个视频
      break;
    case 'previousVideo':
      // 切换到上一个视频
      break;
    case 'fastForward':
      // 视频进度快进
      break;
    case 'fastBackward':
      // 视频进度后退
      break;
    default:
      break;
  }
  console.info('registerActionEventCallback, event:' + event);
});

on(‘controlEvent’)12+

on(type: ‘controlEvent’, callback: Callback<ControlEventParam>): void

开启画中画控制面板控件动作事件的监听。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
typestring是监听事件，固定为’controlEvent’，即画中画控制面板控件动作事件。
callbackCallback<ControlEventParam>是描述画中画控制面板控件动作事件回调。

示例：

pipController.on('controlEvent', (control) => {
  switch (control.controlType) {
    case PiPWindow.PiPControlType.VIDEO_PLAY_PAUSE:
      if (control.status === PiPWindow.PiPControlStatus.PAUSE) {
        //停止视频
      } else if (control.status === PiPWindow.PiPControlStatus.PLAY) {
        //播放视频
      }
      break;
    case PiPWindow.PiPControlType.VIDEO_NEXT:
      // 切换到下一个视频
      break;
    case PiPWindow.PiPControlType.VIDEO_PREVIOUS:
      // 切换到上一个视频
      break;
    case PiPWindow.PiPControlType.FAST_FORWARD:
      // 视频进度快进
      break;
    case PiPWindow.PiPControlType.FAST_BACKWARD:
      // 视频进度后退
      break;
    default:
      break;
  }
  console.info('registerControlEventCallback, controlType:' + control.controlType + ', status' + control.status);
});

off(‘controlPanelActionEvent’)

off(type: ‘controlPanelActionEvent’): void

关闭画中画控制面板控件动作事件的监听。推荐使用off(‘controlEvent’)来关闭画中画控制面板控件动作事件的监听。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
typestring是监听事件，固定为’controlPanelActionEvent’，即画中画控制面板控件动作事件。

示例：

pipController.off('controlPanelActionEvent');

off(‘controlEvent’)12+

off(type: ‘controlEvent’, callback?: Callback<ControlEventParam>): void

关闭画中画控制面板控件动作事件的监听。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.Window.SessionManager

参数：

参数名类型必填说明
typestring是监听事件，固定为’controlEvent’，即画中画控制面板控件动作事件。
callbackCallback<ControlEventParam>否描述画中画控制面板控件动作事件回调。如果不传该参数时，解除type为’controlEvent’的所有回调。

示例：

pipController.off('controlEvent', () => {});

HarmonyOS Next开发学习手册——画中画功能
maniuT的博客
07-21 1511
应用在视频播放、视频会议、视频通话等场景下，可以使用画中画能力将视频内容以小窗（画中画）模式呈现。切换为小窗（画中画）模式后，用户可以进行其他界面操作，提升使用体验。视频播放。视频通话。视频会议。直播。
鸿蒙NEXT版实战开发：使用XComponent实现画中画功能开发
qq_39652397的博客
09-30 772
本文以视频播放为例，介绍通过XComponent实现画中画功能的基本开发步骤。
鸿蒙0基础学习【画中画开发】ArkUI
最新发布
zhenggaoxiao232的博客
05-29 569
本文介绍了画中画(PiP)功能的开发应用场景、实现方式及接口说明。画中画适用于视频播放、通话、会议和直播场景，提供XComponent和typeNode两种开发方式。系统提供了创建控制器、启动/停止画中画、设置自动启动等核心接口，并详细说明了画中画窗口的交互方式（单击/双击/拖动）和控制层的功能配置。针对不同使用场景，开发者可以自定义控制层按钮，文章通过示意图展示了各场景下的控制层配置选项。注意事项包括系统能力要求及后台启动限制，建议使用自动启动功能处理后台启动需求。
【鸿蒙实战开发】基于子窗口实现应用内悬浮窗
HarmonyOSMN的博客
06-28 1419
app应用会使用悬浮窗/悬浮球的方式来给用户展示一些应用重要&便捷功能的入口，类似android和iOS应用中常见的应用内可拖拽的悬浮球和小窗口视频悬浮窗，点击悬浮窗修改悬浮窗样式和响应事件跳转页面，在跳转页面后依然可以显示在屏幕中上个页面拖拽后的固定位置等。：通过事件添加和移除悬浮窗，悬浮窗样式可定制（暂定两种，无白边圆球形和小视频播放窗口类型），可代码修改位置和布局。：创建悬浮窗后，主窗口的系统侧滑返回事件可正常使用。
基于子窗口实现应用内悬浮窗
hongxiaomeng的博客
05-09 749
鸿蒙5.0开发进阶：视频悬浮窗实现案例
HSMMQAQ的博客
11-12 790
本示例主要介绍视频小窗口播放场景...........
【鸿蒙实战开发】—— 画中画功能
2401_88547687的博客
11-13 767
应用在视频播放、视频会议、视频通话等场景下，可以使用画中画能力将视频内容以小窗（画中画）模式呈现。切换为小窗（画中画）模式后，用户可以进行其他界面操作，提升使用体验。视频播放。视频通话。视频会议。直播。
【HarmonyOS实战开发】在应用程序中使用画中画功能
HarmonyOS007的博客
08-16 1363
应用在视频播放、视频会议、视频通话等场景下，可以使用画中画能力将视频内容以小窗（画中画）模式呈现。切换为小窗（画中画）模式后，用户可以进行其他界面操作，提升使用体验。
【HarmonyOS NEXT】codelab汇总-应用框架
qq_45789342的博客
08-12 885
介绍：描述了应用运行过程中UIAbility和自定义组件的生命周期。对于UIAbility，描述了Create、Foreground、Background、Destroy四种生命周期。对于自定义组件描述了aboutToAppear、onPageShow、onPageHide、onBackPress、aboutToDisappear五种生命周期。相关知识：UIAbility总结：通过此Codelab，可了解到以下知识点：UIAbility生命周期。自定义组件生命周期。详情地址介绍。
鸿蒙NEXT版实战开发：使用typeNode实现画中画功能开发
qq_39652397的博客
09-30 1187
本文以视频播放为例，介绍通过typeNode实现画中画功能的基本开发步骤。
鸿蒙开发基础 —— 视频画中画效果开发
guangxishaoji的博客
03-24 751
应用在视频播放、视频会议、视频通话等场景下，可以使用画中画能力将视频内容以小窗（画中画）模式呈现。切换为小窗（画中画）模式后，用户可以进行其他界面操作，提升使用体验。视频播放。视频通话。视频会议。直播。使用XComponent实现画中画功能开发：适用于应用通过Navigation管理页面或Ability单页面情况下使用画中画的场景，这种实现方式无需应用管理页面。
鸿蒙开发入门：module对象内部结构
Android23333的博客
12-20 1352
这里整理了一份《鸿蒙零基础入门学习指南》，希望能对那些想要学习鸿蒙，但是有没有方向的人提供一点帮助。本文档适用于HarmonyOS应用开发的初学者（由于文档内容过多，因此为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的看文末有免费的获取方式！
OpenHarmony实战开发-如何实现自定义绘制 (XComponent)
m0_70749039的博客
04-27 2316
XComponent组件作为一种绘制组件，通常用于满足开发者较为复杂的自定义绘制需求，例如相机预览流的显示和游戏画面的绘制。
鸿蒙UI开发——全局自定义弹窗实现
harmonyClassRoom的博客
12-25 2341
在使用弹窗前，我们需要创建ComponentContent对象，ComponentContent用于定义自定义弹窗的内容。创建一个ComponentContent对象的实例代码如下(核心代码 23 ~ 24行)：​​​​​。
【HarmonyOS NEXT】示例代码-画中画效果实现
qq_45789342的博客
10-24 406
本示例通过@kit.ArkUI、@kit.MediaKit等接口，实现了视频播放、手动和自动拉起画中画、画中画窗口控制视频播放和暂停等功能。
HarmonyOS NEXT 鸿蒙ArkTS 视频相关 视频播放、直播视频、XComponent和typeNode多方案实现画中画功能开发
2401_89195834的博客
04-02 1839
setCurrentTime(value: number, seekMode: SeekMode) 指定视频播放的进度位置，并指定跳转模式。显示当前帧，再次播放时从头开始播放。说明：number取值仅支持：0.75，1.0，1.25，1.75，2.0。setCurrentTime(value: number) 指定视频播放的进度位置。pause() 暂停播放，显示当前帧，再次播放时从当前位置继续播放。stop() 停止播放，显示当前帧，再次播放时从头开始播放。：设置视频控制器，可以控制视频的播放状态。
HarmonyOS Next 手写绘制及保存图片案例
shudaoshanQAQ的博客
03-25 1214
本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能，并通过image库的packToFile和packing接口将手写板的绘制内容保存为图片。
鸿蒙开发-开发基础知识1（二）
江小白的博客
12-08 5366
应用基础知识 APP Ability 库文件 资源文件 配置文件 pack.info 1、APP HarmonyOS的应用软件包以APPPack（Application Package）形式发布，它是由一个或多个HAP（HarmonyOS Ability Package）以及描述每个HAP属性的pack.info组成。HAP是Ability的部署包，HarmonyOS应用代码围绕Ability组件展开。 一个HAP是由代码、资源、第三方库及应用配置文件组成的模块包，可分为entry和fe.
鸿蒙智慧屏缺点,华为智慧屏S值得买吗？这个劣势很少人说，大家一定要看仔细了...
weixin_42164702的博客
05-30 1067
今年华为智慧屏S系列的宣传语是“十年不过时”，因为智能大屏领域不似手机、或者可掌玩的数码设备，相对来说，它们更新换代的频率更低。所以，此次华为智慧屏S系列的定位，还是相当精准的。不过，华为智慧屏S系列是否能做到“十年不过时”，产品有哪些优缺点？一起来看看吧~创新力——磁吸式摄像头扫了一眼新品发布的报道，全篇让我印象深刻的有两点，其中有一个就是摄像头的设计。对于家庭来说，安全和隐私是更古不变的话题，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值