如何像抖音直播一样，从 App 直播间到桌面画中画实现画面无缝切换？丨有问有答

前一些时间，我在知识星球上创建了一个音视频技术社群：关键帧的音视频开发圈，不少朋友加入并在里面咨询一些音视频相关的技术问题，其中不乏一些开发中普遍遇到的问题，这里我会挑一些放出来供大家参考。

如果你也有音视频技术问题想咨询，或者符合下面的情况：

• 在校大学生 → 学习音视频开发
• iOS/Android 客户端开发 → 转入音视频领域
• 直播/短视频业务开发 → 深入音视频底层 SDK 开发
• 音视频 SDK 开发 → 提升技能，解决优化瓶颈

不妨看看《是的，我建了一个进阶百万年薪的社群》了解一下这个社群，根据自己的需要，按需加入。

---

今天我们要讨论的问题是一位社群的朋友遇到的一个工作中的技术优化问题，原文如下：

**请问 iOS 画中画小窗播放如何做到像抖音一样无缝切换？目前 App 内使用腾讯云的播放器播放 flv 的流，切到桌面画中画小窗时必须使用系统的 AVPictureInPictureController + AVPlayer，AVPlayer 不支持 flv，所以只能播放 hls 的流。又因为 hls 比 flv 延迟高，而且需要重新开始拉流，无法做到画面无缝衔接，体验不是很好。能否给点优化建议？******

以下是建议的技术方案，欢迎大家留言讨论补充：

方案 1：占位 AVPlayer + 旁路 flv 渲染视图，实现画中画的画面无缝切换。

在 App 的直播间依然使用腾讯云的播放器播放 flv 的流，同时在 flv 的首帧渲染成功后，再拉起一个 AVPlayer 来播放一路占位的 hls 流（可以静音、全黑、小尺寸画面）。这个 AVPlayer 在 App 内不显示出来，但是把它作为画中画 AVPictureInPictureController 的播放器。

当退后台时，处理画中画的事件回调，从直播播放器拿一个旁路的渲染 view 贴到画中画的 AVPictureInPictureController 视图上，这个旁路的渲染 view 继续渲染直播 flv 流的内容，这样就实现了画面无缝切换了。

需要注意的是：

• 1）App 要开启后台播放音频，继续播放 flv 流的声音；
• 2）支持后台渲染的能力，支持退后台后，旁路渲染 view 能平滑渲染 flv 流，这需要设置好 MPNowPlayingInfoCenter.nowPlayingInfo（否则会只有声音，画面会卡住或闪动）。
• 3）hls 流只要跟 flv 流的比例一致就好了，大小不影响，画中画的尺寸是按比例来的。

这个方案有个问题，即真实直播流 flv 和占位流 hls 这两个流的状态其实是不一致的。如果 hls 那路流一直不出问题还好，画中画始终依赖 flv 的流状态控制 UI 就好，但是如果 hls 那路流出错导致 AVPlayer 报错就会直接影响到画中画的状态。

除了这个方案外，我还提出了另外一个方案 2，不过改动会比较大，这里就先不公布了。如果你确实感兴趣或者有更好的方案，可以在通过本文后的二维码加入我们关键帧的音视频开发圈一起了解和探讨。