将内容投放到网络接收器后,用户必须始终能通过发送器应用控制这些内容。
注意:根据 Google Cast SDK 附加开发者服务条款,Cast 媒体应用必须使用为 SDK 定义的 Play 控制 API(媒体播放消息),才能控制网络接收器上的媒体播放。
发送器应用应在以下区域提供 Cast 控件:
发送器应用的 Cast 播放状态和控件在这些区域中的控件必须与 Web 接收器上发生的播放更改保持同步,即使不是由发送器应用发起,也是如此。这样,就可以正确处理来自设备遥控器、按钮等的多位发送者命令和播放控件。
投放对话框控件

迷你控制器

通知控件

锁定屏幕控件

投放对话框控件

迷你控制器

投放对话框控件

迷你控制器

发件人音量控制
发送方应用必须允许用户使用发送设备上的硬件音量按钮和/或软件音量滑块来控制电视或音响设备上播放的内容的音量。这些控件可控制以下任一项:
- 针对 Chromecast 等 Google Cast 设备发送到电视的音量。
- Google Cast TV、内置 Android TV 的电视和智能音箱的实际原生电视/音响设备的音量。
必需
A 发送方应用必须允许用户使用发送设备上的硬件音量按钮和/或软件音量滑块来控制电视或音箱上播放的内容的音量。
- Android:必须支持硬件按钮和软件音量滑块。
- iOS:必须使用软件音量滑块。
- Web/Chrome:必须支持软件音量滑块。
B 在移动设备上,在投放内容时,必须在“投射”对话框中提供软件音量滑块。
C 连接到网络接收器后,发送器应用中的音量滑块必须与当前的网络接收器音量同步,并保持同步。
D 发送器应用中的音量滑块必须反映其他发送器或 Chromecast 应用遥控器对音量所做的更改。
E 发送设备应用绝不应将音量设为预定义的音量,而只能通过用户发起的音量更改。
F 仅限 Android 设备:使用硬件按钮更改 Web 接收器上的音量时,按硬件音量按钮时,必须显示视觉音量滑块(左侧带有“投射”图标)。注意:对于 Android Gingerbread(2.3 版),“Cast”图标不会显示。
最佳做法
- 音量增量:
- Android:框架会自动递增音量。
- iOS 和 Chrome:对于硬件音量按钮,请使用不超过网络接收器设备完整音量的 5%(对于音频/视频设备)或等于网络接收器设备完整音量范围的 2%(对于纯音频设备)。
发件人展开的控制器
发送设备应用必须为要投射的内容提供展开的控制器。
必需
A 通过显示内容标题或海报图片来标识正在投射的内容。
B 在播放开始之前,显示加载指示器以及内容标题或海报图片。
C 内容开始时,确定网络接收器状态。
D 提供相关控制措施。
E 在进度条的左端,显示当前的播放时间。
在右端,显示直播的总时长(如果已知且不是直播)。
F 隐藏与投放无关的控件。
G 当用户离开展开的控制器时,请勿断开或停止投射。
H 当用户离开网页时,让用户能够轻松返回展开的控制器。
最佳做法
- 为媒体流提供播放位置滑块。
- 显示与内容相关的其他实用海报图片和元数据。
- 确定媒体流的已播放时长和内容时长。
正在加载发件人内容

正在加载接收器内容

正在播放发送者内容

Web 接收器正在播放内容

正在加载发件人内容

正在加载 Web 接收器内容

正在播放发送者内容

Web 接收器正在播放内容

正在加载发件人内容

正在加载 Web 接收器内容

正在播放发送者内容

Web 接收器正在播放内容

发送器迷你控制器
当用户从当前内容页面或展开的控制器转到发送设备应用中的另一个视图时,应在投放期间显示一个持久性小控制器(称为“迷你控制器”)。迷你控制器是对当前投射内容的可见提醒,并提供对当前投射的即时访问。
必需
用于显示正在投射内容的栏或框会显示在发送器应用底部附近。当用户浏览应用中的其他内容或部分时,这些控件会保留。
B 这些控件在简单且能够传达正在投射的内容时效果最佳。
C 适用于应用的所有屏幕(展开的控制器页面除外)。
D 点按内容区域可打开展开的控制器。
E 提供与立即采取措施相关的任何其他控制措施。
最佳实践
为了提供最佳用户体验,除了迷你控制器,还应在“投射”对话框中提供控件。
发送器迷你控制器

网络接收器内容已暂停

发送器迷你控制器

网络接收器内容已暂停

发送器迷你控制器

网络接收器内容已暂停

