Receptor de mídia estilizado

O receptor de mídia estilizado (SMR, na sigla em inglês) permite que o app remetente reproduza mídia em um dispositivo de transmissão sem criar seu próprio app receptor personalizado. É possível personalizar o esquema de cores e a marca do SMR fornecendo seu próprio arquivo CSS durante o registro.

Inscrição

Para usar o SMR no seu app, selecione a opção Receptor de mídia estilizada ao adicionar um novo app no Play Console do SDK do Google Cast. Consulte Registro para mais informações. Essa opção inclui um link para Visualizar a folha de estilo padrão, bem como um campo para inserir o URL da folha de estilo. Você pode usar os estilos padrão ou fornecer o URL HTTPS para seu arquivo CSS. É possível usar seu próprio servidor para hospedar o arquivo CSS. Depois de fornecer o URL do arquivo CSS, clique em Visualizar para conferir como seus estilos vão aparecer no receptor.

Mídias compatíveis

Todos os receptores oferecem suporte aos tipos de mídia, conforme descrito em Mídias compatíveis.

O SMR oferece suporte a vídeo, áudio e imagens e é controlado por um app remetente usando o canal de mídia do SDK do Cast. O SMR está em total conformidade com as diretrizes de UX para reprodução de mídia em um dispositivo de transmissão.

Digitar fontes

Consulte Fontes pré-instaladas para ver uma lista de fontes pré-instaladas com o receptor.

CSS

O receptor de mídia estilizada usa as seguintes classes CSS:

  • .background: o segundo plano do receptor.
  • .logo: o logotipo exibido quando o receptor está sendo iniciado. Esta classe também é usada quando o receptor está no estado inativo e nenhuma classe .splash é declarada.
  • .progressBar: a barra de progresso para reprodução de mídia.
  • .splash: a tela exibida quando o receptor está em estado inativo. Se essa classe não for declarada, o receptor usará .logo ou o nome do app por padrão.
  • .watermark: uma marca-d'água exibida quando a mídia está tocando.

Confira um exemplo de arquivo CSS que usa essas classes:

.background {
  background: center no-repeat url(background.png);
}

.logo {
  background-image: url(logo.png);
}

.progressBar {
  background-color: rgb(238, 255, 65);
}

.splash {
  background-image: url(splash.png);
}

.watermark {
  background-image: url(watermark.png);
  background-size: 57px 57px;
}

Veja abaixo algumas ilustrações dessas classes em uso.

Video

Observação: a arte da imagem do vídeo tem 96x143 pixels e o primeiro recurso de imagem associado aos metadados de mídia é selecionado para exibição. As imagens são dimensionadas para corresponder às dimensões esperadas.

Áudio

Observação: a arte do álbum de áudio tem 384 x 384 pixels, e o primeiro recurso de imagem associado aos metadados de mídia é selecionado para exibição. As imagens são dimensionadas para corresponder às dimensões esperadas.

       

Imagens da Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

Imagem da Sintel: (c) copyright Blender Foundation / www.sintel.org