鸿蒙0基础学习【画中画开发】ArkUI-CSDN博客

场景介绍

应用在视频播放、视频会议、视频通话等场景下，可以使用画中画能力将视频内容以小窗（画中画）模式呈现。切换为小窗（画中画）模式后，用户可以进行其他界面操作，提升使用体验。

画中画的常见使用场景有以下几种：

视频播放。
视频通话。
视频会议。
直播。

系统提供以下两种画中画功能的开发方式：

[使用XComponent实现画中画功能开发]：适用于应用通过[Navigation]管理页面或Ability单页面情况下使用画中画的场景，这种实现方式无需应用管理页面。
[使用typeNode实现画中画功能开发]：适用于所有场景，这种实现方式灵活性高，需要应用自行管理页面，推荐通过该方式使用画中画功能。

约束与限制

需要在支持SystemCapability.Window.SessionManager能力的系统上使用该模块
基于安全考虑，应用处于后台时不允许通过startPiP启动画中画。针对应用返回后台时需要启动画中画的场景，建议使用setAutoStartEnabled(true)实现自动启动。

接口说明

以下是画中画功能的常用接口。

接口名	描述
isPiPEnabled(): boolean	判断当前系统是否开启画中画功能。
create(config: PiPConfiguration): Promise	创建画中画控制器。
create(config: PiPConfiguration, contentNode: typeNode.XComponent): Promise	使用typeNode创建画中画控制器。
startPiP(): Promise	启动画中画。
stopPiP(): Promise	停止画中画。
setAutoStartEnabled(enable: boolean): void	设置是否需要在返回桌面时自动启动画中画。
updateContentSize(width: number, height: number): void	当媒体源切换时，向画中画控制器更新媒体源尺寸信息。
on(type: ‘stateChange’, callback: (state: PiPState, reason: string) => void): void	开启画中画生命周期状态的监听。
off(type: ‘stateChange’): void	关闭画中画生命周期状态的监听。
on(type: ‘controlPanelActionEvent’, callback: ControlPanelActionEventCallback): void	开启画中画控制面板控件动作事件的监听。推荐使用on(‘controlEvent’)来开启画中画控制面板控件动作事件的监听。
off(type: ‘controlPanelActionEvent’): void	关闭画中画控制面板控件动作事件的监听。推荐使用off(‘controlEvent’)来关闭画中画控制面板控件动作事件的监听。
updatePiPControlStatus(controlType: PiPControlType, status: PiPControlStatus): void	更新画中画控制面板控件状态。
setPiPControlEnabled(controlType: PiPControlType, enabled: boolean): void	设置控制面板控件使能状态。
on(type: ‘controlEvent’, callback: CallBack): void	开启画中画控制面板控件动作事件的监听。
off(type: ‘controlEvent’, callback?: CallBack): void	关闭画中画控制面板控件动作事件的监听。

交互方式

画中画窗口提供以下交互方式：

单击画中画窗口：如果画中画控制层未显示，则显示画中画控制层，3秒后自动隐藏控制层；如果当前控制层已显示，则隐藏画中画控制层。
双击画中画窗口：放大或缩小画中画窗口。
拖动画中画窗口：可以将画中画窗口拖动到屏幕任意位置。如果将画中画窗口拖动到屏幕左右边缘，画中画窗口会自动隐藏；隐藏后在屏幕边缘显示画中画隐藏图标，点击该图标后画中画窗口恢复显示。

画中画控制层提供以下功能：

窗口控制：包括“关闭”和“恢复全屏窗口”功能。点按“关闭”按钮后，画中画窗口关闭；点按“恢复全屏窗口”按钮后，将从画中画窗口恢复到应用原始界面。
内容控制：内容控制区根据不同场景呈现不同，应用可根据实际场景需要进行设置，各场景控制层示意图如下所示。

图1 不同场景下画中画控制层的不同呈现
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

配置画中画控制层可选控件

在使用[create]接口创建画中画时，可通过在[PiPConfiguration]中新增[PiPControlGroup]类型的数组配置当前画中画控制层控件。

视频播放场景可通过配置[VideoPlayControlGroup]来显示可选的控制层控件。

图2 视频播放场景配置控制层可选控件
视频通话场景可通过配置[VideoCallControlGroup]来显示可选的控制层控件。示意图如下所示。

图3 视频通话场景配置控制层可选控件

若不配置，视频通话模版默认不存在任何按钮，点击画中画窗口即可启动还原（见下图左，未配置任何控件的操作示意图）。下图右为配置控件的操作示意图。
视频会议场景可通过配置[VideoMeetingControlGroup]来显示可选的控制层控件。示意图如下所示。若不配置，视频会议模版默认不存在任何按钮，点击画中画窗口即可启动还原（与视频通话模版操作示意图一致）。

图4 视频会议场景配置控制层可选控件
直播场景可通过配置[VideoLiveControlGroup]来显示可选的控制层控件。示意图如下所示。

图5 直播场景配置控制层可选控件