El SDK de Web Receiver proporciona una IU de reproductor integrada. Para implementar esta IU en tu app personalizada de Web Receiver, 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, la familia de fuentes y mucho más. Puedes agregar estas variables con estilos CSS intercalados, una hoja de estilo CSS o style.setProperty en JavaScript.
En las siguientes secciones, aprenderás a personalizar cada área del elemento reproductor de medios. 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 aparece en la esquina superior izquierda del receptor mientras se reproduce el contenido multimedia. Esta propiedad es independiente de la clase .logo. Puedes personalizar --playback-logo-image desde el selector body.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
Propiedades del fondo del reproductor
Las variables --background establecen las propiedades de fondo de todo el reproductor, que se ven durante el lanzamiento 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 Web Receiver:
Puedes usar las siguientes variables para personalizar las propiedades de .background:
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --background | negro | Propiedad background de CSS |
| --background-color | Propiedad background-color de CSS | |
| --background-image | Propiedad background-image de CSS | |
| --background-repeat | no-repeat | Propiedad background-repeat de CSS |
| --background-size | versión de canción | Propiedad background-size 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 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 de inactividad.
En el siguiente ejemplo, se establece --logo-image en un ícono de ecualizador llamado welcome.png. De forma predeterminada, la imagen se centra en el receptor:
cast-media-player {
--logo-image: url('welcome.png');
}
Pantalla del Web Receiver:
Puedes usar las siguientes variables para personalizar las propiedades de .logo:
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --logo-background | Propiedad background de CSS | |
| --logo-color | Propiedad background-color de CSS | |
| --logo-image | Propiedad background-image de CSS | |
| --logo-repeat | no-repeat | Propiedad background-repeat de CSS |
| --logo-size | Propiedad background-size de CSS |
Plantilla de CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Propiedades de la pantalla 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 las variables .logo cuando el receptor esté inactivo. Esto significa que podrías usar un conjunto de propiedades .logo en el lanzamiento y mostrar fondos o imágenes separados cuando el receptor esté inactivo.
Por ejemplo, podrías anular el fondo degradado blanco y plateado con dimgray y agregar un ícono animado de espera…:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Pantalla del Web Receiver:
Si no configuras estas propiedades, el receptor se establecerá de forma predeterminada en la configuración de .logo o en el nombre de la app cuando esté inactivo.
Puedes usar las siguientes variables para personalizar las propiedades de .splash:
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --splash-background | Propiedad background de CSS | |
| --splash-color | Propiedad background-color de CSS | |
| --splash-image | Propiedad background-image de CSS | |
| --splash-repeat | Propiedad background-repeat de CSS | |
| --splash-size | Propiedad background-size de CSS |
Plantilla de CSS
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Presentación de diapositivas
Para que se muestren hasta 10 imágenes en ciclo durante el estado de inactividad (en lugar de la imagen de presentación), usa los siguientes parámetros de la presentación de diapositivas.
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --slideshow-interval-duration | 10 s | Es el tiempo entre imágenes. |
| --slideshow-animation-duration | 2 s | Es la duración de la transición. |
| --slideshow-image-1 | Primera imagen de la presentación de diapositivas. | |
| --slideshow-image-2 | Segunda imagen de la presentación de diapositivas. | |
| --slideshow-image-3 | Tercera imagen de la presentación de diapositivas. | |
| --slideshow-image-4 | Cuarta imagen de la presentación de diapositivas. | |
| --slideshow-image-5 | Quinta imagen de la presentación de diapositivas. | |
| --slideshow-image-6 | Sexta imagen de la presentación de diapositivas. | |
| --slideshow-image-7 | Séptima imagen de la presentación de diapositivas. | |
| --slideshow-image-8 | Octava imagen de la presentación de diapositivas. | |
| --slideshow-image-9 | Novena imagen de la presentación de diapositivas. | |
| --slideshow-image-10 | Décima imagen de 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 la marca de agua
Aparece un .watermark mientras se reproduce contenido multimedia. Por lo general, se trata de una imagen pequeña y transparente que se muestra 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 |
|---|---|---|
| --watermark-background | Propiedad background de CSS | |
| --watermark-color | Propiedad background-color de CSS | |
| --watermark-image | Propiedad background-image de CSS | |
| --watermark-position | parte inferior derecha | Propiedad background-position de CSS |
| --watermark-repeat | no-repeat | Propiedad background-repeat de CSS |
| --watermark-size | Propiedad background-size 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 los anuncios, las fuentes, las imágenes del reproductor y otras propiedades desde el selector cast-media-player.
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --ad-title | Anuncio | Es el título del anuncio. |
| --skip-ad-title | Omitir anuncio | Texto del cuadro de texto Omitir anuncio. |
| --break-color | hsl(tono, 100%, 50%) | Color de la marca de pausa publicitaria. |
| --font-family | Open Sans | Familia de fuentes para los metadatos y la barra de progreso. |
| --spinner-image | Imagen predeterminada | Es la imagen que se mostrará durante el inicio. |
| --buffering-image | Imagen predeterminada | Imagen que se mostrará mientras se almacena en búfer. |
| --pause-image | Imagen predeterminada | Imagen que se mostrará mientras está en pausa. |
| --play-image | Es la imagen que se mostrará en los metadatos durante la reproducción. | |
| --theme-hue | 42 | El tono que se usará para el jugador. |
| --progress-color | hsl(tono, 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 otras ilustraciones, consulta Styled Media Receiver.
Sobrebarrido
Los diseños para TV tienen algunos requisitos particulares 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 cortar el borde exterior del diseño de una app para asegurarse de que se rellene toda la pantalla. Este comportamiento normalmente se denomina sobrebarrido. Para evitar que los elementos de la pantalla se recorten debido al sobrebarrido, incorpora un margen del 10% en todos los lados de tu diseño.
IU de audio predeterminada
MetadataType.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 IU personalizada
El SDK de Cast Web Receiver admite el uso de tu propio elemento de la IU personalizado en lugar de cast-media-player.
La vinculación de datos de la IU personalizada te permite usar tu propio elemento de la IU personalizado y la clase PlayerDataBinder para vincular la IU al estado del reproductor en lugar de agregar el elemento cast-media-player a tu receptor. El vinculador también admite el envío de eventos para los 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 código HTML para que el receptor web pueda usarlo. Si hay varios objetos MediaElement disponibles, debes etiquetar el MediaElement que deseas que use el Web Receiver. Para ello, agrega castMediaElement en la lista de clases del video, como se muestra a continuación. De lo contrario, el Web Receiver elegirá el primer MediaElement.
<video class="castMediaElement"></video>