在 visionOS 中探索多视角视频播放

大家好 我叫 Eric 是一名媒体体验 软件工程师 本次讲座将介绍如何 使用新推出的多画面架构 为 App 引入 同步视频观看体验

我们先来了解一下 visionOS 上 沉浸式媒体观看体验的构成要素 空间音频、3D 视频 以及由沉浸式环境支持的 大屏幕等等 只是 visionOS 系统提供的 令人惊艳的一部分体验

这些功能及更多其他功能 都是通过强大的框架得以实现的 这些框架本身也在不断改进 AVFoundation 负责处理 播放影片所涉及的所有工作 包括 2D 和 3D 内容 在 visionOS 上 AVFoundation 与 RealityKit 相互配合 以高性能和高质量的方式 渲染视频和空间音频 AVKit 利用 AVFoundation 和 RealityKit 以及 UI 框架 和平台特定的功能 来打造针对该平台量身定制的 播放体验 AVKit 特别是 AVPlayerViewController 提供熟悉的用户界面 与许多其他系统功能整合在一起 并不断增强 视频观看功能 在 visionOS 上 呈现 AVPlayerViewController 提供了许多独特的功能 多画面便是其中之一 首先 我将介绍多画面功能 并展示一种 在 visionOS 上同时观看 多个视频屏幕的绝佳方式

之后 我将谈谈多画面的核心概念 以及如何利用这些概念 打造出色的多画面体验

假设我想同时观看 我最喜欢的几个直播内容 或者我想同时关注 两场体育比赛 也许我正在观看的内容 有多个可用的拍摄角度 而我想要增强的视角

对于诸如此类的用例 AVKit 提供了多画面功能 这是一种系统集成的观看体验 也可根据应用 进行自定 我来演示一下 多画面的潜能

我正在大屏幕上 观看精彩内容 AVPlayerViewController 让一切变得简单 注意看左上角 新出现的多画面按钮 出现该按钮则表示 还有我可能想观看的其他相关内容 轻点多画面按钮 就能看到一个 完全由 App 提供的内容浏览器 我可以滚动浏览 可供观看的内容

这个看起来很有趣

现在 我正在多画面模式下 并排观看 注意这两个屏幕 对其周围环境产生的光影效果 这是一种基于单屏播放体验 而进行增强的美妙效果 原始视频 占据主焦点 具有略显突出的 外观和音频播放效果 关闭内容浏览器 便会显示熟悉的媒体播放控件 主焦视频 会直接响应这些控件 我可以暂停 拖动进度条 以及调整音量等其他设置 还可以轻点另一个视频来切换主焦点 此时它的音频将接替原始音频

有些设置适用于整个组 例如 无论我将焦点移至何处 音量都保持不变 其他设置 比如播放速度 只会影响进行了相应设置的视频

我还可以添加更多内容 轻点播放控件中的 多画面按钮 以重新显示内容浏览器 注意我添加视频时所呈现的变化 以及浏览器如何响应 以显示我的选择 多画面功能允许同时显示 最多五个视频屏幕 其布局模板可最大限度地 提高舒适度和可视性

要删除某个视频 我可以轻点相应屏幕上的关闭按钮 也可以使用浏览器将其删除 如果要更改布局 可以拖移相应视频 这个视频将在布局模板内 作出响应 以指示将要放置到什么位置 让我们将这个视频移到中间 总结一下 我可以添加、移除、排列 视频 以及调整视频位置 甚至还可以调整大小 以获得我想要的观看体验

我还可以轻松 返回到单个视频模式 在这里 我所描述的所有行为和功能 比如光影投射 播放控件和调整大小 都将以同样熟悉的方式继续发挥作用 多画面 显著增强了观看体验 同时又保持了 直观且熟悉的所有功能 多画面是一项 高度可自定的功能 下面我们就来看看如何设计 引人注目而又直观的多画面体验

首先 我们将探讨多画面功能中 涉及的一些关键概念 然后 我们将使用这些概念对 支持多画面的 App 的元素进行编码

最后 我们将探讨有关 在 App 中添加多画面的最佳做法

多画面体验中显示的 每个视频屏幕都由一个单独的 AVPlayerViewController 提供支持 随着将播放器视图控制器 添加到多画面 多个屏幕 将以合理方式排列在一起 既舒适又符合人体工程学

让我们来看看单个 AVPlayerViewController 它有一个新的对应控制器 AVExperienceController 这个控制器定义了一系列 可能的视频播放体验 它的父播放器视图控制器 可以在这些体验之间进行切换 示例体验有嵌入式的 即视频与其他 App 内容一起显示 也有扩展式的 即视频屏幕 单独显示 如图中所示 每个 AVExperienceController 都 可以指定自己支持的体验集 把多画面添加为支持的体验后 便会在相应的播放器视图控制器的 UI 中启用 一个多画面按钮 用户轻点该按钮 体验控制器就会切换到 多画面体验 此时会显示一个 内容选择浏览器 表明该体验开始

