Botão Transmitir
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O botão "Transmitir" abre uma caixa de diálogo para conectar, controlar e desconectar dos receptores da Web.
Consulte Ícones de transmissão para baixar os modelos de botão de transmissão.
O botão "Transmitir" não é específico do Google Cast. Ele pode ser usado para representar receptores da Web e não da Web (como fones de ouvido Bluetooth). Os receptores da Web sempre devem aparecer na caixa de diálogo do Cast, nunca em outra caixa de diálogo, menu ou controle.
A introdução do botão "Transmitir" ajuda os usuários atuais a saber que o app remetente agora é compatível com transmissões e também ajuda os usuários novos no Google Cast.
Obrigatório
A Mostrar uma tela de introdução do Cast na primeira vez
que os receptores da Web estiverem disponíveis. Para remetentes iOS, mostre uma tela de introdução ao Cast na primeira vez que o botão aparecer.
B Destaque visualmente o botão Transmitir circulando o
botão)
C Explique como o botão Transmitir funciona (por exemplo,
mostrando uma mensagem como "Toque para transmitir vídeos para a TV")
Android
Introdução ao Cast
Transmitir a tela inicial
iOS
Introdução ao Cast
Transmitir a tela inicial
Chrome
Introdução ao Cast
Transmitir a tela inicial
Obrigatório
A O botão Transmitir precisa
estar visível em todas as telas com conteúdo reproduzível e localizado em uma posição consistente
durante a navegação ou reprodução de conteúdo. Ele também vai aparecer 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 estão disponíveis. Para remetentes Android e iOS, o botão Cast sempre vai aparecer quando o dispositivo estiver conectado ao Wi-Fi. Assim, é possível oferecer a ajuda adequada se o usuário tiver desativado o acesso à rede local e os dispositivos não puderem ser descobertos 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 do lado
direito.
D No Chrome, o botão Transmitir fica no lado direito dos controles de mídia do 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 do Cast à esquerda dele.
Observação
O Google Cast usa um modelo multitarefa, que permite aos usuários navegar no app remetente e em
outros apps durante a transmissão. O botão Cast precisa estar visível em todas as telas com
conteúdo reproduzível. Assim, o usuário não precisa procurar onde pausar ou interromper o conteúdo
que está sendo reproduzido na TV.
Android
O remetente se desconectou
Transmitir a tela inicial
iOS
O remetente se desconectou
Transmitir a tela inicial
Chrome
O remetente se desconectou
Transmitir a tela inicial
Obrigatório
A Desconectado: quando os receptores da Web estão disponíveis, o
botão Transmitir aparece
B Conectando: quando o receptor da Web está se conectando, o
botão Transmitir anima as ondas no ícone progressivamente. Para mais detalhes, consulte a observação abaixo.
C Conectado: quando este app está conectado ao receptor
da Web do Cast, o botão Transmitir aparece com um formato de quadro preenchido.
Práticas recomendadas
Para cada um dos estados do botão, use cores que correspondam ao estilo de outros elementos
da interface do seu app. Usar uma cor de destaque distinta (como amarelo) para o estado
ATIVADO / Conectado é opcional.
Observações
- O ícone do Cast aparece no Chrome, no Android e no iOS para dar acesso à extensão do Cast
independente da disponibilidade de dispositivos Cast.
- O estado "Conectando" (animado) aparece quando a conexão com a API Cast leva mais tempo do que o esperado. Os SDKs do Android e do Chrome animam automaticamente o ícone do Cast. Depois de conectado, o app Web Receiver é iniciado.
- O estado ATIVADO / Conectado do ícone do Cast foi atualizado e agora usa um preenchimento sólido no
frame do ícone. O novo ícone do Google Cast e os modelos de ícones estão disponíveis
aqui.
Android
Remetente, Transmitir desconectado
Transmitir a tela inicial
Remetente, Conectando ao Cast
Transmitir a tela inicial
Remetente, Transmitir conectado
Carregamento do app Web Receiver
Remetente, Transmitir conectado
App Web Receiver carregado / inativo
iOS
Remetente, Cast indisponível
Transmitir a tela inicial
Remetente, Transmitir desconectado
Transmitir a tela inicial
Remetente, Conectando ao Cast
Transmitir a tela inicial
Remetente, Transmitir conectado
Carregamento do app Web Receiver
Remetente, Transmitir conectado
App Web Receiver carregado / inativo
Chrome
Remetente, Cast indisponível
O ícone do Cast aparece no Chrome para dar acesso à extensão do Cast
independente do estado da conexão.
Transmitir a tela inicial
Remetente, Transmitir desconectado
Transmitir a tela inicial
Remetente, Conectando ao Cast
Transmitir a tela inicial
Remetente, Transmitir conectado
Carregamento do app Web Receiver
Remetente, Transmitir conectado
App Web Receiver carregado / inativo
As imagens usadas neste guia de design
são cortesia da Blender Foundation e foram compartilhadas sob direitos autorais ou licença Creative Commons.
- 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
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2025-07-26 UTC.
[null,null,["Última atualização 2025-07-26 UTC."],[[["\u003cp\u003eThe Cast button, used for connecting to Web Receivers and other devices, should be visible on every screen with playable content.\u003c/p\u003e\n"],["\u003cp\u003eUsers should be introduced to the Cast button's functionality with a highlight and explanatory message, especially on first use.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button has distinct visual states (Disconnected, Connecting, Connected) to indicate the connection status.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button should be consistently positioned, typically on the right side of the UI in mobile apps and Chrome's content media controls.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast allows for multitasking, enabling users to browse other apps while casting content.\u003c/p\u003e\n"]]],["The Cast button facilitates connections to Web Receivers, allowing users to control and disconnect. It should be consistently visible on all screens with playable content, positioned on the right in mobile apps and to the left of the fullscreen button in Chrome media controls. The button has distinct states: disconnected, connecting (animated), and connected (filled frame). Users should receive an introduction to the Cast feature, including visual highlights and explanatory messages.\n"],null,["# Cast Button\n\nThe Cast button opens a dialog to connect, control, and disconnect from Web Receivers.\n\nSee [Cast icons](/cast/docs/get-started#download_cast_icons_optional) to download the Cast button templates.\n\nNote that the Cast button is not specific to Google Cast; it can be used to represent both Web\nand non-Web Receivers (like Bluetooth headsets). Web Receivers should always appear under the\nCast dialog, and never under another dialog, menu, or control.\n\n### [Introduce Cast to users](#prompting)\n\nIntroducing the Cast button helps existing users know that the sender app now supports Casting\nand also helps users new to Google Cast.\n\n\n**Required**\n\n\nA Show a Cast introduction screen the first time\nWeb Receivers are available. For iOS senders, show a Cast introduction\nscreen the first time the Cast button appears.\n\n\nB Visually highlight the Cast button by circling the\nbutton)\n\n\nC Explain how the Cast button works (for example,\ndisplaying a message such as \"Touch to cast videos to your TV\") \n\n### Android\n\nCast introduction \nCast home screen \n\n### iOS\n\nCast introduction \nCast home screen \n\n### Chrome\n\nCast introduction \nCast home screen \n\n### [Cast button availability](#sender-cast-icon-available)\n\n\n**Required**\n\n\nA The Cast button must\nbe visible from every screen where there is playable content, and located in a consistent position\nwhile browsing or playing content. It will also appear in Chrome's header for global control.\n\n\nB In Chrome, the Cast button can be hidden\nwhen Web Receivers aren't available. For Android and iOS senders,\nthe Cast button should always display when the device is on Wi-Fi, so proper help can be given\nif the user has turned off local network access and devices become undiscoverable as a result\n(see [iOS Permissions and Discovery](/cast/docs/ios_sender/permissions_and_discovery)\nfor more details).\n\n\nC In mobile apps, the Cast button should be on the right\nside.\n\n\nD In Chrome, the Cast button should be on the right side in\nthe content media controls (for example, see embedded video). If the media controls contain a fullscreen\nbutton, place the Cast button to the left of it.\n\n**Note**\n\nGoogle Cast employs a multi-tasking model, which allows users to browse the sender app and\nother apps while casting. The Cast button must be visible from every screen where there is\nplayable content, so the user doesn't have to hunt to find where to pause or stop the content\nplaying on TV. \n\n### Android\n\nSender disconnected \nCast home screen \n\n### iOS\n\nSender disconnected \nCast home screen \n\n### Chrome\n\nSender disconnected \nCast home screen \n\n### [Cast button states](#sender-cast-icon-states)\n\n\n**Required**\n\n\nA Disconnected: When Web Receivers are available, the\nCast button appears\n\n\nB Connecting: When the Web Receiver is connecting, the\nCast button animates the waves in the icon progressively (for details, see note below)\n\n\nC Connected: When this app is connected to the Cast\nWeb Receiver, its Cast button appears with a filled frame shape\n\n\n**Best practices**\n\n\nFor each of the button states, use colors that match the style of other UI\nelements of your app. Using a distinct highlight color (such as yellow) for the ON / Connected\nstate is optional.\n\n\n**Notes**\n\n- The Cast icon displays on Chrome, Android, and iOS to provide access to the Cast extension regardless of the availability of Cast devices.\n- The Connecting (animated) state appears when the connection to the Cast API takes longer than expected (the Android and Chrome SDK's will automatically animate the Cast icon). Once connected, the Web Receiver app launches.\n- The ON / Connected state of the Cast icon has been updated and now uses a solid fill within the icon frame. The new Cast icon and icon templates are available [here](/cast/docs/get-started#download_cast_icons_optional).\n\n\u003cbr /\u003e\n\n### Android\n\nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### iOS\n\nSender, Cast unavailable \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### Chrome\n\nSender, Cast unavailable\n\nThe Cast icon displays in Chrome to provide access to the Cast extension regardless of the connection state. \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]