发件人通知
必需(仅限 Android)
A 为状态栏中的通知使用应用图标(而非 Cast 图标)。
B 识别正在投射的内容。例如,显示内容标题或海报图片。
C 识别正在投放的网络接收器。
D 提供基本内容控制。
E 在操作行中,提供“X”以停止投射并断开与网络接收器的连接。
F 点按应用徽标、内容标题或图片应该会打开发送方应用的展开控制器。
备注
- 仅限 Android:无法在 iOS 或 Chrome 中实现通知。
- 在 Android Gingerbread(2.3 版)中,通知仅显示应用图标和文本,不显示播放/暂停或停止通知。
- 如需了解详情,请参阅向通知添加媒体控件。
发件人通知图标

Web 接收器正在播放内容

发件人通知控件

Web 接收器正在播放内容

发件人锁定屏幕
必需(仅限 Android)
A 使用内容标题或图片来标识投放的内容。
B 识别正在投放的是哪个网络接收器。请注意,音乐应用不需要执行此操作。
C 提供播放控件。
D 提供通过硬件按钮使用音量控制的权限。
对于 Android 4.4 KitKat 及更高版本是必需的:
- 应用图标
- 海报图片(例如专辑封面)
- 指明文字中正在投射的内容(例如“钢铁之泪”)
- 识别正在投放哪个网络接收器(例如“客厅”)
对于 Android 4.3 Jelly Bean 是必需的:
- 海报图片(例如专辑封面)
- 指明文字中正在投射的内容(例如“钢铁之泪”)
- 识别正在投放哪个网络接收器(例如“客厅”)
备注
- 仅限 Android:无法在 iOS 或 Chrome 中实现通知。
- Android 4.1 及更高版本需要锁定屏幕控件。
- 不同版本的 Android 操作系统提供了不同的控件,并且锁定屏幕只能容纳文本字段。一般来说,图形和图标比文本更能即时描述内容。
- 当手机处于锁定状态时,音量控制硬件按钮应调整发送器应用的音量。
- 该控件必须使用框架组件:
MediaSession
或MediaSessionCompat
(对于版本 4.4 和 4.3)或Notification
(对于版本 5.0 及更高版本)。
发送者锁定屏幕控件

Web 接收器正在播放内容

发送设备恢复投放
已连接的发送器应用应在隐式断开连接(例如网络中断、设备进入休眠状态或电池电量耗尽)后恢复其连接状态。
必需
A 如果发送设备应用隐式断开连接(用户未明确停止投射或断开连接),则投射内容应继续在网络接收器上播放。重启应用或连接时,只要网络接收器会话仍处于当前状态,发送方应用就应恢复与网络接收器的连接。
B “投放”按钮应恢复为连接状态。
C 如果用户在发送器重新连接之前点按“投射”按钮,系统会显示网络接收器设备列表。当用户选择当前正在投放的网络接收器时,发送器应用中应显示一个迷你或展开的控制器。
备注
Web Receiver 应用也可能会由于电源故障或其他脱离上下文的中断而断开连接并停止运行。这被视为普通的会话结束,如发送者停止投射中所述。
选择应用

Web 接收器正在播放内容

投放连接已恢复

Web 接收器正在播放内容

选择应用

Web 接收器正在播放内容

投放连接已恢复

Web 接收器正在播放内容

发送者停止投屏
投射到 TV 的内容会继续播放,直到用户选择“停止投射”或发送方投射新内容。当多个发送器连接到同一网络接收器时,每个发送器应用都应在投射对话框中显示“断开连接”按钮(而不是“停止投射”按钮)。
必需
A 当多个发送器连接到同一网络接收器时,按“停止从某个发送器应用投屏”对网络接收器不会执行任何操作,而且会移除该发送设备上的 Cast 控件和通知。其余已连接的发送设备会保持连接,而 Cast 控件可用。
B 当发送器应用隐式断开连接(例如,发送器设备电池电量耗尽,或发送器设备与网络接收器的网络连接中断)时,它不会对网络接收器执行任何操作,并且会从发送设备移除 Cast 控件和通知。发送器应用应跟踪隐式断开连接,并在再次打开发送器应用时尝试重新连接到网络接收器。
投放对话框,断开连接按钮

Web 接收器正在播放内容

投放对话框,断开连接按钮

Web 接收器正在播放内容

投放对话框,断开连接按钮

Web 接收器正在播放内容

本设计指南中使用的图片由 Blender Foundation 提供,并根据版权或知识共享许可共享。
- 大象之梦:(c) 版权所有 2006,Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel:(c) 版权 Blender Foundation | www.sintel.org
- Tears of Steel:(CC) Blender Foundation | mango.blender.org
- Big Buck Bunny:(c) 版权所有 2008,Blender Foundation / www.bigbuckbunny.org