在 Apple tvOS 上提供出色的播放体验

了解如何使用 Apple TV 重新设计的播放界面在您的 app 中构建出色的媒体体验。了解最新的界面如何帮助人们在保持对内容关注的同时访问相关控件和信息。我们将展示如何为您的 Apple tvOS app 采用 AVPlayerViewController 和其他 API，以帮助人们查找、播放和享受内容。为了能充分了解本节内容，我们建议您对 AVKit 作基本了解。

资源

相关视频

WWDC21

WWDC20

WWDC19

下载

♪低音音乐播放♪ ♪ 马克思斯特潘诺夫：哈啰！我是马克思我是tvOS团队的软件工程师今天我很开心要跟大家分享在Apple TV上优异、全新的媒体播放用户界面外观以及身为开发者的各位可以如何让这些新功能发挥最大的功用在这个课程中我们会简略介绍在tvOS 15中标准播放用户界面的增强我们会介绍新的API 最后我们会讨论能帮助大家在你们的应用程序中建立优异的播放体验的最佳体验让我们开始吧 AVPlayerViewController 会在Apple TV 提供用户标准媒体播放它支持各式各样的遥控器包括新的点击轮遥控器以及跳过、扫描、环状旋转功能 Siri命令、插页支持等等我们鼓励大家在你们的应用程序中开始使用AVPlayerViewController 让用户有类似在Apple TV上第一方应用程序的体验如果你还没用过 AVPlayerViewController 或是想复习一下我推荐大家去看在2019年WWDC的《以AVKit带来直觉式的媒体播放》里面有详细说明如何将AVPlayerViewController 嵌入你的应用程序中让我们浏览一下今年我们带来哪些新的增强在tvOS 15中我们重新设计整个标准播放用户界面来帮助观众专注于更一致的交互式体验通过在播放时间列加上相关的控制和选项我们改善了一般播放任务的可寻性例如开启字幕或改变音频语言播放时间列控制可以是一般通用的也可以是应用程序专用的有了新的内容页签用户可以轻易地存取辅助信息像是信息或章节让大家能取得和探索内部导航内容页签也可以用来显示相关内容在这个范例中我正在看去年WWDC的内容而且我可以在不离开播放器的状况下浏览推荐的内容最后我们加入了上下文动作让用户能在播放期间使用这些动作有完美的功能性像是略过简介或回顾要充分利用Apple TV上新的播放用户界面你的应用程序必须链接到 tvOS 15 SDK 我们用这个方法来维持和任何能从App Store中取得现有的应用程序之间的兼容性那些应用程序会取得默认的 tvOS 14播放用户界面和功能现在你应该很期待要学习如何将这个新的功能性用在你的媒体应用程序中让我们来探索tvOS 15中新的API… 从标题栏开始新的标题栏就显示在播放时间列上面能帮助用户马上知道他们在看什么要呈现标题栏我们会使用从目前 AVPlayerItem的元数据取得的 commonIdentifierTitle 和iTunesMetadata TrackSubtitle的值如果媒体资产不包括嵌入的元数据或者你需要增加它使用AVPlayerItem的 externalMetadata属性当播放实时串流内容时标题栏也会显示一个标记来向观众指示内容状态最后要是你的应用程序偏好不要显示标题栏可以通过将新属性transportBar IncludesTitleView的值设定为假来禁止它接着让我们来看看播放时间列控制播放时间列控制位在播放时间列旋转触控上方的用户界面组件集合这些控制可以帮助用户快速和直观地找到所有你的媒体应用程序提供的播放选项有些标准控制像是字幕音频语言和子母画面是由系统所提供的身为开发者你可以延伸播放时间列控制的清单利用AVPlayerViewController的新属性 transportBarCustomMenuItems 它支持UIAction和UIMenu类别的实体让我们来看一个使用播放时间列控制的范例这里我使用UIAction 让用户新增目前的媒体项目到他们的“最爱”上你也可以通过UIMenu类别建立更进阶的动作排列并且将它们呈现在选单中由AVPlayerViewController 呈现的UIMenus 会使用displayInline选项来支持高达一层的巢套想了解使用UIMenu和UIAction类别更详细的内容我建议大家去看 2019年WWDC的《将你的用户界面更新到iOS 13》现在让我们来谈谈内容页签内容页签能让你的应用程序显示补充信息或者推荐更多内容当媒体资产包含嵌入的元数据或是当你以AVPlayerItem 补充外部元数据时 AVPlayerViewController 就会显示信息页签还有当你用AVPlayerItem 供给navigationMarkerGroups时 AVPlayerViewController 就会显示章节页签你的应用程序可以利用 AVPlayerViewController的新属性 customInfoViewControllers 来呈现额外的内容页签在tvOS 15中我们舍弃 customInfoViewController属性而改用允许多重视图控制器的新属性要将你的内容页签重新调整成适当的大小请使用preferredContentSize属性来指定高度或是定义适当的自动布局限制当你在计算显示内容页签所需的高度时系统会将所有视图控制器的大小调整成最高内容页签的高度当你在处理多重内容页签时将你自定义的视图控制器调整成一致的大小或者在执行期间确认布局和预期的相同不要忘记在你的自定义视图控制器上设定标题属性我们会在内容页签的标题上用到它为了帮助大家建立漂亮的内容页签今年我们在TVUIKit框架中导入新的内容组态 TVMediaItemContent组态和TVMonogramContent组态让我们来看几个如何将这些组态用在你的编码中的范例举例来说要以16:9的宽高比来呈现一系列的媒体项目你可以使用来自 TVMediaItem ContentConfiguration的wideCell 设定它的属性像是图像、标题或是次要文字你也可以配置它来显示标记和播放进度当你完成时将contentConfiguration 指定到你的集合视图单元格就是这么简单如果你想要显示和目前媒体内容相关的人物或角色使用 TVMonogramContentConfiguration 想要更了解内容组态的使用我推荐大家去看2020年WWDC的《最新的单元格组态》最后要讲的是上下文动作上下文动作让你的应用程序在播放期间显示相关的控制要显示上下文动作可以使用AVPlayerViewController的新的contextualActions属性并且提供一个或多个UIActions 一般来说你的应用程序会希望在相关内容段落中来呈现上下文动作要做到这件事可以通过加入周期和边界时间观察器来观察AVPlayer的时间点要隐藏上下文动作重新将属性设定到空的数组上你们有些人可能已经在你的应用程序中实作略过功能的解决方法有了这个新的API 用户和上下文控制的互动能和焦点行为一致而且在使用的时候它也会替你的应用程序维持在“现在播放”状态现在让我们来讲一些在tvOS 使用AVPlayerViewController的最佳实例首先也是最重要的是要避免在播放器中加入多余的手势这会干扰标准播放用户界面而且未来绝对无法使用第二补足遗失的元数据有时候我们会遇到没有将全部元数据嵌入于它资产中的媒体在这些案例中要用AVPlayerItem的 externalMetadata属性来提供所有必要的元数据像是标题、缩图或叙述当你做这件事的时候我们会处理剩下的工作以所有相关的信息来填充标题栏和信息页签最后考虑在你的tvOS应用程序中启用子母画面它能给你的用户多任务处理的灵活性让他们可以同时播放视频以及能够在全屏幕内容和子母画面之间切换要开始使用子母画面我建议大家去看 2020年WWDC的《掌握tvOS上的子母画面》让我们回顾一下有了tvOS 15 可以更轻易地使用标准播放用户界面来建立优异的媒体体验强大的新API 使得AVPlayerViewController 比过去更容易配置也更容易自定义现在就是把它用在你的应用程序上最棒的时机了而且要开始使用它很简单想知道更多信息可以参考开发者app中针对这个课程的补充资源谢谢各位的观看请好好享受今年的大会 ♪

