【HarmonyOS实战开发】在应用程序中使用画中画功能

最新推荐文章于 2024-11-01 17:28:31 发布
最新推荐文章于 2024-11-01 17:28:31 发布
阅读量1.3k 收藏 16
点赞数 11
CC 4.0 BY-SA版权
分类专栏： 前端 安卓 鸿蒙 文章标签： harmonyos 华为 android 鸿蒙 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HarmonyOS007/article/details/141268338

场景介绍

应用在视频播放、视频会议、视频通话等场景下，可以使用画中画能力将视频内容以小窗（画中画）模式呈现。切换为小窗（画中画）模式后，用户可以进行其他界面操作，提升使用体验。

画中画的常见使用场景有以下几种：

  • 视频播放。
  • 视频通话。
  • 视频会议。
  • 直播。

约束与限制

  • 需要在支持SystemCapability.Window.SessionManager能力的系统上使用该模块，参考系统能力SystemCapability使用指南。
  • 仅支持以XComponent作为媒体流播放组件的界面进入画中画模式，XComponent的type必须为’surface’或者XComponentType.SURFACE。
  • UIAbility使用Navigation管理页面时，需要设置Navigation控件的id属性，并将该id传递给画中画控制器，确保还原时可以正常恢复原页面。
  • UIAbility使用页面路由router管理页面时（不推荐），启动画中画后，UIAbility不要切换到其他页面，否则还原时无法恢复到原页面。
  • 基于安全考虑，应用处于后台时不允许通过startPiP启动画中画。针对应用返回后台时需要启动画中画的场景，建议使用setAutoStartEnabled(true)实现自动启动。

接口说明

以下是画中画功能的常用接口，更多接口及使用参考@ohos.PiPWindow (画中画窗口)。

image.png
image.png

交互方式

画中画窗口提供以下交互方式：

  • 单击画中画窗口：如果画中画控制层未显示，则显示画中画控制层，3秒后自动隐藏控制层；如果当前控制层已显示，则隐藏画中画控制层。
  • 双击画中画窗口：放大或缩小画中画窗口。
  • 拖动画中画窗口：可以将画中画窗口拖动到屏幕任意位置。如果将画中画窗口拖动到屏幕左右边缘，画中画窗口会自动隐藏；隐藏后在屏幕边缘显示画中画隐藏图标，点击该图标后画中画窗口恢复显示。
  • 画中画控制层提供以下功能：
    • 窗口控制：包括“关闭”和“恢复全屏窗口”功能。点按“关闭”按钮后，画中画窗口关闭；点按“恢复全屏窗口”按钮后，将从画中画窗口恢复到应用原始界面。
    • 内容控制：内容控制区根据不同场景呈现不同，应用可根据实际场景需要进行设置，各场景控制层示意图如下所示。

图1不同场景下画中画控制层的不同呈现

image.png

配置画中画控制层可选控件

在使用create接口创建画中画时，可通过在PiPConfiguration中新增PiPControlGroup类型的数组配置当前画中画控制层控件。

  • 视频播放场景可通过配置VideoPlayControlGroup来显示可选的控制层控件。

    图2视频播放场景配置控制层可选控件
    image.png

  • 视频通话场景可通过配置VideoCallControlGroup来显示可选的控制层控件。示意图如下所示。

图3视频通话场景配置控制层可选控件
image.png

若不配置，视频通话模版默认不存在任何按钮，点击画中画窗口即可启动还原（见下图左，未配置任何控件的操作示意图）。下图右为配置控件的操作示意图。

0000000000011111111.20240816152759.18844601486413897794584965876687.gif

  • 视频会议场景可通过配置VideoMeetingControlGroup来显示可选的控制层控件。示意图如下所示。若不配置，视频会议模版默认不存在任何按钮，点击画中画窗口即可启动还原（与视频通话模版操作示意图一致）。

    图4视频会议场景配置控制层可选控件

image.png

直播场景可通过配置VideoLiveControlGroup来显示可选的控制层控件。示意图如下所示。

图5直播场景配置控制层可选控件
image.png

在画中画内容上方展示自定义UI

