Before a Cast session can begin, both the sender device (for example, a mobile phone or tablet) and the receiver device (for example, a Chromecast plugged into a TV) must be connected to the same Wi-Fi network.
Cast sequence
There are two ways users can start a Cast session:
1. Connect & play: Connect to a Web Receiver before playing content,
content starts from the beginning
2. Play & connect: Connect to a Web Receiver while playing content,
content starts on the Web Receiver at its current position on sender device
1. Connect & play
Android
Tap the Cast button
![](https://developers.google.cn/static/cast/images/a/connect-and-play1.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=8)
Select a receiver
![](https://developers.google.cn/static/cast/images/a/connect-and-play2.png?authuser=8)
Web Receiver app loading
![Web Receiver app loading](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=8)
Play the content
![](https://developers.google.cn/static/cast/images/a/connect-and-play3.png?authuser=8)
Web Receiver playing content
![](https://developers.google.cn/static/cast/images/r/receiver-content-playing1.png?authuser=8)
iOS
Tap the Cast button
![](https://developers.google.cn/static/cast/images/i/connect-and-play1.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=8)
Select a receiver
![](https://developers.google.cn/static/cast/images/i/connect-and-play2.png?authuser=8)
Web Receiver app loading
![Web Receiver app loading](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=8)
Play the content
![](https://developers.google.cn/static/cast/images/i/connect-and-play3.png?authuser=8)
Web Receiver playing content
![](https://developers.google.cn/static/cast/images/r/receiver-content-playing1.png?authuser=8)
Chrome
Tap the Cast button
![Tap the Cast button](https://developers.google.cn/static/cast/images/w/connect-and-play1.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=8)
Select a receiver
![Select a receiver](https://developers.google.cn/static/cast/images/w/connect-and-play2.png?authuser=8)
Web Receiver app loading
![Web Receiver app loading](https://developers.google.cn/static/cast/images/r/receiver-player-loading1.png?authuser=8)
Play the content
![Play the content](https://developers.google.cn/static/cast/images/w/connect-and-play3.png?authuser=8)
Web Receiver playing content
![](https://developers.google.cn/static/cast/images/r/receiver-content-playing1.png?authuser=8)
2. Play & connect
Android
Play the content
![](https://developers.google.cn/static/cast/images/a/play-and-connect1.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=8)
Tap the Cast button
![](https://developers.google.cn/static/cast/images/a/play-and-connect2.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=8)
Select a receiver
![](https://developers.google.cn/static/cast/images/a/play-and-connect3.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=8)
Cast connected
![](https://developers.google.cn/static/cast/images/a/play-and-connect-castConnected.png?authuser=8)
Web Receiver playing content
![](https://developers.google.cn/static/cast/images/r/receiver-content-playing1.png?authuser=8)
iOS
Play the content
![](https://developers.google.cn/static/cast/images/i/play-and-connect1.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=8)
Tap the Cast button
![](https://developers.google.cn/static/cast/images/i/play-and-connect2.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=8)
Select a receiver
![](https://developers.google.cn/static/cast/images/i/play-and-connect3.png?authuser=8)
Web Receiver playing content
![](https://developers.google.cn/static/cast/images/r/receiver-content-playing1.png?authuser=8)
Chrome
Play the content
![Play the content](https://developers.google.cn/static/cast/images/w/play-and-connect1.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=8)
Tap the Cast button
![Tap the Cast button](https://developers.google.cn/static/cast/images/w/play-and-connect2.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=8)
Select a receiver
![Select a receiver](https://developers.google.cn/static/cast/images/w/play-and-connect3.png?authuser=8)
Web Receiver playing content
![](https://developers.google.cn/static/cast/images/r/receiver-content-playing1.png?authuser=8)
Cast home screen
On Chromecast, a home screen with photos, time and device status appears when no sender devices are connected. When Web Receiver apps stop running, the home screen is shown.
For more information about how Web Receiver apps stop running, see:
Android
Sender disconnected
![](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states2.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home1.png?authuser=8)
iOS
Sender disconnected
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states2.png?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home1.png?authuser=8)
Chrome
Sender disconnected
![](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states2.jpg?authuser=8)
Cast home screen
![](https://developers.google.cn/static/cast/images/r/receiver-home1.png?authuser=8)
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