Definir o estilo do player

O SDK do Web Receiver oferece uma interface do player integrada. Para implementar essa interface no app personalizado do Web Receiver, adicione o elemento cast-media-player ao corpo do arquivo HTML.

<body>
  <cast-media-player></cast-media-player>
</body>

As variáveis CSS permitem personalizar várias propriedades cast-media-player, incluindo o plano de fundo do player, a imagem de abertura, a família de fontes e muito mais. É possível adicionar essas variáveis com estilos CSS inline, uma folha de estilo CSS ou style.setProperty em JavaScript.

Nas próximas seções, aprenda a personalizar cada área do elemento do player de mídia. Use os modelos a seguir para começar.

Externo

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/receiver.css" media="screen" />
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
</body>
<footer>
  <script src="js/receiver.js"></script>
</footer>
</html>

js/receiver.js

const context = cast.framework.CastReceiverContext.getInstance();

...

// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

...

context.start();

css/receiver.css

body {
  --playback-logo-image: url('http://some/image.png');
}
cast-media-player {
  --theme-hue: 100;
  --progress-color: rgb(0, 255, 0);
  --splash-image: url('http://some/image.png');
  --splash-size: cover;
}
Inline
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <style>
    body {
      --playback-logo-image: url('http://some/image.png');
    }
    cast-media-player {
      --theme-hue: 100;
      --progress-color: rgb(0, 255, 0);
      --splash-image: url('http://some/image.png');
    }
  </style>
  <script>
    const context = cast.framework.CastReceiverContext.getInstance();

    ...

    // Update style using javascript
    let playerElement = document.getElementsByTagName("cast-media-player")[0];
    playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

    ...

    context.start();
  </script>
</body>
</html>

O logotipo de reprodução aparece no canto superior esquerdo do receptor enquanto a mídia é reproduzida. Essa propriedade é separada da classe .logo. É possível personalizar --playback-logo-image no seletor body.

body {
  --playback-logo-image: url('image.png'); /* set from the body selector */
}

Propriedades do plano de fundo do player

As variáveis --background definem as propriedades de plano de fundo de todo o player, visíveis durante a inicialização e a reprodução. Por exemplo, é possível definir todo o plano de fundo como um gradiente linear branco e prateado:

cast-media-player {
  --background-image: linear-gradient(white, silver);
}

Exibição do Web Receiver:

Plano de fundo personalizado

Use as variáveis a seguir para personalizar as propriedades .background:

Variáveis e padrões

Nome Valor padrão Descrição
--background preto Propriedade de plano de fundo CSS
--background-color Propriedade de cor de plano de fundo CSS
--background-image Propriedade de imagem de plano de fundo CSS
--background-repeat no-repeat Propriedade de repetição de plano de fundo CSS
--background-size cover Propriedade de tamanho de plano de fundo CSS

Modelo CSS

cast-media-player {
  --background:
  --background-color:
  --background-image:
  --background-repeat:
  --background-size:
}

Propriedades do logotipo

A classe .logo é posicionada na frente da classe .background e abrange todo o player. Essa classe é exibida quando o receptor está sendo iniciado. Se você não fornecer nenhuma variável .splash, a classe .logo também será exibida quando o receptor estiver inativo.

O exemplo a seguir define --logo-image como um ícone de equalizador chamado welcome.png. Uma imagem é definida como padrão no centro do receptor:

cast-media-player {
  --logo-image: url('welcome.png');
}

Exibição do Web Receiver:

Logotipo personalizado

Use as variáveis a seguir para personalizar as propriedades .logo:

Variáveis e padrões

Nome Valor padrão Descrição
--logo-background Propriedade de plano de fundo CSS
--logo-color Propriedade de cor de plano de fundo CSS
--logo-image Propriedade de imagem de plano de fundo CSS
--logo-repeat no-repeat Propriedade de repetição de plano de fundo CSS
--logo-size Propriedade de tamanho de plano de fundo CSS

Modelo CSS

cast-media-player {
  --logo-background:
  --logo-color:
  --logo-image:
  --logo-repeat:
  --logo-size:
}

Propriedades de abertura

Semelhante à classe .logo, a classe .splash abrange todo o player. Se você definir essas propriedades, as variáveis .splash vão substituir as variáveis .logo quando o receptor estiver inativo. Isso significa que você pode usar um conjunto de propriedades .logo na inicialização e exibir planos de fundo ou imagens separados quando o receptor estiver inativo.

Por exemplo, é possível substituir o plano de fundo gradiente branco e prateado por dimgray e adicionar um ícone animado Aguardando...:

cast-media-player {
  --splash-color: dimgray;
  --splash-image: url('waiting.png');
}

Exibição do Web Receiver:

Splash personalizado

Se você não definir essas propriedades, o receptor vai usar as configurações .logo ou o nome do app quando estiver inativo.

Use as variáveis a seguir para personalizar as propriedades .splash:

Variáveis e padrões

Nome Valor padrão Descrição
--splash-background Propriedade de plano de fundo CSS
--splash-color Propriedade de cor de plano de fundo CSS
--splash-image Propriedade de imagem de plano de fundo CSS
--splash-repeat Propriedade de repetição de plano de fundo CSS
--splash-size Propriedade de tamanho de plano de fundo CSS

Modelo CSS

cast-media-player {
  --splash-background:
  --splash-color:
  --splash-image:
  --splash-repeat:
  --splash-size:
}

Apresentação de slides

Para que até 10 imagens sejam exibidas durante o estado inativo (em vez da imagem de abertura), use os seguintes parâmetros de apresentação de slides.

