在鸿蒙应用中如何创建并启动画中画窗口？

Question

我正在开发一个视频播放应用，想在用户切换到其他应用时继续以小窗模式播放视频。鸿蒙提供了画中画窗口的API，但我不知道如何使用。能否给出一个完整的代码示例，展示如何创建并启动画中画窗口？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

给您一个代码示例：

import { PiPWindow } from '@ohos.multimedia.pipwindow';

// 假设你有一个视频播放页面
@Entry
@Component
struct VideoPlayer {
  private pipWindow?: PiPWindow;

  // ... 其他代码，如视频播放器逻辑

  // 方法用于创建并启动画中画窗口
  private async startPictureInPicture() {
    // 创建画中画窗口实例，需要传入视频播放的上下文
    this.pipWindow = await PiPWindow.create(this.context);

    // 配置画中画窗口的参数，如大小、位置等（这里使用默认配置）
    // 如果需要自定义，可以调用相应的设置方法

    // 启动画中画窗口
    await this.pipWindow.start();

    // 监听画中画窗口的事件，如关闭、大小变化等（可选）
    this.pipWindow.on('close', () => {
      console.log('画中画窗口已关闭');
      this.pipWindow = undefined;
    });
  }

  // ... 其他代码，如页面生命周期管理等

  // 假设你有一个按钮用于触发画中画
  @Builder buttonBuilder() {
    Button('启动画中画')
      .onClick(() => {
        this.startPictureInPicture();
      });
  }
}

在这个示例中，我们首先导入了PiPWindow模块。然后，在VideoPlayer组件中，我们定义了一个pipWindow变量来存储画中画窗口的实例。startPictureInPicture方法用于创建并启动画中画窗口。我们在这里调用了PiPWindow.create方法来创建画中画窗口的实例，并传入了视频播放的上下文（这里假设this.context是有效的上下文）。然后，我们调用了start方法来启动画中画窗口。

此外，我们还添加了一个按钮，当用户点击这个按钮时，会调用startPictureInPicture方法来启动画中画。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。