“投放”按钮会打开一个对话框,供您连接、控制和断开与 Web 接收器的连接。
请参阅投射图标,下载“投射”按钮模板。
请注意,“投射”按钮并非 Google Cast 专用;它可以用来表示网络接收器和非网络接收器(例如蓝牙耳机)。Web 接收器应始终显示在“投射”对话框下方,而绝不应显示在其他对话框、菜单或控件下。
向用户介绍 Cast
引入“投射”按钮不仅有助于现有用户了解发送设备应用现在支持投射功能,而且还有助于初次使用 Google Cast 的用户。
必需
A 在 Web 接收器首次可用时显示 Cast 简介屏幕。对于 iOS 发送器,在“投射”按钮首次出现时显示 Cast 简介屏幕。
B 通过环绕按钮在视觉上突出显示“投射”按钮
C 介绍“投射”按钮的工作原理(例如,显示“轻触即可将视频投放到电视”之类的消息)
Android
Google Cast 简介
![Google Cast 简介](https://developers.google.cn/static/cast/images/a/prompting1_a.png?authuser=5&hl=nb)
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
iOS
Google Cast 简介
![](https://developers.google.cn/static/cast/images/i/prompting1_a.png?authuser=5&hl=nb)
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
Chrome
Google Cast 简介
![Google Cast 简介](https://developers.google.cn/static/cast/images/w/prompting1_a.png?authuser=5&hl=nb)
投放主屏幕
![投放主屏幕](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
“投射”按钮的可用性
必需
A “投射”按钮必须在每个包含可播放内容的屏幕上可见,并且在浏览或播放内容时应位于一致的位置。它还会显示在 Chrome 的标题中,以便进行全局控制。
B 在 Chrome 中,当网络接收器不可用时,可以隐藏“投射”按钮。对于 Android 和 iOS 发送设备,当设备连接到 Wi-Fi 时,应始终显示“投射”按钮,以便在用户关闭本地网络访问权限后无法检测到设备(请参阅 iOS 权限和发现,了解更多详情)。
C 在移动应用中,“投射”按钮应位于右侧。
D 在 Chrome 中,“投射”按钮应位于内容媒体控件的右侧(例如,参见嵌入式视频)。如果媒体控件包含全屏按钮,请将“投射”按钮放在其左侧。
备注
Google Cast 采用多任务模式,使用户可以在投射期间浏览发送器应用和其他应用。必须在具有可播放内容的每个屏幕上都能看到“投射”按钮,以便用户不必四处寻找要暂停或停止电视上播放内容的位置。
Android
发送者已断开连接
![发送者已断开连接](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=5&hl=nb)
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
iOS
发送者已断开连接
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-available1_a.png?authuser=5&hl=nb)
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
Chrome
发送者已断开连接
![发送者已断开连接](https://developers.google.cn/static/cast/images/w/sender-cast-icon-available1_a.png?authuser=5&hl=nb)
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
“投射”按钮的状态
必需
A 已断开连接:当网络接收器可用时,系统会显示“投放”按钮
B 连接:网络接收器连接时,“投放”按钮会以动画形式呈现图标中的波浪(如需了解详情,请参阅下文)
C 已连接:当此应用与“投射”按钮相连时,
最佳实践
对于每种按钮状态,使用与应用中其他界面元素样式一致的颜色。为开启 / 已连接状态使用独特的突出显示颜色(例如黄色)是可选操作。
备注
- Cast 图标会显示在 Chrome、Android 和 iOS 上,以便用户使用 Cast 扩展程序(无论 Cast 设备是否可用)。
- 当连接到 Cast API 的用时超出预期时,系统会显示“正在连接”(动画效果)状态(Android 和 Chrome SDK 会自动为 Cast 图标添加动画效果)。连接后,Web 接收器应用会启动。
- “投放”图标的“开启 / 连接”状态已更新,现在在图标框架内使用纯色填充。新的 Cast 图标和图标模板可在 此处找到。
Android
发送者,投放已断开连接
![发送者,投放已断开连接](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=5&hl=nb)
投放主屏幕
![投放主屏幕](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
发送器,Cast 正在连接
![发送器,Cast 正在连接](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-2-122023.png?authuser=5&hl=nb)
投放主屏幕
![投放主屏幕](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
发送器,Cast 已连接
![发送器,Cast 已连接](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=5&hl=nb)
正在加载 Web 接收器应用
![正在加载 Web 接收器应用](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=5&hl=nb)
发送器,Cast 已连接
![发送器,Cast 已连接](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=5&hl=nb)
网络接收器应用已加载 / 闲置
![网络接收器应用已加载 / 闲置](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=5&hl=nb)
iOS
发送者,无法投放
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states1_a.png?authuser=5&hl=nb)
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
发送者,投放已断开连接
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states2_a.png?authuser=5&hl=nb)
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
发送器,Cast 正在连接
![发送器,Cast 正在连接](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states3_a.png?authuser=5&hl=nb)
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
发送器,Cast 已连接
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=5&hl=nb)
正在加载 Web 接收器应用
![正在加载 Web 接收器应用](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=5&hl=nb)
发送器,Cast 已连接
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=5&hl=nb)
网络接收器应用已加载 / 闲置
![](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=5&hl=nb)
Chrome
发送者,无法投放
![发送者,无法投放](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states1_a.png?authuser=5&hl=nb)
无论连接状态如何,Chrome 中都会显示 Cast 图标,以便用户访问 Cast 扩展程序。
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
发送者,投放已断开连接
![发送者,投放已断开连接](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states2_a.png?authuser=5&hl=nb)
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
发送器,Cast 正在连接
![发送器,Cast 正在连接](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states3_a.png?authuser=5&hl=nb)
投放主屏幕
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=5&hl=nb)
发送器,Cast 已连接
![发送器,Cast 已连接](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=5&hl=nb)
正在加载 Web 接收器应用
![正在加载 Web 接收器应用](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=5&hl=nb)
发送器,Cast 已连接
![发送器,Cast 已连接](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=5&hl=nb)
网络接收器应用已加载 / 闲置
![](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=5&hl=nb)
本设计指南中使用的图片由 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