El SDK de receptor web proporciona una IU de reproductor integrada. Para implementar esta IU en tu app personalizada del receptor web, debes agregar el elemento cast-media-player al cuerpo de tu archivo HTML.
<body>
<cast-media-player></cast-media-player>
</body>
Las variables de CSS te permiten personalizar varias propiedades de cast-media-player, como el fondo del reproductor, la imagen de presentación y la familia de fuentes, entre otras. Puedes agregar estas variables con estilos de CSS intercalados, una hoja de estilo CSS o el style.setProperty en JavaScript.
En las siguientes secciones, aprenderás cómo personalizar cada área del elemento del reproductor multimedia. Puedes usar las siguientes plantillas para comenzar.
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 reproducción
El logotipo de reproducción se muestra en la esquina superior izquierda del receptor mientras se reproduce el contenido multimedia. Esta propiedad es independiente de la clase .logo. Puedes personalizar el --playback-logo-image desde el selector body.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
Propiedades de fondo del reproductor
Las variables --background establecen las propiedades en segundo plano de todo el reproductor, visibles durante el inicio y la reproducción. Por ejemplo, puedes configurar todo el fondo con un gradiente lineal blanco y plateado:
cast-media-player {
--background-image: linear-gradient(white, silver);
}
Pantalla del receptor web:
Puedes usar las siguientes variables para personalizar las propiedades de .background:
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --segundo plano | negro | Propiedad en segundo plano de CSS |
| --fondo-color | Propiedad de color de fondo de CSS | |
| --imagen de fondo | Propiedad de imagen de fondo de CSS | |
| --segundo-repetición | no-repetir | Propiedad en segundo plano de CSS |
| --segundo-tamaño | versión de canción | Propiedad de tamaño en segundo plano de CSS |
Plantilla de CSS
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
Propiedades del logotipo
La clase .logo se posiciona delante de la clase .background y abarca a todo el reproductor. Esta clase se muestra cuando se inicia el receptor. Si no proporcionas ninguna variable .splash, la clase .logo también se muestra cuando el receptor está en estado inactivo.
En el siguiente ejemplo, se establece --logo-image en un ícono de ecualizador llamado welcome.png. De forma predeterminada, una imagen se encuentra en el centro del receptor:
cast-media-player {
--logo-image: url('welcome.png');
}
Pantalla del receptor web:
Puedes usar las siguientes variables para personalizar las propiedades de .logo:
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --logo-fondo | Propiedad en segundo plano de CSS | |
| --logo-color [color-color] | Propiedad de color de fondo de CSS | |
| --logo-image | Propiedad de imagen de fondo de CSS | |
| --logo-repeat | no-repetir | Propiedad en segundo plano de CSS |
| --logo-size | Propiedad de tamaño en segundo plano de CSS |
Plantilla de CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Propiedades de presentación
Al igual que la clase .logo, la clase .splash abarca todo el reproductor. Si configuras estas propiedades, tus variables .splash anularán a las variables .logo cuando tu receptor esté inactivo. Esto significa que podrías usar un conjunto de propiedades .logo en el inicio y mostrar imágenes o fondos independientes cuando el receptor esté inactivo.
Por ejemplo, puedes anular el fondo degradado blanco y plateado con dimgray y agregar un ícono waiting... animado:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Pantalla del receptor web:
Si no configuras estas propiedades, el receptor adoptará la configuración de .logo o el nombre de la app de forma predeterminada cuando esté inactiva.
Puedes usar las siguientes variables para personalizar las propiedades de .splash:
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --splash-fondo | Propiedad en segundo plano de CSS | |
| --splash-color | Propiedad de color de fondo de CSS | |
| --splash-imagen | Propiedad de imagen de fondo de CSS | |
| --splash-repeat | Propiedad en segundo plano de CSS | |
| --splash-size | Propiedad de tamaño en segundo plano de CSS |
Plantilla de CSS
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Presentación de diapositivas
Para que hasta 10 imágenes recorran durante el estado inactivo (en lugar de la imagen de presentación), usa los siguientes parámetros de presentación de diapositivas.
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --slideshow-interval-duration | 10 s | Tiempo entre imágenes. |
| --slideshow-animation-duration | 2 s | Duración de la transición. |
| --slideshow-image-1 | Primera imagen de la presentación de diapositivas. | |
| --slideshow-image-2 | Segunda imagen en la presentación de diapositivas. | |
| --slideshow-image-3 | Tercera imagen en la presentación de diapositivas. | |
| --slideshow-image-4 | Cuarta imagen en la presentación de diapositivas. | |
| --slideshow-image-5 | Quinta imagen en la presentación de diapositivas | |
| --slideshow-image-6 | Sexta imagen en la presentación de diapositivas. | |
| --slideshow-image-7 | Séptima imagen en la presentación de diapositivas. | |
| --slideshow-image-8 | Octava imagen en la presentación de diapositivas. | |
| --slideshow-image-9 | Novena imagen en la presentación de diapositivas. | |
| --slideshow-image-10 | Décima imagen en la presentación de diapositivas. |
Plantilla 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:
}
Propiedades de marca de agua
Se muestra .watermark mientras se reproduce contenido multimedia. Por lo general, es una imagen pequeña y transparente que se encuentra de forma predeterminada en la parte inferior derecha del receptor.
Puedes usar las siguientes variables para personalizar las propiedades de .watermark:
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --marca de agua de fondo | Propiedad en segundo plano de CSS | |
| --marca de agua | Propiedad de color de fondo de CSS | |
| --marca de agua-imagen | Propiedad de imagen de fondo de CSS | |
| --watermark-position | parte inferior derecha | Propiedad de posición en segundo plano de CSS |
| --watermark-repeat | no-repetir | Propiedad en segundo plano de CSS |
| --watermark-size | Propiedad de tamaño en segundo plano de CSS |
Plantilla de CSS
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
Reproducción, anuncios y otras propiedades de CSS
También puedes personalizar anuncios, fuentes, imágenes del jugador y otras propiedades desde el selector cast-media-player.
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --ad-title | Anuncio | Título del anuncio |
| --skip-ad-title | Omitir anuncio | Texto del cuadro de texto Omitir anuncio. |
| --break-color | hsl(hue, 100%, 50%) | Color de la marca de la pausa publicitaria |
| --font-family | Open Sans | Familia de fuentes para los metadatos y la barra de progreso. |
| --ícono giratorio | Imagen predeterminada | La imagen que se mostrará durante el inicio. |
| --buffering-image | Imagen predeterminada | La imagen que se mostrará mientras se almacena en búfer. |
| --pausa-imagen | Imagen predeterminada | La imagen que se mostrará mientras está pausada. |
| --play-image | La imagen que se mostrará en los metadatos mientras se reproduce. | |
| --tema-hue | 42 | El hue que se usará para el reproductor. |
| --progress-color, | hsl(hue, 95%, 60%) | Color de la barra de progreso. |
Plantilla 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 obtener más información y acceder a ilustraciones adicionales, consulta Receptor de medios con estilo.
Sobrebarrido
Los diseños para TV tienen algunos requisitos únicos debido a la evolución de los estándares de TV y al deseo de mostrar siempre imágenes en pantalla completa. Los dispositivos de TV pueden recortar el borde exterior del diseño de una app para asegurarse de que se rellene toda la pantalla. Este comportamiento suele denominarse sobrebarrido. Para evitar que se recorten los elementos de la pantalla debido al sobrebarrido, incorpora un margen del 10% en todos los lados de tu diseño.
IU de audio predeterminada
Tipo de metadatos: MUSIC_TRACK
A. --logo-image
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist o MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
H. Reproducir/Detener
Vinculación de datos de la IU personalizada
El SDK de receptor web de Cast admite el uso de tu propio elemento de IU personalizado en lugar de cast-media-player.
La vinculación de datos de IU personalizada te permite usar tu propio elemento de IU personalizado y usar la clase PlayerDataBinder para vincular la IU al estado del reproductor en lugar de agregar el elemento cast-media-player al receptor. El Binder también admite el envío de eventos para cambios de datos, si la app no admite la vinculación de datos.
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();
Debes agregar al menos un MediaElement al HTML para que el receptor web pueda usarlo. Si hay varios objetos MediaElement disponibles, debes etiquetar el MediaElement que deseas que use el receptor web. Para ello, agrega castMediaElement en la lista de clases del video, como se muestra a continuación; de lo contrario, el receptor web elegirá el primer MediaElement.
<video class="castMediaElement"></video>