Create a great video playback experience
Media & Web 进阶 20m

打造出色的视频播放体验

Create a great video playback experience

2022年6月6日

在 Apple 官方观看视频

一句话判断

iOS 16 的 AVPlayerViewController 全面重新设计——更现代的 UI、更直觉的触摸交互、原生标题展示和可选倍速播放，你的视频 App 只需要几行代码就能获得这一切。

这场 Session 讲了什么

iOS 和 iPadOS 16 对系统媒体播放器做了从零开始的重新设计。新播放器借鉴了 tvOS 的设计语言，但为触摸设备做了重新思考。

UI 层面的变化：去掉了多余 chrome，播放/暂停和跳进按钮置于核心位置，跳进间隔从 15 秒改为 10 秒。时间轴不再需要拖动滑块——可以从任意位置拖拽。视频填充方式改为双指缩放手势。点击屏幕中心即可播放/暂停，即使在控件隐藏时也有效。滚动视频内容可以快进/快退。

新功能方面：AVPlayerViewController 原生支持展示标题、副标题和描述（通过 AVMetadataItem）。Selectable playback speeds 让用户选择播放速度。还有从 tvOS 移植过来的 Interstitials 支持（广告插播标记）。

Session 后半部分分享了 Apple 设计媒体播放器时的三个核心原则：直觉性（Intuitive）、深度整合（Integrated）、内容优先（Content Forward）。

值得深挖的点

  • 新的触摸交互模型：双指缩放控制视频填充、点击中心播放暂停、滑动时间轴快进。这些交互不需要用户学习——它们遵循了 iOS 的平台范式。如果你做自定义播放器，应该参考这些交互模式。
  • 元数据展示 API：通过 externalMetadata 设置标题（commonIdentifierTitle）、副标题（iTunesMetadataTrackSubtitle）和描述（commonIdentifierDescription）。描述会显示在信息面板中，点击标题旁边的箭头展开。
  • 内容优先的设计原则：所有交互设计都应该围绕”让用户专注于内容”展开。控件的出现和消失时机、手势的自然程度、UI 的干扰程度，都影响这个目标。
  • iPadOS 的完整输入支持：键盘、触控板、鼠标、游戏手柄——全部原生支持。你的 App 不需要额外适配。

代码片段

import AVKit
import AVFoundation

// 配置视频标题和描述
let playerItem = AVPlayerItem(url: videoURL)

// 添加标题
let titleMetadata = AVMutableMetadataItem()
titleMetadata.identifier = .commonIdentifierTitle
titleMetadata.value = "视频标题" as NSString
playerItem.externalMetadata.append(titleMetadata)

// 添加副标题
let subtitleMetadata = AMutableMetadataItem()
subtitleMetadata.identifier = .iTunesMetadataTrackSubtitle
subtitleMetadata.value = "简短描述" as NSString
playerItem.externalMetadata.append(subtitleMetadata)

// 添加详细描述
let descMetadata = AVMutableMetadataItem()
descMetadata.identifier = .commonIdentifierDescription
descMetadata.value = "这里是更详细的内容介绍..." as NSString
playerItem.externalMetadata.append(descMetadata)

// 创建播放器并展示
let player = AVPlayer(playerItem: playerItem)
let playerVC = AVPlayerViewController()
playerVC.player = player
present(playerVC, animated: true)
// 获得全新的系统播放器 UI，支持画中画、SharePlay、视觉分析等

最佳实践

  • 使用 AVPlayerViewController 而非自定义播放器，免费获得系统级功能更新
  • 为视频内容提供标题和描述元数据，让信息面板发挥作用
  • 不要在视频播放界面堆砌按钮——内容优先
  • 测试所有输入方式（触摸、键盘、触控板、遥控器）
  • 竖屏视频和横屏视频都要测试布局效果

还有什么值得关注

  • “What’s new in AVFoundation” 包含了 AVKit 底层的改进细节
  • “Bring Continuity Camera to your macOS app” 是媒体体验系列的另一场
  • 新的播放器 UI 在 Catalyst App 中也自动生效
  • Selectable playback speeds 对教育类和播客类 App 特别有用
WWDC 2022