“投放”按钮
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
“投放”按钮会打开一个对话框，用于连接、控制和断开与 Web 接收器的连接。
如需下载“投放”按钮模板，请参阅投放图标。
请注意，投屏按钮并非 Google Cast 专用，它可用于表示 Web 和非 Web 接收器（例如蓝牙耳机）。Web 接收器应始终显示在“投屏”对话框下，而绝不应显示在其他对话框、菜单或控件下。
引入“投射”按钮有助于现有用户了解发送设备应用现在支持投射，还可以为初次使用 Google Cast 的用户提供帮助。
必需
A 在首次提供 Web 接收器时显示 Cast 简介界面。对于 iOS 发送者，在首次显示“投屏”按钮时显示“投屏”简介界面。
B 通过圈出“投放”按钮，以醒目方式突出显示该按钮)
C 说明“投放”按钮的运作方式（例如，显示“点按即可将视频投放到电视上”等消息）
Android
Cast 简介
投放主屏幕
iOS
Cast 简介
投放主屏幕
Chrome
Cast 简介
投放主屏幕
必需
A 在包含可播放内容的每个界面中，都必须显示“投屏”按钮，并且在浏览或播放内容时，该按钮的位置必须保持一致。它还会显示在 Chrome 的标题中，以便进行全局控制。
B 在 Chrome 中，当 Web 接收器不可用时，投放按钮可能会隐藏。对于 Android 和 iOS 发送者，当设备连接到 Wi-Fi 时，投放按钮应始终显示，以便在用户关闭本地网络访问权限并导致设备无法被发现时提供适当的帮助（如需了解详情，请参阅 iOS 权限和发现）。
C 在移动应用中，“投放”按钮应位于右侧。
D 在 Chrome 中，“投射”按钮应位于内容媒体控件的右侧（例如，请参阅嵌入式视频）。如果媒体控件包含全屏按钮，请将 Cast 按钮放在该按钮的左侧。
备注
Google Cast 采用多任务处理模型，可让用户在投屏时浏览发送设备应用和其他应用。在任何包含可播放内容的屏幕上，都必须显示“投屏”按钮，这样用户就不必费力寻找暂停或停止电视上播放的内容的位置。
Android
发送者已断开连接
投放主屏幕
iOS
发送者已断开连接
投放主屏幕
Chrome
发送者已断开连接
投放主屏幕
必需
A 已断开连接：当有 Web 接收器可用时，系统会显示“投放”按钮
B 正在连接：当 Web 接收器正在连接时，“投放”按钮会逐步为图标中的波浪添加动画效果（详情请参阅下方的注释）
C 已连接：当此应用已连接到 Cast Web 接收器时，其“投放”按钮会显示为实心框架形状
最佳实践
对于每种按钮状态，请使用与应用的其他界面元素风格相符的颜色。对于“开启”/“已连接”状态，您也可以选择使用醒目的突出显示颜色（例如黄色）。
备注
- 无论是否有可用的 Cast 设备，Chrome、Android 和 iOS 上都会显示 Cast 图标，以便用户访问 Cast 扩展程序。
- 当与 Cast API 的连接时间超出预期时，系统会显示“正在连接”（动画）状态（Android 和 Chrome SDK 会自动为“投屏”图标添加动画效果）。连接成功后，Web 接收器应用会启动。
- Cast 图标的“开启 / 已连接”状态已更新，现在使用图标框架内的实心填充。如需获取新的 Cast 图标和图标模板，请点击
此处。
Android
发送者，投放已断开连接
投放主屏幕
发送方，正在连接到 Chromecast
投放主屏幕
发送方，已连接到 Chromecast
Web 接收器应用加载
发送方，已连接到 Chromecast
Web 接收器应用已加载 / 处于空闲状态
iOS
发送者，Cast 不可用
投放主屏幕
发送者，投放已断开连接
投放主屏幕
发送方，正在连接到 Chromecast
投放主屏幕
发送方，已连接到 Chromecast
Web 接收器应用加载
发送方，已连接到 Chromecast
Web 接收器应用已加载 / 处于空闲状态
Chrome
发送者，Cast 不可用
无论连接状态如何，Chrome 中都会显示 Cast 图标，以便访问 Cast 扩展程序。
投放主屏幕
发送者，投放已断开连接
投放主屏幕
发送方，正在连接到 Chromecast
投放主屏幕
发送方，已连接到 Chromecast
Web 接收器应用加载
发送方，已连接到 Chromecast
Web 接收器应用已加载 / 处于空闲状态
本设计指南中使用的图片由 Blender Foundation 提供，并根据版权或知识共享许可进行分享。
- Elephant's Dream：（c）版权所有 2006，Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel：(c) 版权所有 Blender Foundation | www.sintel.org
- 钢铁之泪：(CC) Blender Foundation | mango.blender.org
- 《大雄兔》：(c) 版权所有 2008，Blender Foundation / www.bigbuckbunny.org
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-07-26。
[null,null,["最后更新时间 (UTC)：2025-07-26。"],[[["\u003cp\u003eThe Cast button, used for connecting to Web Receivers and other devices, should be visible on every screen with playable content.\u003c/p\u003e\n"],["\u003cp\u003eUsers should be introduced to the Cast button's functionality with a highlight and explanatory message, especially on first use.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button has distinct visual states (Disconnected, Connecting, Connected) to indicate the connection status.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button should be consistently positioned, typically on the right side of the UI in mobile apps and Chrome's content media controls.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast allows for multitasking, enabling users to browse other apps while casting content.\u003c/p\u003e\n"]]],["The Cast button facilitates connections to Web Receivers, allowing users to control and disconnect. It should be consistently visible on all screens with playable content, positioned on the right in mobile apps and to the left of the fullscreen button in Chrome media controls. The button has distinct states: disconnected, connecting (animated), and connected (filled frame). Users should receive an introduction to the Cast feature, including visual highlights and explanatory messages.\n"],null,["# Cast Button\n\nThe Cast button opens a dialog to connect, control, and disconnect from Web Receivers.\n\nSee [Cast icons](/cast/docs/get-started#download_cast_icons_optional) to download the Cast button templates.\n\nNote that the Cast button is not specific to Google Cast; it can be used to represent both Web\nand non-Web Receivers (like Bluetooth headsets). Web Receivers should always appear under the\nCast dialog, and never under another dialog, menu, or control.\n\n### [Introduce Cast to users](#prompting)\n\nIntroducing the Cast button helps existing users know that the sender app now supports Casting\nand also helps users new to Google Cast.\n\n\n**Required**\n\n\nA Show a Cast introduction screen the first time\nWeb Receivers are available. For iOS senders, show a Cast introduction\nscreen the first time the Cast button appears.\n\n\nB Visually highlight the Cast button by circling the\nbutton)\n\n\nC Explain how the Cast button works (for example,\ndisplaying a message such as \"Touch to cast videos to your TV\") \n\n### Android\n\nCast introduction \nCast home screen \n\n### iOS\n\nCast introduction \nCast home screen \n\n### Chrome\n\nCast introduction \nCast home screen \n\n### [Cast button availability](#sender-cast-icon-available)\n\n\n**Required**\n\n\nA The Cast button must\nbe visible from every screen where there is playable content, and located in a consistent position\nwhile browsing or playing content. It will also appear in Chrome's header for global control.\n\n\nB In Chrome, the Cast button can be hidden\nwhen Web Receivers aren't available. For Android and iOS senders,\nthe Cast button should always display when the device is on Wi-Fi, so proper help can be given\nif the user has turned off local network access and devices become undiscoverable as a result\n(see [iOS Permissions and Discovery](/cast/docs/ios_sender/permissions_and_discovery)\nfor more details).\n\n\nC In mobile apps, the Cast button should be on the right\nside.\n\n\nD In Chrome, the Cast button should be on the right side in\nthe content media controls (for example, see embedded video). If the media controls contain a fullscreen\nbutton, place the Cast button to the left of it.\n\n**Note**\n\nGoogle Cast employs a multi-tasking model, which allows users to browse the sender app and\nother apps while casting. The Cast button must be visible from every screen where there is\nplayable content, so the user doesn't have to hunt to find where to pause or stop the content\nplaying on TV. \n\n### Android\n\nSender disconnected \nCast home screen \n\n### iOS\n\nSender disconnected \nCast home screen \n\n### Chrome\n\nSender disconnected \nCast home screen \n\n### [Cast button states](#sender-cast-icon-states)\n\n\n**Required**\n\n\nA Disconnected: When Web Receivers are available, the\nCast button appears\n\n\nB Connecting: When the Web Receiver is connecting, the\nCast button animates the waves in the icon progressively (for details, see note below)\n\n\nC Connected: When this app is connected to the Cast\nWeb Receiver, its Cast button appears with a filled frame shape\n\n\n**Best practices**\n\n\nFor each of the button states, use colors that match the style of other UI\nelements of your app. Using a distinct highlight color (such as yellow) for the ON / Connected\nstate is optional.\n\n\n**Notes**\n\n- The Cast icon displays on Chrome, Android, and iOS to provide access to the Cast extension regardless of the availability of Cast devices.\n- The Connecting (animated) state appears when the connection to the Cast API takes longer than expected (the Android and Chrome SDK's will automatically animate the Cast icon). Once connected, the Web Receiver app launches.\n- The ON / Connected state of the Cast icon has been updated and now uses a solid fill within the icon frame. The new Cast icon and icon templates are available [here](/cast/docs/get-started#download_cast_icons_optional).\n\n\u003cbr /\u003e\n\n### Android\n\nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### iOS\n\nSender, Cast unavailable \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### Chrome\n\nSender, Cast unavailable\n\nThe Cast icon displays in Chrome to provide access to the Cast extension regardless of the connection state. \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]