4:42 - Transport Bar Controls Example

let favoriteAction = UIAction(title: "Favorites", image: UIImage(systemName: "heart")) {
    // Add to favorites
}

let submenu = UIMenu(title: "Speed", options: [.displayInline, .singleSelection],
                     children: [ UIAction(…) ])

let menu = UIMenu(image: UIImage(systemName: "gearshape"), children: [submenu, UIAction(…)])
playerViewController.transportBarCustomMenuItems = [favoriteAction, menu]

6:11 - Content Tabs Example

// Initialize content tab view controller

customViewController.preferredContentSize = CGSize(width: 0, height: 140)
customViewController.title = "Recommended"

7:08 - TVMediaItemContentConfiguration Example

// Configure 16:9 UICollectionView cell
import TVUIKit

var contentConfiguration = TVMediaItemContentConfiguration.wideCell()
contentConfiguration.image = UIImage(imageLiteralResourceName: "tanu")
contentConfiguration.text = "Title"
contentConfiguration.secondaryText = "Secondary text"
contentConfiguration.badgeText = "NEW"
contentConfiguration.badgeProperties.backgroundColor = .systemRed
contentConfiguration.playbackProgress = 0.75

cell.contentConfiguration = contentConfiguration

7:36 - TVMonogramContentConfiguration Example

// Configure monogram UICollectionView cell
import TVUIKit

var contentConfiguration = TVMonogramContentConfiguration.cell()
contentConfiguration.image = UIImage(imageLiteralResourceName: "jad")
contentConfiguration.text = "Jad"

cell.contentConfiguration = contentConfiguration

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。