打造出色的空间播放体验

♪ 悦耳的器乐嘻哈 ♪ ♪ 大家好 我是 Jeremy 一名媒体体验软件工程师 在本次讲座中 我将向你介绍 如何在你的 App 中为视频播放 创造出色的空间体验 想要打造这样的体验 你需要针对平台进行优化 充分利用平台上强大的媒体功能 同时让平台与整个系统实现集成 首先 我们会探讨 使用最小化 App 的媒体体验 接着 我会介绍一些 更高级的 UI 功能 然后 我将介绍一些显示视频的其他方法 最后 我会对各种选项进行比较 如果你在 iOS 或 Apple tvOS 上 使用过媒体 API 那么你便会对此十分熟悉 该平台基于与之相同的 API 进行构建 并在其基础上扩展出独特的功能 AVFoundation 可以处理 播放电影的所有工作： 流式传输、解析、解码、同步 而 AVKit 则基于 AVFoundation 和 UI 框架进行构建 并为各个平台都打造了可定制、 可整合的播放体验 我们对该平台中的 AVFoundation 进行了改进 用以支持可以发挥独特功能的 新媒体格式 例如 3D 视频 想要了解更多有关这些格式的信息 请参考该讲座 AVFoundation 经过改进后 还可利用 RealityKit 实现 高性能、高质量的渲染 从而让视频与你周围的世界 无缝融合 并且音频还可对你周围的世界 作出回应 此外 AVKit 的 AVPlayerViewController 也得到了扩展 以利用 RealityKit 的强大功能 以及该平台的独特能力 来创造精致的体验 其中包括你所期待的所有播放控件 以及大量独特功能 如果想在 App 中充分利用 该框架 你需要做些什么呢？ 首先 Xcode 目标必须使用 该平台的 SDK 进行编译 使用 iOS SDK 构建的 兼容 iOS APP 可以获得与 iOS 兼容的体验 接着 就像在 iOS 和 Apple tvOS 上一样 使用 AVPlayerViewController 最后 呈现视图控制器 以填充窗口 接下来 我们通过代码 演示一下整个过程 首先 我们导入 AVFoundation 和 AVKit 接着 创建 AVPlayerViewController 并将 AVPlayer 与之关联 然后 使用 contentURL 创建一个新的播放项 并将其设置到播放器上 在视图控制器设置完播放器后 再添加项目 可以提高播放器性能 因为播放器可以在加载媒体前 了解其播放方式 接着 为了在 SwiftUI 中 使用该控制器 将其代码封装在 UIViewControllerRepresentable 中即可 我们将该结构体称为 PlayerView 然后 我们开始创建 App 并将其称为 MoviePlayingApp 最后 添加我们刚刚 定义的视图控制器 使其填充整个窗口 这样 我们便得到了一个 电影播放 App 如果你觉得这代码和 其他 Apple 平台上的十分相似 那是因为两个代码本来就是同一个 AVPlayerViewController 和 AVPlayer 会负责大量繁重的工作 从而为你减轻工作量 接下来 我来向你展示 一个简单 App 的媒体体验 在启动 App 前 你只能看到一个房间 当我们启动 App 前方就会出现一个大屏幕 接着房间会变暗 营造出舒适的效果 当我们进行移动时 屏幕在原地保持不动 并且音频也保持固定在屏幕上 如果要显示播放插件 请查看屏幕并轻点 接着 控件就会悬浮在视频前方 当音频开始播放时 不进行任何操作控件就会自动消失 或者看向屏幕并再次轻点 便可人为使其消失 抓取屏幕下方的窗口栏 你可以重新定位屏幕

抓取屏幕的一角则可以调整大小 请注意 随着屏幕大小发生变化 它会展现平滑的动画效果 并与视频的纵横比保持匹配 你可以转动数码旋钮调整音量 或使用数码旋钮来打开环境 就像这样 我喜欢在这种环境下看电影 但你还是得亲身体验一下才行

