鸿蒙提供的画中画功能要怎么实现？

Question

画中画功能是个很常见的功能需求，要怎么具体实现呢？

Answer 1

以下是基于XComponent实现的画中画功能，以视频播放为例（单页面）

private xComponentController: XComponentController = new XComponentController();//XComponent控制器
private player = new videoPlay(this.surfaceId);//视频播放需要自行实现
private pipController?:PiPWindow.PiPController = undefined;//画中画控制器

核心实现：

XComponent({
  id: "videoPlayer",
  type: 'surface',
  controller: this.xComponentController
}).onLoad(() => {
  let sId = this.xComponentController.getXComponentSurfaceId();
  this.player.setSurfaceId(sId)
})


let config:PiPWindow.PiPConfiguration = {
  context:getContext(this),
  componentController:this.xComponentController,
  templateType:PiPWindow.PiPTemplateType.VIDEO_PLAY,
  contentWidth:400,
  contentHeight:240,
}

let pipPromise:Promise<PiPWindow.PiPController> = PiPWindow.create(config);
pipPromise.then((controller:PiPWindow.PiPController)=>{
  this.pipController = controller;
  this.pipController.startPiP().then(()=>{
    console.log(` test show 启动画中画成功`);
  }).catch((err:BusinessError)=>{
    console.log(` test show 启动画中画失败：${err.message}`)
  })
})