【鸿蒙开发示例代码】画中画效果实现

示例代码合集地址：

HarmonyOS示例代码-鸿蒙系统示例代码-华为开发者联盟 (huawei.com)

代码工程地址：

WindowPiP: 本示例通过@kit.ArkUI、@kit.MediaKit等接口，实现了视频播放、手动和自动拉起画中画、画中画窗口控制视频播放和暂停等功能。 (gitee.com)

画中画效果实现

介绍

本示例通过@kit.ArkUI、@kit.MediaKit等接口，实现了视频播放、手动和自动拉起画中画、画中画窗口控制视频播放和暂停等功能。

效果预览

使用说明

1. 在主界面，可以点击对应视频按钮进入视频播放页面；
2. 视频播放页面点击开启，应用拉起画中画，点击关闭，关闭画中画；
3. 视频播放页面点击自动开启画中画，在返回桌面时会自动拉起画中画；
4. 视频播放页面会显示一些回调信息。

工程目录

├──entry/src/main/ets                        // 代码区
│  ├──constants
│  │  └──Constants.ets                       // 常量类
│  ├──entryability
│  │  └──EntryAbility.ets       
│  ├──pages
│  │  ├──AVPlayer.ets                        // 视频播放
│  │  ├──Index.ets                           // 首页
│  │  └──VideoPlay.ets                       // 视频播放页面
│  └──utils
│     └──Logger.ets                          // 日志工具类
└──entry/src/main/resources                  // 应用资源目录

具体实现

• 整个示例用Navigation构建页面，主页面放置五个可点击视频框，点击之后进入视频播放页面。
• 进入视频播放页面后，有三块区域，最上方的XComponent，中间的画中画控制按钮以及下方的回调信息显示框。
• 点击开启后，应用手动拉起画中画，视频在画中画播放，返回桌面视频依旧画中画播放；点击关闭后，画中画播放的视频返回XComponent播放，同时返回桌面不会拉起画中画。
• 点击自动拉起画中画后，返回桌面时应用自动拉起画中画，视频画中画播放。
• 在播放页面进行画中画播放时，XComponent框会提示当前视频正在以画中画播放。
• 回调信息显示框会显示当前状态，错误原因以及按钮事件和状态，参考：VideoPlay.ets。

相关权限

不涉及

依赖

不涉及

约束与限制

1. 本示例仅支持标准系统上运行，支持设备：华为手机。
2. HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。
3. DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。
4. HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。