每次按下「投放」按鈕時,都會顯示「投放」對話方塊。「投放」對話方塊可讓使用者 連線、操控、中斷網路接收端連線。
如果您正在開發自訂實作項目,或建構 iOS 或 Chrome 應用程式,您必須 以一致的方式實作這個對話方塊,方便使用者辨識和信任可執行的功能 在不同裝置、應用程式和平台上保持一致詳情請參閱 如需示例,請參閱參考應用程式。
投放對話方塊,未連線 (有可用的接收器)
必要 (的預設行為)
Android MediaRouter):
A 如果傳送端應用程式未連線至 Cast 接收器,
輕觸「投放」按鈕,顯示「投放」對話方塊
B 「投放」對話方塊標題「投放到」出現
C 「投放」對話方塊顯示可用的網路接收器清單
D 目前投放的每個接收器應該都顯示「投放中」
應用程式名稱」
請注意以下多使用者情境:
- 其他使用者連上目前正在投放內容的接收器 來自相同應用程式和帳戶,寄件者應用程式提供以下控制選項 投放內容
- 其他使用者連上目前正在投放內容的接收器 來自未投放的應用程式 (原先的傳送者應用程式) 便會連線,並連線至新的傳送端應用程式。
Android
投放對話方塊,未連線
![投放對話方塊,未連線的圖片](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-available1_a.png?authuser=2&hl=zh-tw)
投放主畫面
![投放主畫面圖片](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=2&hl=zh-tw)
iOS
投放對話方塊,未連線
![未連接投放對話方塊的圖片](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-available1_a.png?authuser=2&hl=zh-tw)
投放主畫面
![投放主畫面圖片](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=2&hl=zh-tw)
Chrome
投放對話方塊,未連線
![未連接投放對話方塊的圖片](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-menu-available1_a.jpg?authuser=2&hl=zh-tw)
投放主畫面
![投放主畫面圖片](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=2&hl=zh-tw)
「投放」對話方塊,未連線 (僅限 iOS)
如果是 iOS 裝置,使用者首次投放內容時,必須允許系統存取區域網路 (LNA) 投放裝置。系統顯示插頁式廣告資訊畫面 向使用者說明需要這項權限的原因,後面接著標準 Apple LNA 權限對話方塊
首次投放後,如果輕觸「投放」按鈕時找不到裝置 使用者連上 Wi-Fi 時,系統會顯示說明畫面 說明 Web Receiver 無法使用的原因 (例如, 區域網路存取權已停用,或是 Wi-Fi 網路發生問題)。
必要:
A 首次投放:輕觸「投放」按鈕後
首次嘗試
應用程式必須顯示插頁式廣告,向使用者說明為何應該允許
來存取區域網路裝置。插頁式廣告應包括
為何需要存取區域網路,以便提高使用者接受要求的可能性
本機權限。
B 無法使用接收器:輕觸「投放」按鈕
顯示說明畫面,解釋使用者可能的原因
無法找到網路接收器,而且可透過設定連結修正 LNA 權限問題。
首次投放 (iOS)
首次投放:插頁和區域網路存取權限
![投放區域網路存取權的接受流程](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/ios14/iOS14-Enable_LNA_flow1.png?authuser=2&hl=zh-tw)
無法使用接收器
無法使用接收器
![投放流程,區域網路存取權已關閉](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/ios14/iOS14-Enable_LNA_flow2-devicesunavail.png?authuser=2&hl=zh-tw)
投放對話方塊,已連線但未投放
必填
A 傳送者應用程式連線到網路接收端時,
輕觸「投放」按鈕,顯示「投放」對話方塊
B 「投放」對話方塊標題「接收器名稱」出現
C 「投放」對話方塊顯示停止投放的按鈕
且標籤為「停止投放」按鈕(如需進一步瞭解如何中斷連線,請參閱
傳送者停止投放)
Android
投放對話方塊,已連線,但未投放
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-connected1_a.png?authuser=2&hl=zh-tw)
接收端應用程式已載入 / 閒置
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=2&hl=zh-tw)
iOS
投放對話方塊,已連線,但未投放
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-connected1_a.png?authuser=2&hl=zh-tw)
接收端應用程式已載入 / 閒置
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=2&hl=zh-tw)
投放對話方塊時投放對話方塊
必填
A 「投放」對話方塊標題「接收器名稱」出現
B 目前投放的接收器或內容顯示如下
標題
C 「投放」對話方塊顯示「停止投放」停止的按鈕
投放 (詳情請參閱
傳送者停止投放)
最佳做法
- 為獲得最佳使用者體驗,請提供 永久性控制項 以及「投放」對話方塊中的控制項。
Android
投放對話方塊
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-active1_a.png?authuser=2&hl=zh-tw)
接收端播放內容
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=2&hl=zh-tw)
iOS
投放對話方塊
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-active1_a.png?authuser=2&hl=zh-tw)
接收端播放內容
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=2&hl=zh-tw)
Chrome
投放對話方塊
![投放對話方塊](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-menu-active1_a.png?authuser=2&hl=zh-tw)
接收端播放內容
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=2&hl=zh-tw)
本設計指南中使用的圖片 由 Blender Foundation 提供,並依著作權或創用 CC 授權分享。
- 大象的夢想:(c) 著作權 2006,Blender Foundation / 荷蘭媒體藝術研究所 / 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