Experiência do usuário com a plataforma Google Cast
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O Google Cast permite que apps da Web para Android, iOS e Chrome "transmitam" conteúdo,
como vídeo, áudio e compartilhamento de tela (espelho), para dispositivos compatíveis com o Cast,
como:
- Google Chromecast
- TVs compatíveis com o Google Cast
- Alto-falantes compatíveis com o Google Cast
- Smart displays: monitores LCD portáteis com tela touchscreen usados como thin clients
- Tablets Android
No modelo de interação do Google Cast, o smartphone, tablet ou laptop é o
remetente, que funciona como um controle remoto para controlar a reprodução. A TV,
a tela ou o tablet acoplado é o receptor, que recebe instruções do
remetente e exibe o conteúdo da conexão de Internet do receptor. Todas
as ações do usuário (toques e deslizes) podem ocorrer no dispositivo do remetente
ou no receptor da Web.
A transmissão depende da coordenação entre duas ou mais telas: a interface do remetente
e a interface do receptor, que precisam funcionar juntas. Por exemplo, se você pressionar um
botão em um dispositivo móvel para pausar o conteúdo, a TV vai indicar que ele
está pausado, enquanto o dispositivo móvel vai mostrar um botão de reprodução para retomar
a reprodução.
Considerações
Devido a limitações de hardware e recursos, há algumas restrições
aos aplicativos com suporte ao Google Cast:
- O dispositivo de transmissão é um dispositivo de baixa potência com limitações de memória, CPU e GPU.
Por isso, o aplicativo do receptor da Web precisa ser o mais leve possível.
- Para modelos de interação do Cast e do Google Cast, guias, janelas
ou pop-ups podem ser criados no app do receptor da Web ou do remetente, além de
aceitar diretamente a entrada do usuário, como toques ou deslizamentos. Por exemplo, o app
Web Receiver em um tablet ou tela acoplada pode mostrar um botão de pausa e
receber o toque do usuário. Dessa forma, todas as ações no aplicativo precisam ser
acionadas por um aplicativo receptor da Web ou remetente.
- As telas inteligentes oferecem suporte à entrada do usuário por um app de envio ou por toque na
interface.
- O Web Receiver é um navegador Chrome otimizado para reprodução de vídeo. Portanto,
no momento, o WebGL e o Chrome Native Client (NaCL) não têm suporte, assim como
as extensões do Chrome.
- O Cast é compatível com uma única reprodução de streaming de mídia simultânea nas tags
<audio> e <video> ou em várias faixas de áudio usando a API WebAudio. Somente um elemento de vídeo pode estar ativo no DOM por vez.
Além disso, não há suporte para composição, manipulação, transformações, rotações ou
zoom de vídeo.
Princípios gerais de design
Considere o seguinte ao desenvolver a interface do usuário.
Interface do Web Receiver:
- O Web Receiver pode ter elementos interativos e informativos
para descrever o estado do app, como pausado ou em reprodução, ou
mensagens de erro. A interação do usuário pode ocorrer no remetente da transmissão (smartphone,
tablet ou navegador Chrome) ou no receptor da Web (TVs, telas ou tablets).
- Lembre-se de que a ação do vídeo está acontecendo no meio da tela da TV,
e os elementos da interface não podem interferir na apresentação. Coloque os elementos da interface
no terço inferior da tela do Web Receiver, deixando uma margem de 10%
das bordas da tela para possíveis
overscans.
- Sempre que possível, as transições de um estado de tela para outro precisam ser suaves
e parecerem cinematográficas. Em vez de movimentos abruptos de um estado para outro, use
transições como fade-in e fade-out. Por exemplo, o estado de carregamento
de conteúdo permanece na tela e desaparece na experiência de reprodução de mídia.
Interface do remetente:
- O remetente permite ações do usuário, e o receptor da Web exibe informações de estado.
Por exemplo, se o conteúdo estiver pausado, a TV precisa indicar que está pausado,
enquanto o dispositivo móvel indica que está pronto para começar a reprodução (por exemplo,
mostrando ao usuário um botão de reprodução).
- A velocidade é um fator importante. Os usuários precisam localizar rapidamente o controle de transmissão
e ver o conteúdo começar a ser reproduzido imediatamente na tela grande. Enquanto o conteúdo
está carregando, forneça indicadores de carregamento animados e use transições para
dar uma sensação de maior velocidade.
A maneira mais fácil de garantir que seu aplicativo Cast siga esses princípios é
analisar sua interface do usuário com a Lista de verificação de design do Google Cast
e testar seus apps de transmissão.
Diretrizes de marca
As diretrizes de marca do Google Cast a seguir são para desenvolvedores de apps e se concentram nos
requisitos adicionais que você precisa seguir para descrever seu app em texto.
Para conferir as diretrizes de branding de dispositivos Cast, consulte o
Partner Marketing Hub.
Informe que seu app funciona com o Google Cast usando o termo "Compatível com Google Cast". No entanto, verifique se o app está em conformidade
com os Termos de Serviço adicionais do desenvolvedor do SDK
e a Lista de verificação de design do Cast e se o uso de "Compatível com Google Cast" está em conformidade com nossas diretrizes de branding.
Você também pode usar um selo do Google Cast,
desde que seu app ou dispositivo esteja em conformidade com nossas diretrizes. O Google
se reserva o direito de solicitar que você modifique ou interrompa o uso do selo se
ele não estiver em conformidade com as diretrizes da marca.
"Google Cast" no texto
- Ao descrever um app (não um produto de hardware) como compatível com o Google Cast, use
a frase "Compatível com Google Cast". Por exemplo: "Este app é compatível com o Google
Cast".
- Ao descrever um produto de hardware de terceiros compatível com o Google Cast, use
"Esta {TV} é compatível com o Google Cast" ou "Estes {alto-falantes} são compatíveis com o Google
Cast".
- Quando escritos em texto, "Google" e "Cast" precisam estar em maiúsculo.
- Em qualquer recurso de marketing que use "Google Cast" no texto ou no selo/logotipo,
é necessário incluir a seguinte atribuição legal: Google Cast é uma marca registrada
da Google LLC.
- Não coloque o Google Cast no título do app (como XYZ Google Cast
App).
Mensagens de apps compatíveis com Google Cast
Você pode promover seu app da seguinte maneira:
- "O XYZ é um app compatível com o Google Cast que permite transmitir seu entretenimento
favorito do dispositivo móvel para a TV."
- "O app XYZ agora está disponível para TVs compatíveis com o Google Cast."
- "O app XYZ agora está disponível para todos os produtos do Google Cast, incluindo
Google Chromecast, Google Cast Audio, TVs e alto-falantes compatíveis com
o Google Cast."
- "O app XYZ é compatível com o Google Cast, permitindo que você aproveite todos os seus programas/filmes/músicas/jogos favoritos na TV que funciona com o Google Cast."
- "O app XYZ agora tem suporte ao Google Cast, permitindo que os usuários transmitam conteúdo
do smartphone para a TV compatível com o Google Cast."
Selo do Google Cast
É possível usar os selos do Google Cast no seu site, na página de detalhes do app na app store,
nos materiais de marketing e promocionais para mostrar a compatibilidade com
dispositivos que usam o protocolo Cast.
- Não modifique a cor, as proporções, o espaçamento ou qualquer outro aspecto da
imagem do selo.
- Quando usado com logotipos de outras tecnologias de elemento (por exemplo,
Bluetooth, Spotify Connect, AirPlay etc.), o selo do Google Cast precisa ter
tamanho igual ou maior.
- Não faça do selo o elemento principal da sua página.
- Mantenha uma certa distância entre o selo e outros logotipos e ícones na página.
- Use um selo preto em segundo plano branco, claro ou de tons médios.
- Use o selo branco em um plano de fundo preto ou escuro.
- Não use o selo em uma página que contenha ou mostre conteúdo adulto,
promova jogos de azar, promova violência, contenha discurso de ódio, envolva a
venda de tabaco ou álcool a pessoas com menos de 21 anos de idade,
viole outras leis ou regulamentações aplicáveis ou seja de outra forma inaceitável.
Vinculação de selos
Quando usado on-line, o selo do Google Cast precisa vincular a uma das seguintes opções:
- Confira a lista de produtos e apps compatíveis com o Google Cast em
g.co/castapps.
- Uma lista de produtos publicados por você.
- Uma página de detalhes do produto específica publicada por você.
- Uma lista de apps publicados por você.
- Uma página de detalhes de app específica publicada por você no Google Play ou na App Store
da Apple.
Fazer o download dos recursos do selo do Google Cast
O pacote de download inclui formatos Portable Network Graphics (.png), Adobe
Illustrator (.ai) e Encapsulated Postscript (.eps).
Visualizar os selos do Google Cast
Consulte a página de diretrizes sobre selos do Partner Hub
para ver todos os selos disponíveis e instruções de uso.
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-25 UTC.
[null,null,["Última atualização 2025-07-25 UTC."],[[["\u003cp\u003eGoogle Cast enables streaming of content like video and audio from Android, iOS, and Chrome to compatible devices.\u003c/p\u003e\n"],["\u003cp\u003eThe sender device (phone, tablet, laptop) acts as a remote, while the receiver device (TV, speaker, display) plays the content.\u003c/p\u003e\n"],["\u003cp\u003eBoth sender and receiver UIs must be coordinated for a seamless user experience, with actions reflected on both.\u003c/p\u003e\n"],["\u003cp\u003eWeb Receiver applications should be lightweight due to device limitations, and interactive elements should be strategically placed for optimal viewing.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast branding guidelines must be followed when promoting app compatibility, including using the approved badge and messaging.\u003c/p\u003e\n"]]],["Google Cast enables content streaming from sender devices (phones, tablets, laptops) to receiver devices (Chromecast, Cast-enabled TVs/speakers/displays). Senders act as remote controls, while receivers display content from their internet connection. Both sender and receiver UIs coordinate actions like pausing/playing. Design considerations include lightweight receiver apps, UI placement within the lower third of the screen, and smooth transitions. Apps can be described as \"Google Cast-enabled\" and use a Google Cast badge, following specific branding guidelines and linking requirements.\n"],null,["# User Experience With the Google Cast Platform\n\nGoogle Cast allows Android, iOS, and Chrome web apps to \"stream\" content ---\nlike video, audio and screen sharing (mirroring) --- to Cast-ready devices\nlike:\n\n- Google Chromecast\n- TVs that work with Google Cast\n- Speakers that work with Google Cast\n- Smart Displays (a portable touchscreen LCD monitor used as a thin client)\n- Android Tablets\n\nIn the Google Cast interaction model, the mobile phone, tablet or laptop is the\n**sender** which acts as a remote control to control the playback, and the TV,\ndisplay or docked tablet is the **receiver** which receives instructions from\nthe sender and displays the content from the receiver's Internet connection. All\nthe user actions (taps and swipes) can take place on **both** the sender device\nor the Web Receiver.\n\nCasting relies on the coordination between two or more screens; the sender UI\nand the receiver UI --- they must work together. For example, if you press a\nbutton on a mobile device to pause the content, the TV should indicate that it\nis paused, while the mobile device should provide a play button to resume\nplayback.\n\nConsiderations\n--------------\n\nDue to hardware and resource limitations, there are certain restrictions placed\non Google Cast-enabled applications:\n\n- The Cast device is a low-power device with memory, CPU and GPU limitations, so the Web Receiver application should be as lightweight as possible.\n- For Cast and Google Cast interaction models, tabs, windows or popups can be created in both the Web Receiver or sender app, as well as directly accept user input, such as taps or swipes. For example, the Web Receiver app on a docked tablet or display can display a pause button and receive a user's tap. In this way, *all* actions on the application must be triggered from either a Web Receiver or sender application.\n- Smart Displays support user input through a sender app or via touch on the UI.\n- The Web Receiver is a Chrome browser optimized for video playback. As such, WebGL and Chrome Native Client (NaCL) are not currently supported, nor are Chrome extensions.\n- Cast supports a single concurrent media stream playback in the `\u003caudio\u003e` and `\u003cvideo\u003e` tags, or multiple audio tracks using the WebAudio API. Only one video element may be active in the DOM at any time. Additionally, video compositing, manipulation, transformations, rotations or zooming are not supported.\n\nOverall design principles\n-------------------------\n\nKeep the following in mind as you develop your user interface.\n\n**Web Receiver interface:**\n\n- The Web Receiver can have both interactive elements and informational elements to describe the state of the app, such as paused or playing, or error messages. User interaction can take place on the Cast sender (phone, tablet, or Chrome browser) or the Web Receiver (TV, displays, or tablets).\n- Remember that the video action is happening in the middle of the TV screen, and your UI elements should not interfere with the presentation. Place UI elements within the lower third of the Web Receiver display, leaving a 10% margin from the edges of the screen for possible [overscan](/cast/docs/caf_receiver/customize_ui#overscan).\n- When possible, transitions from one screen state to another should be smooth and feel cinematic. Rather than abrupt moves from state to state, use transitions like fade-in and fade-out. For example, the content-loading state lingers on-screen and fades into the media playing experience.\n\n**Sender interface:**\n\n- The sender supports user actions and the Web Receiver displays state information. For example, if content is paused, the TV should indicate that it is paused, while the mobile device indicates it is ready to start playing (for example, showing the user a play button).\n- Speed matters. Users need to be able to quickly locate the casting control and see content start playing immediately on the large screen. While content is loading, provide animated loading indicators and use transitions to help make things feel faster.\n\nThe easiest way to ensure that your Cast application follows these principles is\nto review your user interface with the Cast [Design Checklist](/cast/docs/design_checklist)\nand [test your Cast applications](/cast/docs/testing).\n\nBrand guidelines\n----------------\n\nThe following Google Cast brand guidelines are for app developers and focus on\nthe additional requirements you must comply with to describe your app in text.\nFor Cast devices brand guidelines see the\n[Partner Marketing Hub](https://partnermarketinghub.withgoogle.com/brands/google-cast/overview/brand-introduction/).\nYou can let others know that your app works with Google Cast by using\nthe term \"Google Cast-enabled\". However be sure that your app complies\nwith the Cast [SDK Additional Developer Terms of Service](/cast/docs/terms)\nand the [Design Checklist](/cast/docs/design_checklist), and that your\nuse of \"Google Cast-enabled\" complies with our branding guidelines.\n\nYou can similarly use a [Google Cast badge](#google_cast_badge)\nas long as your app or device complies with our badging guidelines. Google\nreserves the right to request that you modify or cease your use of the badge if\nit does not comply with the brand guidelines.\n\n### \"Google Cast\" in text\n\n- When describing an app (not a hardware product) as being Cast-enabled, use the phrase \"Google Cast-enabled\". For example: \"This app is Google Cast-enabled\".\n- When describing a Cast compatible third-party hardware product, use \"This {TV} works with Google Cast\", \"These {speakers} work with Google Cast\".\n- When written in text, \"Google\" and \"Cast\" should be capitalized.\n- In any marketing asset that uses \"Google Cast\" in text or the badge/logo, you must include the following legal attribution: Google Cast is a trademark of Google LLC.\n- Don't put Google Cast in the title of the app (such as XYZ Google Cast App).\n\n### Google Cast-enabled app messaging\n\nYou can promote your app as follows:\n\n- \"XYZ is a Google Cast-enabled app which lets you stream your favorite entertainment from your mobile device to your TV.\"\n- \"The XYZ app is now available for TVs that work with Google Cast.\"\n- \"The XYZ app is now available for all Google Cast products including Google Chromecast, Google Cast Audio, and TVs and speakers that work with Google Cast.\"\n- \"The XYZ app is Google Cast-enabled, allowing you to enjoy all your favorite shows/movies/music/games on your TV that works with Google Cast.\"\n- \"The XYZ app now has Google Cast support, allowing users to stream content from their phone to their TV that works with Google Cast.\"\n\n### Google Cast badge\n\nYou can use the \"Google Cast\" badges on your website, app store listing,\nmarketing materials and promotional materials to display compatibility with\ndevices that use the Cast protocol.\n\n- Don't modify the color, proportions, spacing or any other aspect of the badge image.\n- When used alongside logos for other ingredient technologies (for example, Bluetooth, Spotify Connect, AirPlay, etc.), the Google Cast badge must be of equal or greater size.\n- Don't make the badge the primary element on your page.\n- Keep some distance between the badge and other logos and icons on your page.\n- When used on white, light, or medium-toned background, use a black badge.\n- When used on a black or dark-toned background, use the white badge.\n- Don't use the badge on a page that contains or displays adult content, promotes gambling, promotes violence, contains hate speech, involves the sale of tobacco or alcohol to persons under twenty-one years of age, violates other applicable laws or regulations or is otherwise objectionable.\n\n### Badge linking\n\nWhen used online, the Google Cast badge must link to one of the following:\n\n- Google's list of Google Cast-enabled apps and products at [g.co/castapps](http://g.co/castapps).\n- A list of products published by you.\n- A specific product detail page published by you.\n- A list of apps published by you.\n- A specific app detail page published by you, on Google Play, or in the Apple App Store.\n\n### Download Google Cast badge assets\n\nThe download bundle includes Portable Network Graphics (.png), Adobe\nIllustrator (.ai), and Enapsulated Postscript (.eps) formats.\n\n- [Partner Hub Downloads page](https://partnermarketinghub.withgoogle.com/brands/google-cast/downloads/)\n\n### Preview Google Cast badges\n\nRefer to the [Partner Hub Badges Guidelines page](https://partnermarketinghub.withgoogle.com/brands/google-cast/visual-identity/visual-identity/#badge-guidelines)\nfor all available badges and instructions on usage."]]
