The receiver plays content on devices that may or may not have touch control capabilities. The receiver must respond immediately to actions in the sender app as well as through touch controls.
Examples of receiver UI feedback:
- Playing
- Paused
- Playback position / seeking
- Buffering
Receiver UI
Required
A For video and audio receivers, build the receiver app to
be adaptive so that it can adapt to any screen resolution and aspect ratio.
Video
Video Receiver UI
![](https://developers.google.cn/static/cast/images/r/touch-receiver-adaptiveui-video.png?authuser=9)
Audio
Audio Receiver UI
![](https://developers.google.cn/static/cast/images/r/touch-receiver-adaptiveui-audio.png?authuser=9)
B For video and audio receivers, do not display elements
that suggest touch gestures. For example, do not display peeking elements to indicate swipe
gestures.
C For video and audio receivers, do not display any
elements that would suggest touch interactions.
D For audio receivers, do not display any control-type
elements like progress bars.
Don't: Display peeking elements, icons which can look like
buttons, or control-type elements.
E For video receivers, do not display any metadata or control elements on the receiver during playback including while in a paused state, so that it does not conflict with the controls displayed by the system.
Don't: Display metadata and controls
F For audio receivers, place all metadata elements above the protected area so that it does not overlap with the controls displayed by the system.
Best practices
- All text should be legible from a distance of 5 to 10 feet from the display unit.
Receiver app idle
An idle screen is displayed on the receiver when the receiver is in the foreground but no content is playing.
Required
A Identify which receiver app is loaded
by using the app logo.
B Place all elements including any app logos above the
protected area so that it does not overlap with any controls displayed by the system.
Best practices
- Identify that the app is loaded by displaying "Ready to cast" text.
- Stop the receiver from running if idle for 5 minutes and disconnect any connected sender apps. When stopped, the device home screen appears and will help prevent screen burn.
Receiver app loading
When a user connects to a receiver, the receiver app must first load before it can display the app idle state or begin playing content.
Required
A Identify which receiver app is loading by displaying
the app logo.
B Identify that the receiver app is loading by
displaying an animated loading spinner.
Receiver content loading
While content is loading and before playback begins, the receiver should display info to indicate content is loading.
Required
A Identify what content is being loaded by displaying the
content title or artwork.
B Identify that content is loading by displaying
an animated loading spinner.
Best practices
When resuming content, rewind playback 5-10 seconds so the viewer doesn't miss anything
during the transition from sender to receiver.
Receiver playback
Required
A For video receivers, do not display any elements during
playback. On screen tap, the system will display the player controls.
B For audio receivers, place all metadata elements above
the protected area and do not display any control elements. On screen tap, the system will display
the player controls.
Video
User taps screen to display player controls.
![](https://developers.google.cn/static/cast/images/r/touch-receiver-displaycontrols-video.gif?authuser=9)
Audio
User taps screen to display player controls.
![](https://developers.google.cn/static/cast/images/r/touch-receiver-displaycontrols-audio.gif?authuser=9)
Receiver paused
Required
A For video receivers, do not display any elements while in
a paused state. The system will display the player controls with a play button to indicate
playback is paused.
B For audio receivers, do not display any control elements
while in a paused state. The system will display the player controls with a play button to
indicate playback is paused.
Best practices
- The receiver app should not continue content playback unless there is an explicit request from the user to begin playback such as resume, or skipping an item on the queue.
- Stop receiver from running if idle for 20 minutes and disconnect any connected sender apps. When stopped, the device home screen appears and will help prevent screen burn.
- Ensure alignment with future implementation of background sessions.
- If applicable, when the receiver is stopped due to idle time, store the paused location so that the user can resume playback from that point at a later time.
Video
Video paused
![](https://developers.google.cn/static/cast/images/r/touch-receiver-paused-video.png?authuser=9)
Audio
Audio paused
![](https://developers.google.cn/static/cast/images/r/touch-receiver-paused-audio.png?authuser=9)
Receiver buffering
Buffering on the receiver happens when network latency or other factors cause a delay in playback.
Required
A Do not display any elements even if the
buffering continues for several seconds. Users can tap on the screen to display the player
controls or swipe to go back.
Video
Receiver buffering
![](https://developers.google.cn/static/cast/images/r/touch-receiver-buffering-video.gif?authuser=9)
Audio
Receiver buffering
![](https://developers.google.cn/static/cast/images/r/touch-receiver-buffering-audio.gif?authuser=9)
Receiver stops cast
When playback stops or times out, the receiver will display the receiver idle UI.
Required
A Identify which receiver app is loaded or idle by
displaying an app logo.
B Place all elements including any app logos above the
protected area so that it does not overlap with any controls displayed by the system.
Best practices
- Disconnect from the receiver app and stop it from running if idle for 5 minutes. When stopped, the receiver home screen appears and will help prevent screen burn.
Images used in this design guide are courtesy of the Blender Foundation, shared under copyright or Creative Commons license.
- 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