El SDK de Web Receiver proporciona una IU de reproductor integrada. Para implementar esta IU en tu app personalizada de 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 CSS intercalados, una hoja de estilo CSS o style.setProperty en JavaScript.
En las siguientes secciones, aprenderás a personalizar cada área del elemento del reproductor multimedia. Puedes usar las siguientes plantillas como ayuda 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 de tu 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 del 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 |
| --background-color | Propiedad de color de fondo de CSS | |
| --background-image | Propiedad de imagen de fondo de CSS | |
| --background-repeat | sin repeticiones | Propiedad de CSS background-Repeat |
| --background-size | versión de canción | Propiedad de tamaño del fondo 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 la app receptora. Si no proporcionas ninguna variable .splash, la clase .logo también se muestra cuando el receptor se encuentra en estado inactivo.
En el siguiente ejemplo, se configura --logo-image en un ícono de ecualizador llamado welcome.png. De forma predeterminada, se muestra una imagen en el centro de tu 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-background | Propiedad en segundo plano de CSS | |
| --logo-color | Propiedad de color de fondo de CSS | |
| --logo-image | Propiedad de imagen de fondo de CSS | |
| --logo-repeat | sin repeticiones | Propiedad de CSS background-Repeat |
| --logo-size | Propiedad de tamaño del fondo de CSS |
Plantilla de CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Propiedades de Splash
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 la app receptora esté inactiva. Eso significa que puedes usar un conjunto de propiedades de .logo durante el inicio y mostrar fondos o imágenes separados cuando la app receptora esté inactiva.
Por ejemplo, puedes anular el fondo gradiente de blanco y plateado con dimgray y agregar un ícono animado Waiting...:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Pantalla del receptor web:
Si no configuras estas propiedades, la app receptora usará de forma predeterminada la configuración de .logo
o el nombre de la app cuando esté inactiva.
Puedes usar las siguientes variables para personalizar las propiedades de .splash:
Variables y valores predeterminados
| Nombre | Valor predeterminado | Descripción |
|---|---|---|
| --splash-background | Propiedad en segundo plano de CSS | |
| --splash-color | Propiedad de color de fondo de CSS | |
| --splash-image | Propiedad de imagen de fondo de CSS | |
| --splash-repeat | Propiedad de CSS background-Repeat | |
| --splash-size | Propiedad de tamaño del fondo 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 recorran hasta 10 imágenes durante el estado inactivo (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 | 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 la marca de agua
Aparecerá una .watermark mientras se esté reproduciendo contenido multimedia. Por lo general, es una imagen pequeña y transparente que se ubica de forma predeterminada en la esquina 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 en segundo plano de CSS | |
| --watermark-color | Propiedad de color de fondo de CSS | |
| --watermark-image | Propiedad de imagen de fondo de CSS | |
| --watermark-position | parte inferior derecha | Propiedad de posición en segundo plano de CSS |
| --watermark-repeat | sin repeticiones | Propiedad de CSS background-Repeat |
| --watermark-size | Propiedad de tamaño del fondo 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 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(matiz, 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 | La imagen que se mostrará durante el inicio. |
| --buffering-image | Imagen predeterminada | La imagen que se mostrará durante el almacenamiento en búfer. |
| --pause-image | Imagen predeterminada | La imagen que se mostrará mientras la app esté en pausa. |
| --play-image | Imagen que se mostrará en los metadatos durante la reproducción. | |
| --theme-hue | 42 | Es el matiz que se usará para el reproductor. |
| --progress-color | hsl(matiz, 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, además de ilustraciones adicionales, consulta el receptor de medios con estilo.
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 una imagen en pantalla completa a los usuarios. 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 se suele denominar sobrebarrido. Incorpora un margen del 10% en todos los lados del diseño para evitar que los elementos de la pantalla se recorten debido al sobrebarrido.
IU de audio predeterminada
MetadataType.MUSIC_TRACK
R. --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 la app receptora de transmisión web 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 la clase PlayerDataBinder para vincular la IU al estado del reproductor, en lugar de agregar el elemento cast-media-player a tu receptor. 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 la 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, Web Receiver elegirá el primer MediaElement.
<video class="castMediaElement"></video>