投放按鈕
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
「投放」按鈕會開啟對話方塊，方便你連線、控制及中斷與網頁接收器的連線。
請參閱「投放圖示」一文，下載「投放」按鈕範本。
請注意，「投放」按鈕不專屬於 Google Cast，可用於代表 Web 和非 Web 接收器 (例如藍牙耳機)。網頁接收器應一律顯示在 Cast 對話方塊下方，絕不會顯示在其他對話方塊、選單或控制項下方。
向現有使用者介紹「投放」按鈕，讓他們知道傳送端應用程式現在支援投放功能，同時也協助 Google Cast 新手。
必要
A 首次提供網頁接收器時，顯示 Cast 簡介畫面。如果是 iOS 傳送者，第一次顯示「投放」按鈕時，請顯示「投放」簡介畫面。
B 圈選 Cast 按鈕，以視覺化方式強調按鈕)
C 說明 Cast 按鈕的運作方式 (例如顯示「輕觸即可將影片投放到電視」等訊息)
Android
Cast 簡介
投放主畫面
iOS
Cast 簡介
投放主畫面
Chrome
Cast 簡介
投放主畫面
必要
A 只要有可播放的內容，投放按鈕就必須顯示在畫面上，且瀏覽或播放內容時，按鈕位置必須一致。也會顯示在 Chrome 的全域控制標頭中。
B 在 Chrome 中，如果沒有可用的網頁接收器，「投放」按鈕可能會隱藏。如果是 Android 和 iOS 傳送端，裝置連上 Wi-Fi 時應一律顯示「投放」按鈕，以便在使用者關閉區域網路存取權，導致裝置無法探索時，提供適當的協助 (詳情請參閱「iOS 權限和探索」)。
C 在行動應用程式中，「投放」按鈕應位於右側。
D 在 Chrome 中，「投放」按鈕應位於內容媒體控制選項的右側 (例如內嵌影片)。如果媒體控制項包含全螢幕按鈕，請將 Cast 按鈕放在該按鈕的左側。
注意
Google Cast 採用多工模式，讓使用者在投放內容時，可以瀏覽傳送端應用程式和其他應用程式。在每個可播放內容的畫面上，都必須顯示 Cast 鍵，這樣使用者就不必費心尋找暫停或停止在電視上播放內容的位置。
Android
傳送者已中斷連線
投放主畫面
iOS
傳送者已中斷連線
投放主畫面
Chrome
傳送者已中斷連線
投放主畫面
必要
A 已中斷連線：如果網頁接收器可用，就會顯示「Cast」按鈕
B 連線中：網頁接收器連線時，「Cast」按鈕圖示會逐步顯示動畫波浪 (詳情請參閱下方附註)
C 已連線：應用程式連線至 Cast 網頁接收器時，「Cast」按鈕會顯示填滿的框架形狀
最佳做法
針對每個按鈕狀態，使用與應用程式其他 UI 元素風格相符的顏色。您也可以選擇為「開啟」/「已連線」狀態使用明顯的醒目顏色 (例如黃色)。
注意事項
- 無論是否有可用的 Cast 裝置，Chrome、Android 和 iOS 都會顯示 Cast 圖示，方便您存取 Cast 擴充功能。
- 如果連線至 Cast API 的時間超出預期，系統會顯示「連線中」動畫狀態 (Android 和 Chrome SDK 會自動為 Cast 圖示加上動畫效果)。連線後，系統會啟動 Web Receiver 應用程式。
- Cast 圖示的「開啟」/「已連線」狀態已更新，現在圖示框架內會填滿實心顏色。如要取得新的 Cast 圖示和圖示範本，請
按這裡。
Android
傳送者，投放已中斷連線
投放主畫面
傳送者，連線中的投放按鈕
投放主畫面
傳送者，投放已連線
載入網頁接收器應用程式
傳送者，投放已連線
已載入 / 閒置的 Web Receiver 應用程式
iOS
傳送者無法使用 Cast
投放主畫面
傳送者，投放已中斷連線
投放主畫面
傳送者，連線中的投放按鈕
投放主畫面
傳送者，投放已連線
載入網頁接收器應用程式
傳送者，投放已連線
已載入 / 閒置的 Web Receiver 應用程式
Chrome
傳送者無法使用 Cast
Chrome 會顯示「投放」圖示，方便你存取 Cast 擴充功能，無論連線狀態為何。
投放主畫面
傳送者，投放已中斷連線
投放主畫面
傳送者，連線中的投放按鈕
投放主畫面
傳送者，投放已連線
載入網頁接收器應用程式
傳送者，投放已連線
已載入 / 閒置的 Web Receiver 應用程式
本設計指南中使用的圖片
由 Blender Foundation 提供，並根據著作權或創用 CC 授權分享。
- Elephant's Dream：(c) copyright 2006, Blender Foundation / Netherlands Media Art Institute /
www.elephantsdream.org
- Sintel：(c) copyright Blender Foundation | www.sintel.org
- 鋼鐵之淚：(CC) Blender Foundation | mango.blender.org
- Big Buck Bunny：(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2025-07-26 (世界標準時間)。
[null,null,["上次更新時間：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"]]
