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.
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; }
<!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:
É 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:
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]
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>