该视图是可自定的 例如 提供内容浏览器视图控制器 来管理可用内容 以及提供与该内容 交互的 UI 将这个视图控制器 附加到 AVMultiViewManager AVMultiViewManager 负责处理许多细节 比如在需要时 提供内容浏览器 它还会跟踪哪些体验控制器 已切换到多画面 并维护 视频屏幕的布局 从根本上说 浏览器视图控制器 与 AVMultiViewManager 协同工作 向正在进行的多画面体验 添加或移除内容 例如 当用户通过浏览器 UI 选择其他内容时 会通知浏览器视图控制器创建 另一个 AVPlayerViewController 来播放该内容 使用相应的体验控制器 切换到正在进行的 多画面体验 AVMultiViewManager 会跟踪 进入多画面的 体验控制器集合 并相应地更新视频屏幕布局 我们来看看如何在代码中实现此功能 首先 定义一个自定的 浏览器视图控制器 及其核心职责 也就是管理多画面的 可用内容 以及提供 用于选择这些内容的 UI 把它放置在 AVMultiViewManager 上 尽早设置 以便多画面管理器 可以在需要时 激活浏览器 UI

当用户通过 浏览器选择内容时 可轻松将它添加到多画面体验中 新建一个 AVPlayerViewController 并将它设置为播放所选内容 访问相应的 AVExperienceController 并将多画面添加到支持的体验中 请注意 AVPlayerViewController 已创建 但它的视图尚未显示 在视图层次结构中 此时 其体验控制器 处于平台的 默认体验中 要将它引入多画面体验 需转换体验控制器 多画面管理器 从此刻开始接管

当用户通过浏览器移除内容时 也应遵循类似的模式 在本例中 该内容的体验控制器 已处于多画面体验中 因此应把它转换为 另一种支持的体验 这里使用的是 embedded 如果相应的 AVPlayerViewController 先前未安装在 视图层次结构中 多画面管理器 将直接使其消失

虽然内容浏览器是 用户添加或移除 多画面内容的主要方式 但这并不是唯一的方式 App 使用 AVExperienceController 的委托来处理源自 内容浏览器之外的事件 使用委托来 响应转换更改 无论转换事件如何发生 委托都会接收到这些事件 其中包括有关 每个转换进度的上下文 例如 轻点单屏 AVPlayerViewController 的 多画面按钮 对应的 ExperienceController 将转换为多画面 委托将收到相应通知 因此 App 可以 对启动多画面体验做出反应

另一个例子是 用户可以通过轻点某个视频屏幕来 移除多画面内容 甚至通过播放控件来 完全退出多画面 委托会接收 这些转换事件 以确保 App 状态与多画面管理器的 操作保持一致

委托还可以 在转换开始前 完成其他工作 App 会借此机会来 准备状态 显示或隐藏相关 UI 通常为顺畅转换 做好准备

如需进一步了解如何实现多画面体验 请参考相应文档 接下来我们探讨在 App 中 使用多画面体验的一些最佳做法 采用多画面功能 需要经过深思熟虑 同时显示多个屏幕 是一件很有视觉冲击力的事情 可能会让没有心理准备的人 不知所措 支持顺畅过渡是带来愉悦的 多画面观看体验的关键所在 特别是 要让用户决定 一次观看多少内容 从熟悉的 单屏观看体验开始 对于那些想要 提升体验的用户 建议使用 AVPlayerViewController 提供的 标准按钮来开始多画面体验 在探索多画面选项后 用户可能还是 喜欢单屏观看 在这种情况下 应提供同样出色的体验

在内容方面 要考虑具体用例 多画面非常适合 同时观看多个内容 并重点关注 一段内容 它并不适用于 观看电视节目剧集之类的内容 对于这种情况 可考虑使用 AVQueuePlayer 一般而言 如果没有 强烈需要多画面的用例 可考虑探索其他 AVKit 选项 以打造恰到好处的体验

现在 让我们来谈谈内容浏览 内容浏览器是 添加和移除内容的主要工具 它可以采用引人入胜的设计 但也应该直观易用 让用户知道会发生什么 并能找到他们想看的内容

一个直观的内容浏览器 会通过清晰传达信息和 积极响应用户的选择 让用户 更乐于与多个视频屏幕进行交互 用标题和内容 缩略图预览 简洁地描述每段内容 浏览器区域相对于 视频屏幕是有限的 因此要尽量减少装饰性元素 而着重使用有助于用户识别的元素

浏览器的整体风格 应与整体体验相协调 例如 尽量使用 与播放内容相匹配的 正确比例的缩略图 此外 在适当的地方使用 相匹配的强调色 过度强调浏览器或其选项 可能会影响整体体验

突出显示当前选择 用户可能只观看 一小部分可用内容 因此应帮助他们在浏览器中 识别屏幕上的内容 不过请注意 在浏览器中用过于激进 的方式重新排列内容 或使有限的空间过于拥挤 可能会妨碍用户 进行浏览和作出选择 如果你的 App 依赖于沉浸式媒体体验 强烈建议你了解一下 AVKit 提供的功能 AVKit 拥有 丰富的媒体播放功能集 而且还在不断改进 多画面功能 充分展现了 如何利用 AVKit 来提升应用体验 甚至开启全新的可能 多画面功能非常强大 与 AVKit 的其他方面一样 它不仅进行了优化 以实现流畅播放 致力于跨平台 提供熟悉且直观的 观看体验 还支持根据应用程序需求 进行自定 我非常期待看到 你用它构建出的体验 谢谢观看