Variáveis e padrões

Nome Valor padrão Descrição
--slideshow-interval-duration 10s Tempo entre as imagens.
--slideshow-animation-duration 2s Duração da transição.
--slideshow-image-1 Primeira imagem na apresentação de slides.
--slideshow-image-2 Segunda imagem na apresentação de slides.
--slideshow-image-3 Terceira imagem na apresentação de slides.
--slideshow-image-4 Quarta imagem na apresentação de slides.
--slideshow-image-5 Quinta imagem na apresentação de slides.
--slideshow-image-6 Sexta imagem na apresentação de slides.
--slideshow-image-7 Sétima imagem na apresentação de slides.
--slideshow-image-8 Oitava imagem na apresentação de slides.
--slideshow-image-9 Nona imagem na apresentação de slides.
--slideshow-image-10 Décima imagem na apresentação de slides.

Modelo CSS

cast-media-player {
  --slideshow-interval-duration:
  --slideshow-animation-duration:
  --slideshow-image-1:
  --slideshow-image-2:
  --slideshow-image-3:
  --slideshow-image-4:
  --slideshow-image-5:
  --slideshow-image-6:
  --slideshow-image-7:
  --slideshow-image-8:
  --slideshow-image-9:
  --slideshow-image-10:
}

Propriedades de marca-d'água

Uma .watermark é exibida enquanto a mídia está sendo reproduzida. Normalmente, é uma imagem pequena e transparente que é definida como padrão no canto inferior direito do receptor.

Use as variáveis a seguir para personalizar as propriedades .watermark:

Variáveis e padrões

Nome Valor padrão Descrição
--watermark-background Propriedade de plano de fundo CSS
--watermark-color Propriedade de cor de plano de fundo CSS
--watermark-image Propriedade de imagem de plano de fundo CSS
--watermark-position canto inferior direito Propriedade de posição de plano de fundo CSS
--watermark-repeat no-repeat Propriedade de repetição de plano de fundo CSS
--watermark-size Propriedade de tamanho de plano de fundo CSS

Modelo CSS

cast-media-player {
  --watermark-background:
  --watermark-color:
  --watermark-image:
  --watermark-position:
  --watermark-repeat:
  --watermark-size:
}

Reprodução, anúncios e outras propriedades CSS

Também é possível personalizar anúncios, fontes, imagens do player e outras propriedades no seletor cast-media-player.

Variáveis e padrões

Nome Valor padrão Descrição
--ad-title Anúncio Título do anúncio.
--skip-ad-title Pular anúncio Texto da caixa de texto Pular anúncio.
--break-color hsl(hue, 100%, 50%) Cor da marca de intervalo do anúncio.
--font-family Open Sans Família de fontes para metadados e a barra de progresso.
--spinner-image Imagem padrão A imagem a ser exibida durante a inicialização.
--buffering-image Imagem padrão A imagem a ser exibida durante o buffer.
--pause-image Imagem padrão A imagem a ser exibida durante a pausa.
--play-image A imagem a ser mostrada nos metadados durante a reprodução.
--theme-hue 42 A tonalidade a ser usada para o player.
--progress-color hsl(hue, 95%, 60%) Cor da barra de progresso.

Modelo CSS

cast-media-player {
  --ad-title:
  --skip-ad-title:
  --break-color:
  --font-family:
  --spinner-image:
  --buffering-image:
  --pause-image:
  --play-image:
  --theme-hue:
  --progress-color:
}

Para mais informações e ilustrações adicionais, consulte Receptor de mídia estilizado.

Overscan

Layouts para TV têm algumas exigências únicas devido à evolução dos padrões de TV e à vontade de apresentar sempre uma imagem em tela cheia para o usuário. Os dispositivos de TV podem cortar a margem externa de um layout de app para garantir que todo o visor seja preenchido. Geralmente, esse comportamento é chamado de overscan. Para evitar que os elementos da tela sejam cortados devido ao overscan, incorpore uma margem de 10% em todos os lados do layout.

Interface de áudio padrão

MetadataType.MUSIC_TRACK

A. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist ou MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. Reproduzir / Pausar

Vinculação de dados da interface personalizada

O SDK do Cast Web Receiver oferece suporte ao uso do seu próprio elemento da interface personalizada em vez do cast-media-player.

A vinculação de dados da interface personalizada permite usar seu próprio elemento de interface personalizada e usar a PlayerDataBinder classe para vincular a interface ao estado do player em vez de adicionar o cast-media-player elemento ao receptor. O binder também oferece suporte ao envio de eventos para mudanças de dados, caso o app não ofereça suporte à vinculação de dados.

const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();

const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

// Update ui according to player state
playerDataBinder.addEventListener(
    cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
    e => {
      switch (e.value) {
        case cast.framework.ui.State.LAUNCHING:
        case cast.framework.ui.State.IDLE:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.LOADING:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.BUFFERING:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.PAUSED:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.PLAYING:
          // Write your own event handling code
          break;
      }
    });
context.start();

Adicione pelo menos um MediaElement ao HTML para que o Web Receiver possa usá-lo. Se vários objetos MediaElement estiverem disponíveis, marque o MediaElement que você quer que o Web Receiver use. Para fazer isso, adicione castMediaElement à lista de classes do vídeo, conforme mostrado abaixo. Caso contrário, o Web Receiver vai escolher o primeiro MediaElement.

<video class="castMediaElement"></video>
Anterior
Migração de HLS no Shaka Player
Avançar
Otimizar para smart displays