现在 我们来更详细地了解一下 播放控件的功能 这里展示的是播放界面 右上角是音量控制 可以进行快速调整或静音 正如我之前提到的 音量也可以通过数码旋钮 来进行调节 左下角是你熟悉的播放/暂停 以及后退/前进按钮 底部中间是滑动条 可以跳转到电影不同的时间点 最后 右下角 是具有更多选项的按钮 这里展示的是调整播放速度的选项 如果电影包含多个音轨或字幕轨道 使用这些选项来选择 音轨的语言 或启用首选语言的字幕 最后一个选项是 Dimming Effect 我喜欢在黑暗的环境下看电影 以便更好地专注于电影内容 但有时我还需要关注其他内容 在这里 我可以关闭 Dimming Effect 来更好地看清四周 刚刚我们已经介绍了 内置的基本功能 现在 我们来探索一些更高级的功能 缩略图滑动条会在滑动时 显示视频的小图像 从而可以无缝浏览内容 该控件在对 HLS 流进行滑动时 会自动显示缩略图 但这只适用于包含 I-frame only 播放列表 也就是 Trick Play 轨道的 HLS 流 宽为 145 像素的 小 Trick Play 轨道是最佳选择 想要了解更多细节内容 请参考该文档 有时 时间轴上需要插入媒体 以显示商标、回顾或广告 插页式广告支持便可以实现该功能 当出现插页式广告时 控件就会自动在时间轴上 使用指示器进行标示 这些插页式广告可以通过 AVPlayerInterstital EventController 以编程的方式进行配置 也可以在 HLS 流中进行描述 想要了解更多细节内容 请参考该讲座 视频播放 App 通常还会使用 一些其他 UI 选项 关联式操作可以让你添加 跳过介绍以及播放下一集等按钮 并使其具备标题和可选图像 自定义信息视图控制器可用于 显示与内容有关的元数据 或推荐相关内容 这些 API 的工作方式与其在 其他 Apple 平台上的完全相同 想要了解更多细节内容 请参考该讲座 你的 App 还可以使用 沉浸式空间功能将你带往其他地方 在 App 创建沉浸式空间时 你可以决定空间的外观 不仅如此 你的视频屏幕 还会自动移动到该空间 并将自身固定在预期的大小和位置 以确保每次都可以为你带来 绝佳的视角 同时 控件的分离和靠近 也可以让你更轻松地与其进行交互 接下来 我们来看一下代码 这里展示的是此前的 MoviePlayingApp 首先 我们来添加一个沉浸式空间 其中 3D 内容会由 RealityKit 实体进行描述 接着 我们在 PlayerView 中 使用 onAppear 来打开空间 你需要确保你设计的沉浸式空间 考虑到了电影播放器停靠的情况 想要了解更多有关 构建和呈现空间的信息 请参考该讲座 AVPlayerViewController 经过彻底地改进和设计 可以在该平台上创造出出色的体验 我们非常希望 AVPlayerViewController 能够满足你的要求 所以 如果你想对任何功能 或操作提出建议 欢迎提供反馈 以便我们可以针对你的用例 持续进行改进 在极少数情况下 你可能还需要构建自定义播放插件 如果出现了这种情况 欢迎提供反馈 我们建议你使用 AVPlayerViewController 利用该 API 你可以隐藏控件 并为自定义 UI 提供覆盖层 使用该方法会比 级别较低的 API 更好 正如我们刚刚演示的 AVPlayerViewController 提供了大量系统集成功能 而不单单是播放控件 未来你还可以继续获得 出色的系统集成功能 刚刚我们探索了 AVPlayerViewController 的 全屏体验 现在 我们再来看看视频播放的 其他用例 有时 你会希望电影 在窗口中进行内联播放 例如作为文档的一部分 或用于播放预览 AVPlayerViewController 内联也非常适用于这种情况 但如何获取内联视图呢？ 视图只要在显示时 没有填充整个窗口 便会自动使用该模式 并且 视频的内联空间也针对 操作系统进行了重新设计 需要注意的是 由于视频是 利用 AVPlayerLayer 在窗口内合成的 所以该视图无法显示 3D 视频 有时 你的 App 可能还希望 将视频作为 3D 场景的 一个实体进行播放 例如启动屏幕或视频过渡 在这种情况下 你不需要播放控件 也不需要停靠这类的系统集成 针对这种情况 使用 RealityKit 中的 VideoPlayerComponent 既可 VideoPlayerComponent 可以将 RealityKit 实体 与 AVPlayer 进行关联 接着 你就可以像对其他实体那样 将该实体放置于 你的 RealityKit 场景中 它会为视频创建纵横比合适的网格 并支持显示字幕 如果可以的话 请尽量使用该 API 而非 AVPlayerLayer 因为其可以充分利用 RealityKit 针对视频的优化 从而具有比 AVPlayerLayer 更好的性能 同时还支持新的 3D 视频格式 想要了解更多细节内容 请参考该讲座 有时 你可能还想在 3D 场景中 使用视频 也就是将视频作为 一种特效进行展示 在这种情况下 你可能需要自行 创建几何形状 并对视频播放方式有更多的控制权 VideoMaterial 是一个比较底层的 API 可以在任意几何形状上显示视频 这就意味着它无法确保原始纵横比 并且也无法显示字幕 想要了解更多细节内容 请参考该相关讲座 刚刚我们介绍了一些 额外的 UI 功能 以及其他用例 DestinationVideo 示例 App 可以展示其中部分功能 它具有一个视频浏览器用于选择 并在沉浸式空间中播放视频 以下便是演示过程 选择一个视频并显示信息页面 接着沉浸式空间就会打开 请注意 这里的预览使用了 一个具有自定义 UI 控件的 内联播放器 然后 播放电影 播放器 UI 出现后 就会立刻停靠在沉浸式空间中 并且以固定的大小和位置 为你提供最佳观看体验 另一个不错的细节是 当屏幕停靠在 像这样的沉浸式空间中时 播放控件会与之分离并离你更近 从而方便你与之进行交互 轻点列表按钮 该 App 便会提供 自定义信息视图控制器 以便在你观看视频的时候 显示更多与电影内容有关的信息 以及相关内容 在视频快结束的时候 屏幕右下角便会出现一个 播放下一集的关联式操作按钮 刚刚我们介绍了 视频播放的空间体验 它会在你面前悬浮一个大屏幕 同时呈现精美的视觉效果 和优质的空间音频 其中还包含了 你需要的所有播放控件 此外 我们还讨论了 一些其他播放用例 在你的 App 中播放视频 有多种方式可供选择 接下来 我们来进行一下比较 这些是用于展示视频的 API 每个都具有不同的功能 你可以根据自己的需要 为媒体体验选择正确的 API 确保你的媒体 可以准确显示和访问 确保该媒体已针对平台进行了优化 并且可以借助 RealityKit 进行渲染以支持 3D 视频格式 此外 你还需确保你的 App 具备强大的播放控件 并已针对平台进行了调整 最后 确保该 App 可与整个系统进行集成 以便提供优质的体验 AVPlayerViewController 让你的 App 充分利用 你在其他平台上 可以使用的功能 以及该平台上全新且独特的功能 从而 你可以为用户 提供一流的电影播放体验 空间媒体功能为人们以全新的方式 体验视频提供了新的可能 首先 请查看 DestinationVideo 示例项目 该项目演示了 许多在此处讨论的功能 请参考这些相关讲座 我非常期待看到 你使用这些强大的工具 创造出的精彩内容 但现在 我要回去看节目了 享受！ ♪