Botão Transmitir

O botão "Transmitir" abre uma caixa de diálogo para conectar, controlar e desconectar receptores da Web.

Consulte os ícones de transmissão para fazer o download dos modelos de botão Transmitir.

Observaçã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 aparecem na caixa de diálogo "Transmitir" e nunca em outra caixa de diálogo, menu ou controle.

  Apresentar o Google Cast aos usuários

Apresentar o botão "Transmitir" ajuda os usuários atuais a saber que o app remetente agora oferece suporte à transmissão e também ajuda os usuários novos no Google Cast.

Obrigatório
  A   Mostre uma tela de introdução do Google Cast na primeira vez que os receptores da Web estiverem disponíveis. Para remetentes do iOS, mostre uma tela de introdução do Google Cast na primeira vez que o botão "Transmitir" aparecer.
  B   Destaque visualmente o botão "Transmitir" circulando-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 do Google Cast

Introdução ao Cast

Tela inicial do Google Cast

iOS

Introdução do Google Cast

Tela inicial do Google Cast

Chrome

Introdução do Google Cast

Introdução ao Cast

Tela inicial do Google Cast

Transmitir tela inicial
 

  Disponibilidade do botão "Transmitir"

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 ser ocultado quando os receptores da Web não estão disponíveis. Para remetentes do Android e iOS, o botão "Transmitir" sempre vai aparecer quando o dispositivo estiver conectado ao Wi-Fi. Assim, a ajuda adequada pode ser fornecida 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, mostre o botão "Transmitir" no lado direito da tela ou em uma visualização do player. Se estiver em uma visualização do player, coloque-o no canto superior direito.
  D   No Chrome, o botão "Transmitir" precisa estar no lado direito dos controles de mídia de conteúdo (por exemplo, consulte o vídeo incorporado). Se os controles de mídia contiverem um botão de tela cheia, coloque o botão "Transmitir" à esquerda dele.

Observação

O Google Cast emprega um modelo multitarefa, que permite que os usuários naveguem pelo app remetente e outros apps durante a transmissão. O botão "Transmitir" 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 reproduzido na TV.

Android

Remetente desconectado

O remetente se desconectou

Tela inicial do Google Cast

iOS

Remetente desconectado

Tela inicial do Google Cast

Chrome

Remetente desconectado

O remetente se desconectou

Tela inicial do Google Cast

 

  Estados do botão "Transmitir"

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 Google 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 app. O uso de uma cor de destaque distinta (como amarelo) para o estado ATIVADO / Conectado é opcional.

Observações

  • O ícone do Cast aparece no Chrome, Android e iOS para fornecer acesso à extensão do Cast independentemente da disponibilidade do Wi-Fi ou do dispositivo de transmissão.
  • 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 Google Cast). Depois de conectado, o app receptor da Web é iniciado.
  • O estado ATIVADO / Conectado do ícone do Google 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, Google Cast desconectado

Remetente, Transmissão desconectada

Tela inicial do Google Cast

Transmitir a tela inicial

Remetente, Google Cast conectando

Remetente, Transmitir conectando

Tela inicial do Google Cast

Transmitir a tela inicial

Remetente, Google Cast conectado

Remetente, Transmitir conectado

Carregamento do app receptor da Web

Carregamento do app Web Receiver

Remetente, Google Cast conectado

Remetente, Transmitir conectado

App receptor da Web carregado / inativo

App Web Receiver carregado / inativo

iOS

Remetente, Google Cast indisponível

Tela inicial do Google Cast

Remetente, Google Cast desconectado

Tela inicial do Google Cast

Remetente, Google Cast conectando

Remetente, Transmitir conectando

Tela inicial do Google Cast

Remetente, Google Cast conectado

Carregamento do app receptor da Web

Carregamento do app Web Receiver

Remetente, Google Cast conectado

App receptor da Web carregado / inativo

Chrome

Remetente, Google Cast indisponível

Remetente, Cast indisponível

O ícone do Google Cast aparece no Chrome para fornecer acesso à extensão do Google Cast independentemente do estado da conexão.

Tela inicial do Google Cast

Remetente, Google Cast desconectado

Remetente, Transmissão desconectada

Tela inicial do Google Cast

Remetente, Google Cast conectando

Remetente, Transmitir conectando

Tela inicial do Google Cast

Remetente, Google Cast conectado

Remetente, Transmitir conectado

Carregamento do app receptor da Web

Carregamento do app Web Receiver

Remetente, Google Cast conectado

Remetente, Transmitir conectado

App receptor da Web carregado / inativo

 

 

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 / 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