文章目录前言这份案例在演示什么完整代码为什么 pipEnabled 代表的是一种任务模式切换为什么主视频区和小窗要同时出现小窗为什么适合用 Stack 做示意说明区里的权限信息为什么不能忽略.pictureInPicture(true/false) 背后代表什么关键代码单独讲解Button(this.pipEnabled ? 关闭画中画 : 开启画中画).position({ top: 8, right: 8 }).onClick(() { this.pipEnabled false })小白最容易踩的坑1. 把画中画理解成普通弹层2. 只做了小窗样式没有想清楚主页面离开后的播放逻辑3. 忽略权限配置这份代码能怎么改成真实业务动手改一改写在最后前言很多视频能力都在提升“观看体验”但画中画不太一样。它提升的是任务切换体验。用户不一定总是愿意停留在播放器页里。看教程时可能想去记笔记看会议回放时可能要顺手回消息看课程时可能想一边查资料一边继续听。这时候如果视频一离开当前页面就中断体验会立刻打折。这也是为什么画中画能力很有价值。它让播放不再被页面边界锁死。这份案例在演示什么页面核心围绕一个状态StatepipEnabled:booleanfalse它控制播放器是否进入画中画概念模式。案例做了两件事展示主视频区域在开启时叠加一个小窗播放器示意这正好对应了画中画的核心认知主内容可以让位但播放不必停止。完整代码/** * VideoPictureInPicture - Video 画中画 * 演示 Video 画中画模式的概念和实现方式 */import{PRESET_COLORS,generateListItems,PAGE_BG_COLOR,PANEL_BG_COLOR,ACCENT_COLOR,MUTED_TEXT_COLOR}from./typesEntryComponentstruct VideoPictureInPicture{StateisShow:booleantrueStatepipEnabled:booleanfalsebuild(){Column(){if(this.isShow){Scroll(){Column({space:16}){Text(Video 画中画).fontSize(16).fontColor(ACCENT_COLOR).fontWeight(FontWeight.Bold)Column(){Row(){Text(画中画: ).fontSize(13).fontColor(#666666)Text(this.pipEnabled?已开启:未开启).fontSize(14).fontColor(this.pipEnabled?#6BCB77:#A0A0A0).fontWeight(FontWeight.Bold)}.margin({bottom:12})Column(){Column(){Text(主视频区域).fontSize(14).fontColor(#FFFFFF)}.width(100%).height(160).backgroundColor(#444444).borderRadius(10).justifyContent(FlexAlign.Center)if(this.pipEnabled){Stack(){Column(){Text(PiP).fontSize(10).fontColor(#FFFFFF)}.width(100).height(60).backgroundColor(#4D96FF).borderRadius(6).justifyContent(FlexAlign.Center)Text(×).fontSize(12).fontColor(#FFFFFF).width(20).height(20).backgroundColor(#FF6B6B).borderRadius(10).textAlign(TextAlign.Center).position({top:-5,right:-5})}.position({top:8,right:8}).onClick((){this.pipEnabledfalse})}}.width(100%).height(160)Button(this.pipEnabled?关闭画中画:开启画中画).onClick((){this.pipEnabled!this.pipEnabled}).fontSize(13).backgroundColor(this.pipEnabled?#FF6B6B:ACCENT_COLOR).margin({top:10})}.backgroundColor(PANEL_BG_COLOR).padding(12).borderRadius(12)Column({space:6}){Text(画中画功能说明).fontSize(14).fontColor(ACCENT_COLOR).fontWeight(FontWeight.Bold)Text(Video 组件支持 pictureInPicture 模式).fontSize(12).fontColor(#333333)Text(开启后播放器以小窗悬浮在其他应用上).fontSize(12).fontColor(#333333)Text(用户可拖动小窗位置、调节大小).fontSize(12).fontColor(#333333)Text(切换应用时视频不中断播放).fontSize(12).fontColor(#333333)Text(API: .pictureInPicture(true/false)).fontSize(12).fontColor(#333333)Text(需在 module.json5 中配置 PiP 权限).fontSize(12).fontColor(#333333)Text(ohos.permission.PICTURE_IN_PICTURE).fontSize(11).fontColor(MUTED_TEXT_COLOR)}.width(100%).backgroundColor(#E8F4FD).padding(14).borderRadius(12)}.width(100%)}}Text(Video 画中画 - 保持播放连续性的悬浮小窗模式).fontSize(12).fontColor(MUTED_TEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}为什么pipEnabled代表的是一种任务模式切换先看这行StatepipEnabled:booleanfalse它并不只是控制一个小窗显示不显示而是在表达播放器是否进入“边播放边切任务”的模式。这和全屏完全不同。全屏强调沉浸画中画强调不中断所以它们虽然都属于视频高级能力但服务的用户场景完全不一样。为什么主视频区和小窗要同时出现案例故意把两者放在一个结构里是为了帮助你建立概念主视频区代表内容原本所在的位置小窗代表播放能力被抽离出来变成一个独立悬浮入口你可以把画中画理解成“播放器脱离页面容器继续存在”。小窗为什么适合用Stack做示意看这段Stack(){小窗主体 关闭按钮}这很符合真实 PiP 的交互模型。一个小窗本体上面往往还会附着关闭按钮暂停按钮恢复到主页面的入口这类覆盖式控件结构用Stack特别自然。说明区里的权限信息为什么不能忽略案例最后明确写了ohos.permission.PICTURE_IN_PICTURE这点非常重要。因为画中画不是纯前端视觉效果它往往涉及系统级能力和权限配置。也就是说真正要落地 PiP除了页面状态和组件调用外你还得关心权限声明系统支持情况生命周期处理小窗切换时的播放器状态同步.pictureInPicture(true/false)背后代表什么这行 API 方向.pictureInPicture(true/false)其实是在告诉你画中画能力最终并不是靠“自己画个悬浮框”来实现而是要借助系统提供的 PiP 模式。教学案例先用状态和布局帮你理解概念再对接真实 API这个顺序是合理的。关键代码单独讲解Button(this.pipEnabled ? 关闭画中画 : 开启画中画)按钮文案跟当前状态绑定能让用户马上知道下一次点击会触发什么。.position({ top: 8, right: 8 })小窗放在右上角是一种很常见的浮层示意位置也方便和主画面形成明显区分。.onClick(() { this.pipEnabled false })小窗本身提供退出入口这是 PiP 体验里很重要的一点。小白最容易踩的坑1. 把画中画理解成普通弹层其实它更接近系统级播放延续能力。2. 只做了小窗样式没有想清楚主页面离开后的播放逻辑这样做出来的只是视觉模拟不是完整体验。3. 忽略权限配置页面代码写完了但运行时根本进不了 PiP 模式。这份代码能怎么改成真实业务场景改法在线课程页支持边看课程边记笔记会议回放页用户切到聊天或文档时继续听回放直播回放页允许用户边浏览其他内容边保留播放教程应用小窗播放时提供恢复到详情页入口动手改一改给小窗再补一个“返回主播放器”按钮。进入画中画后隐藏主页面里不必要的播放控制区。记录进入和退出 PiP 的状态变化。在真实项目里补上module.json5的权限配置。写在最后画中画模式最有价值的地方不是界面看起来高级而是它把播放从“页面功能”升级成了“跨页面连续能力”。这一步一旦做好视频体验会立刻显得成熟很多。如果你现在在做 HarmonyOS7 的媒体应用这篇建议认真消化。因为它让你开始从页面视角之外去理解播放器和系统能力之间的关系。