O botão "Transmitir" abre uma caixa de diálogo para conectar, controlar e desconectar dos receptores da Web.
Consulte Ícones do Google Cast para fazer o download dos modelos do botão Transmitir.
O botão "Transmitir" não é específico do Google Cast. Ele pode ser usado para representar receptores da Web e de outros tipos (como fones de ouvido Bluetooth). Os receptores da Web precisam sempre aparecer na caixa de diálogo "Transmitir", nunca em outra caixa de diálogo, menu ou controle.
Apresentar o Google Cast aos usuários
A introdução do botão Transmitir ajuda os usuários existentes a saber que o app remetente agora é compatível com a transmissão e também ajuda usuários novos no Google Cast.
Obrigatório
A Mostrar uma tela de apresentação do Google Cast na primeira vez que os receptores da Web estiverem disponíveis. Para remetentes de iOS, mostre uma tela de introdução ao Google Cast na primeira vez que o botão Transmitir aparecer.
B Destaque visualmente o botão Transmitir ao cercar o
botão
C Explique como o botão Transmitir funciona (por exemplo,
exibindo uma mensagem como "Toque para transmitir vídeos na TV")
Android
Transmitir introdução
![Transmitir introdução](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/prompting1_a.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
iOS
Transmitir introdução
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/prompting1_a.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Chrome
Transmitir introdução
![Transmitir introdução](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/prompting1_a.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![Tela inicial do Google Cast](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Disponibilidade do botão Transmitir
Obrigatório
A O botão Transmitir precisa
estar visível em todas as telas em que haja conteúdo reproduzível e estar localizado em uma posição consistente
durante a navegação ou reprodução do conteúdo. Ele também aparece no cabeçalho do Chrome para controle global.
B No Chrome, o botão Transmitir pode ficar oculto
quando os receptores da Web não estiverem disponíveis. Para remetentes do Android e do iOS,
o botão "Transmitir" precisa sempre ser exibido quando o dispositivo estiver conectado ao Wi-Fi. Assim, a ajuda adequada poderá ser dada
se o usuário tiver desativado o acesso à rede local e os dispositivos se tornarem não detectáveis como resultado
(consulte Permissões e descoberta do iOS
para mais detalhes).
C Em apps para dispositivos móveis, o botão Transmitir precisa estar no lado direito.
D No Chrome, o botão Transmitir precisa estar no lado direito dos
controles de mídia de conteúdo (por exemplo, veja o vídeo incorporado). Se os controles de mídia tiverem um botão de tela cheia, coloque o botão Transmitir à esquerda dele.
Observação
O Google Cast utiliza um modelo multitarefas, que permite aos usuários procurar pelo app remetente e por outros apps durante a transmissão. O botão "Transmitir" precisa estar visível em todas as telas em que haja conteúdo reproduzível para que o usuário não precise procurar onde pausar ou interromper o conteúdo que está sendo reproduzido na TV.
Android
Remetente desconectado
![Remetente desconectado](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
iOS
Remetente desconectado
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-available1_a.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Chrome
Remetente desconectado
![Remetente desconectado](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-available1_a.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Estados do botão Transmitir
Obrigatório
A Desconectado: quando os receptores da Web estiverem disponíveis, o
botão Transmitir será exibido
B Conectando: quando o Web Receiver estiver conectado, o
botão "Transmitir" animará as ondas no ícone progressivamente (para mais detalhes, veja a observação abaixo)
C Conectado: quando o app é conectado à forma do frame com um receptor da Web preenchido, o botão "Transmitir" é exibido.
Práticas recomendadas
Para cada estado do botão, use cores que correspondam ao estilo de outros elementos
da interface do seu app. O uso de uma cor de destaque distinta (como amarelo) para o estado
ATIVADO / Conectado é opcional.
Observações
- O ícone do Google Cast é exibido no Chrome, no Android e no iOS para conceder acesso à extensão do Google Cast, seja qual for a disponibilidade dos dispositivos com Google Cast.
- O estado "Conectando" (animado) aparece quando a conexão com a API Cast demora mais que o esperado (os SDKs do Android e do Chrome animam o ícone do Google Cast automaticamente). Depois de conectado, o app Web Receiver é iniciado.
- O estado ATIVADO / Conectado do ícone do Google Cast foi atualizado e agora usa um preenchimento sólido dentro do frame do ícone. Os novos ícones do Google Cast e modelos de ícones estão disponíveis aqui.
Android
Remetente, transmissão desconectada
![Remetente, transmissão desconectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![Transmitir tela inicial](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Remetente, conexão da transmissão
![Remetente, conexão da transmissão](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-2-122023.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![Transmitir tela inicial](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Remetente, transmissão conectada
![Remetente, transmissão conectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=7&hl=pt-br)
Carregando app receptor da Web
![Carregando app receptor da Web](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=7&hl=pt-br)
Remetente, transmissão conectada
![Remetente, transmissão conectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=7&hl=pt-br)
App receptor da Web carregado / inativo
![App receptor da Web carregado / inativo](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=7&hl=pt-br)
iOS
Remetente, transmissão indisponível
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states1_a.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Remetente, transmissão desconectada
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2_a.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Remetente, conexão da transmissão
![Remetente, conexão da transmissão](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states3_a.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Remetente, transmissão conectada
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=7&hl=pt-br)
Carregando app receptor da Web
![Carregando app receptor da Web](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=7&hl=pt-br)
Remetente, transmissão conectada
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=7&hl=pt-br)
App receptor da Web carregado / inativo
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=7&hl=pt-br)
Chrome
Remetente, transmissão indisponível
![Remetente, transmissão indisponível](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states1_a.png?authuser=7&hl=pt-br)
O ícone do Google Cast é exibido no Chrome para dar acesso à extensão do Google Cast, independentemente do estado da conexão.
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Remetente, transmissão desconectada
![Remetente, transmissão desconectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2_a.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Remetente, conexão da transmissão
![Remetente, conexão da transmissão](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states3_a.png?authuser=7&hl=pt-br)
Transmitir tela inicial
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=7&hl=pt-br)
Remetente, transmissão conectada
![Remetente, transmissão conectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=7&hl=pt-br)
Carregando app receptor da Web
![Carregando app receptor da Web](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=7&hl=pt-br)
Remetente, transmissão conectada
![Remetente, transmissão conectada](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=7&hl=pt-br)
App receptor da Web carregado / inativo
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=7&hl=pt-br)
As imagens usadas neste guia de design são cortesia da Blender Foundation, compartilhadas sob direitos autorais ou licença Creative Commons.
- Elephant's Dream: (c) copyright 2006, Blender Foundation / English 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) direitos autorais 2008, Blender Foundation / www.bigbuckbunny.org