Esta página foi traduzida pela API Cloud Translation.

Definir o estilo do player

O SDK do receptor da Web fornece uma interface de player integrada. Para implementar essa interface no seu app receptor personalizado da Web, 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 apresentação, a família de fontes e muito mais. Você pode adicionar essas variáveis com estilos CSS in-line, 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>

Logotipo de reprodução

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

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

Propriedades do segundo plano do player

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

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

Tela do receptor da Web:

Plano de fundo personalizado

É possível usar as seguintes variáveis para personalizar as propriedades .background:

Variáveis e padrões

Nome	Valor padrão	Descrição
--fundo	preto	Propriedade de segundo plano do CSS
--background-color		Propriedade de background-color do CSS
--background-image		Propriedade da imagem de plano de fundo CSS
--background-repeat	sem repetição	Propriedade de repetição em segundo plano do CSS
--background-size	capa	Propriedade de tamanho de segundo plano do CSS

Modelo de 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 em estado inativo.

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

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

Tela do receptor da Web:

É possível usar as seguintes variáveis para personalizar as propriedades .logo:

Variáveis e padrões

Nome	Valor padrão	Descrição
--logo-background		Propriedade de segundo plano do CSS
--logo-color		Propriedade de background-color do CSS
--logo-image		Propriedade da imagem de plano de fundo CSS
--logo-repeat	sem repetição	Propriedade de repetição em segundo plano do CSS
--logo-size		Propriedade de tamanho de segundo plano do CSS

Modelo de CSS

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

Propriedades de apresentação

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 mostrar planos de fundo ou imagens separadas quando o receptor estiver inativo.

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

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

Tela do receptor da Web:

Apresentação personalizada

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

É possível usar as seguintes variáveis para personalizar as propriedades .splash:

Variáveis e padrões

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

Modelo de CSS

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

Apresentação de slides

Para fazer com que até 10 imagens alternem durante o estado inativo (no lugar da imagem de apresentação), use os parâmetros a seguir da apresentação de slides.

Variáveis e padrões

Nome	Valor padrão	Descrição
--slideshow-interval-duration	10 s	Tempo entre as imagens.
--slideshow-animation-duration	2 s	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 de 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 da marca-d'água

Um .watermark é mostrado enquanto a mídia está tocando. Normalmente, essa é uma imagem pequena e transparente, cujo padrão é o canto inferior direito do receptor.

É possível usar as seguintes variáveis para personalizar as propriedades .watermark:

Variáveis e padrões

Nome	Valor padrão	Descrição
--watermark-background		Propriedade de segundo plano do CSS
--watermark-color		Propriedade de background-color do CSS
--watermark-image		Propriedade da imagem de plano de fundo CSS
--watermark-position	canto inferior direito	Propriedade de posição de segundo plano do CSS
--watermark-repeat	sem repetição	Propriedade de repetição em segundo plano do CSS
--watermark-size		Propriedade de tamanho de segundo plano do CSS

Modelo de CSS

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

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

Também é possível personalizar anúncios, fontes, imagens do player e outras propriedades usando o 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(matiz, 100%, 50%)	Cor da marca de intervalo de anúncio.
--font-family	Open Sans	Família de fontes para metadados e 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 armazenamento em buffer.
--pause-image	Imagem padrão	A imagem a ser exibida enquanto estiver pausada.
--play-image		A imagem que vai aparecer nos metadados durante a reprodução.
--theme-hue	42	A matiz a ser usada para o player.
--progress-color	hsl(matiz, 95%, 60%)	Cor da barra de progresso.

Modelo de 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, consulte Receptor de mídia estilizada.

Overscan

Os layouts para TV têm alguns requisitos únicos devido à evolução dos padrões de TV e à vontade de apresentar sempre uma imagem em tela cheia para os espectadores. Os dispositivos de TV podem cortar a borda externa de um layout de app para garantir que toda a tela seja preenchida. Esse comportamento geralmente é chamado de overscan. Evite que os elementos da tela sejam cortados devido ao overscan incorporando uma margem de 10% em todos os lados do layout.

Interface de áudio padrão

MetadataType.MUSIC_TRACK

R: --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 receptor da Web do Cast oferece suporte ao uso do seu próprio elemento de interface personalizado em vez do cast-media-player.

A vinculação de dados personalizada da interface permite que você use seu próprio elemento de interface personalizado e a classe PlayerDataBinder para vincular a interface ao estado do player, em vez de adicionar o elemento cast-media-player ao receptor. O binder também oferece suporte ao envio de eventos para mudanças de dados, caso o app não tenha 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 receptor da Web possa usá-lo. Se vários objetos MediaElement estiverem disponíveis, marque o MediaElement que você quer que o receptor da Web use. Para fazer isso, adicione castMediaElement à lista de classes do vídeo, conforme mostrado abaixo. Caso contrário, o Web Receiver escolherá o primeiro MediaElement.

<video class="castMediaElement"></video>

Migração de HLS no Shaka Player

Otimizar para smart displays