在使用create接口创建画中画时，可通过在PiPConfiguration中传入customUIController来显示自定义UI。注：自定义显示的UI无法响应交互事件。
图6在画中画内容上方显示自定义UI
image.png

最低0.47元/天 解锁文章
HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操作系统】
一键难忘的博客
12-27 3133
HarmonyOS NEXT是华为公司自研的操作系统，它是鸿蒙抛弃Linux内核及安卓开放源代码项目（AOSP）等代码的首个大版本，该系统仅支持鸿蒙内核和鸿蒙系统的应用，不再兼容安卓应用，因此被称为“纯血鸿蒙”。HarmonyOS NEXT采用了轻量化的设计理念，针对不同设备进行定制化开发，使得系统运行更加流畅、高效。同时，该系统还提供了丰富的开发工具和组件，让开发者能够更加便捷地构建应用，降低了开发门槛。
画中画activity状态管理
qq_40919743的博客
09-21 1068
画中画功能整理，以及遇到的一些问题的解决办法
鸿蒙NEXT版实战开发：使用XComponent实现画中画功能开发
qq_39652397的博客
09-30 761
本文以视频播放为例，介绍通过XComponent实现画中画功能的基本开发步骤。
画中画
霧谷龍視-专栏
12-14 634
<br />void BaseApplication::createCamera(void) { // 主窗口摄像机 mCamera_1 = mSceneMgr->createCamera("Cam_1"); mCamera_1->setPosition(Vector3(0,0,300)); mCamera_1->lookAt(Vector3(0,0,-300)); mCamera_1->setNearClipDistance(5); // 画中画摄像机 mCamera_2
画中画功能
网络的家
08-27 1449
画中画是利用数字技术，在同一屏幕上显示两套节目。即在正常观看的主画面上，同时插入一个或多个经过压缩的子画面，以便在欣赏主画面的同时，监视其它频道。画中画是将副画面安置在主画面之内，一般4：3彩电设画中画；而画外画则是将副画面安置在主画面之外，一般16：9彩电设画外画。但在宣传广告中画中画和画外画统称画中画。    如果背投中配置了两个高频头，即主高频头和副高频头，就可以有画中画功能。根据机
画中画功能，制作多种效果，看你喜欢哪种
L50204023的博客
05-01 696
画中画的视频最近有很多人都在问要如何制作，这里给大家分享用画中画的功能，制作出多种效果的画中画视频，下面一起看操作方法。 准备工具： 媒体梦工厂 多个视频 开始操作： 第一种：相同视频合并成画中画 最常见的一种，打开媒体梦工厂，在画中画功能上，底画种中画的文件栏中都导入相同的视频，一个对的一个，中画位置，尺寸后开始剪辑。 制作出来的画中画效果，同一视频画面播放两个相同的视频。 第二种：不同视频合并成画中画 在底画中导入视频后，看中画要对应哪个视频合并导入不一样的视频，然后设置中画的位置、尺寸及合并的模式
如何制作视频画中画？制作画中画视频的方法
Never_owned的博客
03-02 970
最近有很多朋友在问，该如何制作视频的画中画特效呢？其实这个效果的话，想要实现并不难。今天小编就给大家分享一个新的技巧，下面一起来试试吧。 所需工具 安装一个媒体梦工厂 视频素材 操作步骤 进入媒体梦工厂，在“画中画”版块中，开始操作，先导入底画，多个视频，一行一个 而在中画上，我们可以导入与底画一致的视频，也可以导入不相同的，根据自己需要而定 至于中画的位置，在对应的下拉列表中，可以任意选择，比如正中间、左下角或者自定义，那么中画的尺寸，小编测试选择的是：中画*50%，按比例缩放，中画不会变形 接着，
鸿蒙开发进阶（HarmonyOS ）应用程序中使用XComponent实现画中画功能
最新发布
m0_67143533的博客
11-01 1250
本文以视频播放为例，介绍通过XComponent实现画中画功能的基本开发步骤。
鸿蒙Harmony应用程序开发：画中画功能
2401_84917132的博客
08-23 1272
单击画中画窗口：如果画中画控制层未显示，则显示画中画控制层，3秒后自动隐藏控制层；如果当前控制层已显示，则隐藏画中画控制层。
HarmonyOS 2.0鸿蒙应用开发实战教程视频教程
06-16
在开发环境方面，HarmonyOS提供了DevEco Studio，这是一个集成开发环境，集成了代码编辑、调试、测试等功能，让开发者能够高效地编写和管理应用程序。通过DevEco Studio，你可以创建项目、配置工程，并使用其内置的...
Activity 画中画PiP
datian1234的博客
04-25 763
从 Android 8.0（API 级别 26）开始，Android 允许以画中画 (PiP) 模式启动 **activity**。 画中画是一种特殊类型的**多窗口模式**，最常用于**视频播放**。 使用该模式，用户可以通过固定到屏幕一角的小窗口观看视频，同时在应用之间进行导航或浏览主屏幕上的内容。 画中画利用 Android 7.0 中提供的多窗口模式 API 来提供固定的视频叠加窗口。 如要将画中画添加到您的应用中，您需要注册支持画中画的 **activity**， 根据需要将 ac
J.D. Power洞察：汽车先进科技的场景化应用
wangxi06的专栏
03-15 251
越野e族2021-03-14 13:49:03 十多年前，有一项新科技的前景价值得到了世界一流电视厂商的一致认可，那就是PIP技术（画中画）。PIP，简而言之就是能够在电视画面中含括一个小窗显示另一个画面，以此实现在同一时间收看两个不同的电视节目的一项技术。十多年过去了，在如今蓬勃发展的智能电视领域，这项技术几乎彻底销声匿迹，没有消费者愿意在电视上为它买单。 可在移动智能终端领域，PIP却迎来了新生。在最新的苹果iOS 14操作系统中， 用户可以在使用其他应用程序时播放视频或进行视频通话。PIP已成为智
画中画的实现
panruola的博客
09-13 2786
//画中画         public void pop(PictureBox[] controlCloneVideo)         {             Point n = new Point();             for (int j = 0; j              {                 Point p = new Point();   
视频中的视频怎样制作，教你轻松实现画中画效果
L50204023的博客
07-01 1276
视频中还有视频怎样合成这种效果？这种的视频称之为画中画视频，那么如何实现画中画效果，下面是具体的方法步骤，我们来看看怎么用它制作画中画视频。在制作画中画效果视频时，我们先准备一个“媒体梦工厂”可以在电脑浏览器上搜索下载。 先注册登录到主界面上，选择“画中画”，先在这个底画表格下导入视频素材。可导入多个，一行一个 然后再次将视频素材导入到这个中画的表格中。与上方底画的视频一行行对应。 确定导入素材后，设置中画位置，缩小比较，选择逐行合成的模式。 然后进入浏览选择新视频保存的位置，并开始合成 等全部合
神奇的H5视频画中画功能
weixin_30273175的博客
08-15 1157
一个H5视频，可以从浏览器独立出来播放视频，看起来像是一个本地应用。画中画功能是chrome70+的新功能 官方例子，Github地址 <video id="video" src="https://example.com/file.mp4"></video> <button id="togglePipButton">...
Android 悬浮框的使用、画中画的使用；
Choi晨的博客
03-20 4881
需求：用户触发了一定的条件会弹出一个悬浮框，用户在关闭APP或把APP退到后台时，点击悬浮框可以打开应用； 很简单的一个悬浮框很快就创建出来了，退出APP后点击悬浮框可以通过包名启动APP，但是把APP退到后台后怎么都启动不了，原因是:从后台启动 Activity 的限制，于是有了骚操作：从ActivityManager中根据本应用正运行的Task唤醒到前台（不是每次都能成功）， 然后就有了...
视频画中画的实现（窗口剪裁）
白月光的专栏
03-26 3474
在视频后续的研发过程中，采用“图像合成”来实现画中画的模式，逐渐被舍弃。原因有两点：其一、图像合成会占用较多的资源；其二、展示方式不是太灵活（比如：当画中画中小窗口的大小、位置涉及调整时，需要动底层代码）。         在开发视频SDK时，我们通常给底层传入要渲染的窗口句柄；也就是说，窗口的绘制完全交于底层来处理。那画中画如何在上层控制呢？简单的将两个窗口叠加在一起，会因为视频的同时渲染而导
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值