场景介绍
应用在视频播放、视频会议、视频通话等场景下,可以使用画中画能力将视频内容以小窗(画中画)模式呈现。切换为小窗(画中画)模式后,用户可以进行其他界面操作,提升使用体验。
画中画的常见使用场景有以下几种:
- 视频播放。
- 视频通话。
- 视频会议。
- 直播。
接口说明
以下是画中画功能的常用接口
接口名 |
描述 |
---|---|
isPiPEnabled(): boolean |
判断当前系统是否开启画中画功能。 |
create(config: PiPConfiguration): Promise<PiPController> |
创建画中画控制器。 |
startPiP(): Promise<void> |
启动画中画。 |
stopPiP(): Promise<void> |
停止画中画。 |
setAutoStartEnabled(enable: boolean): void |
设置是否需要在返回桌面时自动启动画中画。 |
updateContentSize(width: number, height: number): void |
当媒体源切换时,向画中画控制器更新媒体源尺寸信息。 |
on(type: 'stateChange', callback: (state: PiPState, reason: string) => void): void |
开启画中画控制面板控件动作事件的监听。推荐使用on('controlEvent')来开启画中画控制面板控件动作事件的监听。 |
off(type: 'stateChange'): void |
关闭画中画控制面板控件动作事件的监听。推荐使用off('controlEvent')来关闭画中画控制面板控件动作事件的监听。 |
on(type: 'controlPanelActionEvent', callback: ControlPanelActionEventCallback): void |
开启画中画控制事件的监听。 |
off(type: 'controlPanelActionEvent'): void |
关闭画中画控制事件的监听。 |
updatePiPControlStatus(controlType: PiPControlType, status: PiPControlStatus): void |
更新画中画控制面板控件状态。 |
setPiPControlEnabled(controlType: PiPControlType, enabled: boolean): void |
设置控制面板控件使能状态。 |
on(type: 'controlEvent', callback: CallBack<ControlEventParam>): void |
开启画中画控制面板控件动作事件的监听。 |
off(type: 'controlEvent', callback?: CallBack<ControlEventParam>): void |
关闭画中画控制面板控件动作事件的监听。 |
交互方式
画中画窗口提供以下交互方式:
- 单击画中画窗口:如果画中画控制层未显示,则显示画中画控制层,3秒后自动隐藏控制层;如果当前控制层已显示,则隐藏画中画控制层。
- 双击画中画窗口:放大或缩小画中画窗口。
- 拖动画中画窗口:可以将画中画窗口拖动到屏幕任意位置。如果将画中画窗口拖动到屏幕左右边缘,画中画窗口会自动隐藏;隐藏后在屏幕边缘显示画中画隐藏图标,点击该图标后画中画窗口恢复显示。
- 画中画控制层提供以下功能:
- 窗口控制:包括“关闭”和“恢复全屏窗口”功能。点按“关闭”按钮后,画中画窗口关闭;点按“恢复全屏窗口”按钮后,将从画中画窗口恢复到应用原始界面。
- 内容控制:内容控制区根据不同场景呈现不同,应用可根据实际场景需要进行设置,各场景控制层示意图如下所示。
图1 不同场景下画中画控制层的不同呈现
配置画中画控制层可选控件
在使用create接口创建画中画时,可通过在PiPConfiguration中新增PiPControlGroup类型的数组配置当前画中画控制层控件。
- 视频播放场景可通过配置VideoPlayControlGroup来显