画中画如何获取当前视频播放状态
===============

#### 问题现象

画中画播放视频时，会出现画中画中视频在播放，播放控件还是暂停的情况，画中画如何获取当前视频播放状态来手动修改播放控件？

问题现象图：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/be/v3/TMVgp-O4RrytUMo2JQwqLg/zh-cn_image_0000002629793342.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134016Z&HW-CC-Expire=86400&HW-CC-Sign=AF6DC9DC110425D2E7318A52D142E0602A6A6043895D3969B208628BBA09B83E "点击放大")

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5d/v3/e0VzyDMGQ3SrbKLduErxfw/zh-cn_image_0000002659952625.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134016Z&HW-CC-Expire=86400&HW-CC-Sign=94831CD3CCC3E0FA96B799B0C268BD15F7CBA8DE737652375006790D15FA226A "点击放大")

#### 背景知识

*   [on('stateChange')](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-pipwindow#onstatechange)：开启画中画生命周期状态的监听。
*   [AVPlayerState](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-media-t#avplayerstate9)：AVPlayer的状态机，可通过state属性主动获取当前视频播放、暂停等状态。
*   [updatePiPControlStatus](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-pipwindow#updatepipcontrolstatus12)：更新控制面板控件功能状态。

#### 解决方案

*   拉起画中画前，可以调用updatePiPControlStatus接口，更新播放控件状态，来保持视频状态和播放控件状态一致。
*   使用on('stateChange')监听画中画生命周期，在画中画启动状态STARTED生命周期中使用AVPlayerState获取当前视频的播放状态，根据当前视频的播放状态使用updatePiPControlStatus方法通过[PiPControlType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-pipwindow#pipcontroltype12)和[PiPControlStatus](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-pipwindow#pipcontrolstatus12)两个参数，分别设置当前画中画的控制面板控件类型和控制面板控件状态。

示例代码如下：

this.pipController.on('stateChange', (state: PiPWindow.PiPState, reason: string) => {
  switch (state) {
    case PiPWindow.PiPState.ABOUT\_TO\_START:
      this.curState = 'ABOUT\_TO\_START';
      this.curError = $r('app.string.current\_error\_hint');
      break;
    case PiPWindow.PiPState.STARTED:
      this.curState = 'STARTED';
      this.curError = $r('app.string.current\_error\_hint');
      if (this.player?.State == "playing") { _// 如果视频正在播放，设置视频播放控制面板中播放/暂停控件为播放状态_
        let controlType: PiPWindow.PiPControlType = PiPWindow.PiPControlType.VIDEO\_PLAY\_PAUSE;
        let status: PiPWindow.PiPControlStatus = PiPWindow.PiPControlStatus.PLAY;
        if (this.pipController != undefined) {
          this.pipController.updatePiPControlStatus(controlType, status);
        }
      } else if (this.player?.State == "paused") { _// 如果视频正在暂停，设置视频播放控制面板中播放/暂停控件为暂停状态_
        let controlType: PiPWindow.PiPControlType = PiPWindow.PiPControlType.VIDEO\_PLAY\_PAUSE;
        let status: PiPWindow.PiPControlStatus = PiPWindow.PiPControlStatus.PAUSE;
        if (this.pipController != undefined) {
          this.pipController.updatePiPControlStatus(controlType, status);
        }
      }
      break;
    case PiPWindow.PiPState.ABOUT\_TO\_STOP:
      this.curState = 'ABOUT\_TO\_STOP';
      this.curError = $r('app.string.current\_error\_hint');
      break;
    case PiPWindow.PiPState.STOPPED:
      this.player?.updatePlayStatus(true);
      this.player?.play();
      this.curState = 'STOPPED';
      this.curError = $r('app.string.current\_error\_hint');
      break;
    case PiPWindow.PiPState.ABOUT\_TO\_RESTORE:
      this.curState = 'ABOUT\_TO\_RESTORE';
      this.curError = $r('app.string.current\_error\_hint');
      break;
    case PiPWindow.PiPState.ERROR:
      this.curState = 'ERROR';
      this.curError = reason;
      break;
    default:
      break;
  }
  Logger.info(\`\[${TAG}\] onStateChange: ${this.curState}, reason: ${reason}\`);
});

详细代码，参考：[实现画中画效果](https://gitee.com/harmonyos_samples/window-pip/repository/archive/master.zip)。

#### 常见FAQ

Q：如何实现一个类似于语音通话时，缩小画中画可以全屏幕拖拽的效果，且点击不会出现任何按钮。

A：将[PiPConfiguration](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-pipwindow#pipconfiguration)的参数[PiPTemplateType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-pipwindow#piptemplatetype)设置成VIDEO\_MEETING（或者VIDEO\_CALL），且controlGroups: \[\]设置为空，可以实现点击不出现按钮，且能拖动。

Q：有A和B两个页面，从A页面进入B页面之后，在B页面进行视频通话功能，此时点击开启画中画会返回A页面，再次点击画中画，此时会重新进入B页面，进入B页面就会打断进行中的视频通话，导致视频通话功能异常，这个问题要怎么解决？

A：点击画中画小窗，进入B页面，相当于重新router.push，B页面的参数此时处于初始化状态，修改了进行中的视频通话状态，导致进行中的视频通话被打断，功能异常。

需要修改B页面的初始化参数，增加判断，如果此时处于视频通话中，则不进行视频通话状态参数初始化操作，反之则进行初始化操作。

Q：如何实现：在小窗播放时，切换视频通过原页面列表操作，保持小窗不关闭；切换为视频时显示快进快退按钮，切换为直播时则不显示。

A：画中画页面组件视频或直播通过这两个配置项去修改：

templateType: PiPWindow. PiPTemplateType. VIDEO\_LIVE _//_ _对于视频通话、视频会议等场景，需要设置相应的模板类型。_
controlGroups:PiPWindow.VideoLiveControlGroup.VIDEO\_PLAY\_PAUSE _//_ _对于视频通话、视频会议和视频直播；画中画控制面板的可选控件组列表，应用可以配置是否显示可选控件。_

实现方案：

1.  移除现有的画中画控制器。
2.  调整相关配置参数，重新创建新的画中画控制器。

Q：如何判断当前设备是否支持画中画功能？

A：可以使用[PiPWindow.isPiPEnabled](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-pipwindow#pipwindowispipenabled)判断当前设备是否支持画中画功能。