「投放」按鈕可開啟對話方塊,讓您與 Web 接收器連線、控制及中斷連線。
如要下載「投放」按鈕範本,請參閱投放圖示。
請注意,「投放」按鈕不僅適用於 Google Cast;可用來代表網路和非網路接收器 (例如藍牙耳機)。網路接收器應一律顯示在「投放」對話方塊下方,而且絕不顯示在其他對話方塊、選單或控制項下方。
向使用者介紹投放功能
推出「投放」按鈕,可協助現有使用者瞭解傳送者應用程式現已支援投放功能,也能幫助第一次使用 Google Cast 的使用者。
必要
A 在網路接收器首次可用時顯示投放簡介畫面。如果是 iOS 寄件者,請在首次出現「投放」按鈕時顯示「投放」簡介畫面。
B 循環播放按鈕,以視覺方式醒目顯示「投放」按鈕)
C 說明「投放」按鈕的運作方式,例如顯示「輕觸即可將影片投放到電視」這類訊息
Android
投放簡介
![投放簡介](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/prompting1_a.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
iOS
投放簡介
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/prompting1_a.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
Chrome
投放簡介
![投放簡介](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/prompting1_a.png?authuser=9&hl=zh-tw)
投放主畫面
![投放主畫面](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
投放按鈕支援
必要
A 每個有可播放內容的螢幕都必須顯示「投放」按鈕,而且在瀏覽或播放內容時,也要位於相同的位置。這個名稱也會顯示在 Chrome 的標頭中,以供全域控制。
B 在 Chrome 中,當網路接收器無法使用時,系統可能會隱藏「投放」按鈕,如果是 Android 和 iOS 寄件者,裝置連上 Wi-Fi 時應一律顯示「投放」按鈕,以便在使用者關閉區域網路存取權後,導致裝置無法被偵測時提供適當協助 (詳情請參閱 iOS 權限與探索)。
C 在行動應用程式中,「投放」按鈕應位於右側。
D 在 Chrome 中,「投放」按鈕應位於內容媒體控制項的右側 (例如觀看內嵌影片)。如果媒體控制項包含全螢幕按鈕,請將「投放」按鈕置於左側。
注意
Google Cast 採用多工處理模式,可讓使用者在投放內容時瀏覽傳送端應用程式和其他應用程式。每個有可播放內容的螢幕都必須顯示「投放」按鈕,這樣使用者就不必費心尋找要暫停或停止在電視上播放的內容。
Android
傳送者已中斷
![傳送者已中斷](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
iOS
傳送者已中斷
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-available1_a.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
Chrome
傳送者已中斷
![傳送者已中斷](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-available1_a.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
投放按鈕狀態
必要
A 已中斷連線:網路接收器可用時,「投放」按鈕就會顯示
B 連線:Web 接收器連線時,「投放」按鈕會在圖示中逐步移動波浪 (詳情請參閱下方注意事項)
C 已連線:此應用程式連線到「投放」按鈕時
最佳做法
針對每個按鈕狀態,請使用與應用程式其他 UI 元素樣式一致的顏色。您可以選擇為「開啟 / 已連結」狀態使用獨特的醒目顯示顏色 (例如黃色)。
附註
- Chrome、Android 和 iOS 上顯示的「投放」圖示會顯示在 Chrome、Android 和 iOS 上,方便使用者存取 Cast 擴充功能 (無論投放裝置為何)。
- 如果連線至 Cast API 的時間超出預期,系統就會顯示「連線 (動畫)」狀態 (Android 和 Chrome SDK 會自動以動畫方式顯示「投放」圖示)。連線後,Web Receiver 應用程式會啟動。
- 「投放」圖示的「開啟」/「已連線」狀態已更新,現在圖示框內使用的是實心填滿狀態。您可以前往 這裡取得新的投放圖示和圖示範本。
Android
傳送者,投放功能已中斷
![傳送者,投放功能已中斷](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=9&hl=zh-tw)
投放主畫面
![投放主畫面](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
寄件者,投放中
![寄件者,投放中](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-2-122023.png?authuser=9&hl=zh-tw)
投放主畫面
![投放主畫面](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
傳送者,已連接投放
![傳送者,已連接投放](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=9&hl=zh-tw)
網路接收器應用程式載入
![網路接收器應用程式載入](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=9&hl=zh-tw)
傳送者,已連接投放
![傳送者,已連接投放](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=9&hl=zh-tw)
網路接收器應用程式載入 / 閒置
![網路接收器應用程式載入 / 閒置](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=9&hl=zh-tw)
iOS
寄件者,無法投放
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states1_a.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
傳送者,投放功能已中斷
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2_a.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
寄件者,投放中
![寄件者,投放中](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states3_a.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
傳送者,已連接投放
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=9&hl=zh-tw)
網路接收器應用程式載入
![網路接收器應用程式載入](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=9&hl=zh-tw)
傳送者,已連接投放
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=9&hl=zh-tw)
網路接收器應用程式載入 / 閒置
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=9&hl=zh-tw)
Chrome
寄件者,無法投放
![寄件者,無法投放](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states1_a.png?authuser=9&hl=zh-tw)
無論連線狀態為何,Chrome 都會顯示「投放」圖示,方便使用者存取 Cast 擴充功能。
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
傳送者,投放功能已中斷
![傳送者,投放功能已中斷](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2_a.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
寄件者,投放中
![寄件者,投放中](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states3_a.png?authuser=9&hl=zh-tw)
投放主畫面
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=9&hl=zh-tw)
傳送者,已連接投放
![傳送者,已連接投放](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=9&hl=zh-tw)
網路接收器應用程式載入
![網路接收器應用程式載入](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=9&hl=zh-tw)
傳送者,已連接投放
![傳送者,已連接投放](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=9&hl=zh-tw)
網路接收器應用程式載入 / 閒置
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=9&hl=zh-tw)
這份設計指南中使用的圖片是由 Blender Foundation 提供,並依版權或創用 CC 授權分享。
- 大象的夢幻:(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