レシーバーは、タップ操作機能を搭載しているかどうかにかかわらず、デバイスでコンテンツを再生します。レシーバーは、送信側アプリとタップ操作での操作に即座に応答する必要があります。
レシーバー UI フィードバックの例:
- 再生中
- 一時停止
- 再生位置 / 移動
- バッファリング
レシーバー UI
必須
A ビデオ レシーバとオーディオ レシーバの場合、任意の画面解像度とアスペクト比に適応できるように適応性のあるレシーバ アプリを作成します。
動画
動画レシーバーの UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/touch-receiver-adaptiveui-video.png?authuser=0000&hl=ja)
音声
オーディオ レシーバーの UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/touch-receiver-adaptiveui-audio.png?authuser=0000&hl=ja)
B ビデオ レシーバとオーディオ レシーバには、タッチ操作を提案する要素を表示しないでください。たとえば、スワイプ操作を示すピーク要素を表示しないでください。
C ビデオ レシーバーとオーディオ レシーバーには、タップ操作を提案する要素を表示しないでください。
D オーディオ レシーバーの場合は、進行状況バーなどのコントロール タイプの要素を表示しないでください。
すべきでないこと: ピーク要素、ボタンに見えるアイコン、コントロール タイプの要素を表示する。
E 動画レシーバーの場合は、システムによって表示されるコントロールと競合しないように、一時停止状態の場合を含め、再生中にレシーバーにメタデータやコントロール要素を表示しないでください。
禁止事項: メタデータとコントロールを表示する
F オーディオ レシーバーの場合は、システムによって表示されるコントロールと重ならないように、すべてのメタデータ要素を保護領域の上に配置します。
運用のヒント
- すべてのテキストは、ディスプレイ ユニットから 1.5 ~ 3 m の距離で判読できる必要があります。
レシーバー アプリがアイドル状態
レシーバーがフォアグラウンドにあり、コンテンツが再生されていない場合、レシーバーにアイドル状態の画面が表示されます。
必須
A アプリのロゴを使用して、どのレシーバー アプリが読み込まれるかを特定します。
B システムによって表示されるコントロールと重ならないように、アプリのロゴを含むすべての要素を保護領域の上に配置します。
運用のヒント
- [キャスト準備完了] というテキストが表示され、アプリが読み込まれたことを確認できます。
- レシーバーが 5 分間アイドル状態の場合は、実行を停止し、接続されている送信側アプリをすべて切断します。デバイスが停止すると、デバイスのホーム画面が表示され、画面の焼き付きを防ぐことができます。
レシーバー アプリの読み込み
ユーザーがレシーバに接続したとき、レシーバ アプリはまず読み込みを行ってから、アプリのアイドル状態を表示するか、コンテンツの再生を開始する必要があります。
必須
A アプリのロゴを表示することで、どのレシーバー アプリが読み込まれているかを特定できます。
B 読み込みスピナーをアニメーションで表示することで、レシーバー アプリが読み込み中であることを示します。
レシーバーのコンテンツを読み込んでいます
レシーバーは、コンテンツの読み込み中に再生が開始される前に、コンテンツが読み込み中であることを示す情報を表示する必要があります。
必須
A コンテンツのタイトルまたはアートワークを表示して、どのコンテンツが読み込まれているかを特定します。
B 読み込みスピナーのアニメーションを表示して、コンテンツが読み込み中であることを示します。
おすすめの方法
コンテンツを再開するときは、センダーからレシーバーへの移行中に視聴者が何も見逃さないよう、再生を 5 ~ 10 秒巻き戻します。
レシーバーの再生
必須
A 動画レシーバーでは、再生中に要素を表示しないでください。画面をタップすると、プレーヤー コントロールが表示されます。
B オーディオ レシーバーの場合は、すべてのメタデータ要素を保護領域の上に配置し、コントロール要素を表示しないようにします。画面をタップすると、プレーヤー コントロールが表示されます。
動画
ユーザーが画面をタップしてプレーヤー コントロールを表示します。
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/touch-receiver-displaycontrols-video.gif?authuser=0000&hl=ja)
音声
ユーザーが画面をタップしてプレーヤー コントロールを表示します。
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/touch-receiver-displaycontrols-audio.gif?authuser=0000&hl=ja)
レシーバーを一時停止
必須
A 動画レシーバーでは、一時停止状態のときに要素を表示しないでください。プレーヤー コントロールが表示され、再生が一時停止したことを示す再生ボタンが表示されます。
B オーディオ レシーバーの場合、一時停止状態のときにコントロール要素を表示しないでください。プレーヤー コントロールが表示され、再生が一時停止したことを示す再生ボタンが表示されます。
運用のヒント
- レジュームやキューのアイテムのスキップなど、再生開始の明示的なリクエストがある場合を除き、レシーバー アプリはコンテンツの再生を続行してはなりません。
- 20 分間アイドル状態の場合はレシーバーの実行を停止し、接続されている送信側アプリをすべて切断します。デバイスが停止すると、デバイスのホーム画面が表示され、画面の焼き付きを防ぐのに役立ちます。
- バックグラウンド セッションの今後の実装との連携を確保する。
- 該当する場合、アイドル時間が原因でレシーバーが停止した場合、一時停止した場所を保存し、ユーザーが後でその時点から再生を再開できるようにします。
動画
動画が一時停止しました
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/touch-receiver-paused-video.png?authuser=0000&hl=ja)
音声
音声を一時停止しました
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/touch-receiver-paused-audio.png?authuser=0000&hl=ja)
レシーバー バッファリング
ネットワーク レイテンシなどの要因によって再生が遅延すると、レシーバーでのバッファリングが発生します。
必須
A バッファリングが数秒間続いたとしても、要素を表示しません。ユーザーは画面をタップしてプレーヤー コントロールを表示したり、スワイプして戻ることができます。
動画
レシーバー バッファリング
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/touch-receiver-buffering-video.gif?authuser=0000&hl=ja)
音声
レシーバー バッファリング
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/touch-receiver-buffering-audio.gif?authuser=0000&hl=ja)
レシーバーがキャストを停止する
再生が停止またはタイムアウトすると、レシーバーはアイドル状態の UI を表示します。
必須
A アプリのロゴを表示することで、どのレシーバー アプリが読み込まれているか、またはアイドル状態になっているかを識別できます。
B システムによって表示されるコントロールと重ならないように、アプリのロゴを含むすべての要素を保護領域の上に配置します。
運用のヒント
- レシーバー アプリの接続を解除し、アイドル状態が 5 分間続いたら実行を停止します。 停止すると、レシーバーのホーム画面が表示され、画面の焼き付きを防ぐのに役立ちます。
このデザインガイドで使用されている画像は、Blender Foundation により著作権またはクリエイティブ・コモンズ ライセンスに基づいて共有されているものです。
- Elephant's Dream: (c)copyright 2006、Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel: (c)copyright Blender Foundation | www.sintel.org
- Tears of Steel: (CC)Blender Foundation | mango.blender.org
- Big Buck Bunny: (c)copyright 2008、Blender Foundation / www.bigbuckbunny.org