Styled Media Receiver (SMR) permite que tu aplicación emisora reproduzca contenido multimedia en un dispositivo de transmisión sin crear tu propia app receptora personalizada. Puedes personalizar el esquema de colores de SMR y la marca si proporcionas tu propio archivo CSS durante el registro.
Registro
A fin de usar SMR en tu aplicación, selecciona la opción Styled Media Receiver cuando agregues una aplicación nueva a la Consola para desarrolladores del SDK de Google Cast. Consulta Registro para obtener más información. Esta opción incluye un vínculo para Preview de la hoja de estilo predeterminada, además de un campo en el que ingresas la URL a tu hoja de estilo. Puedes usar los estilos predeterminados o proporcionar la URL HTTPS a tu archivo CSS. Puedes usar tu propio servidor para alojar el archivo CSS. Una vez que proporciones la URL a tu archivo CSS, puedes hacer clic en Vista previa para ver cómo se verán tus estilos en el receptor.
Medios compatibles
Todos los receptores admiten los tipos de medios, como se describe en Contenido multimedia compatible.
SMR es compatible con video, audio y, también, imágenes, y se controla desde una aplicación emisora con el canal multimedia del SDK de Cast. La SMR cumple con todos los lineamientos de UX sobre la reproducción de contenido multimedia en un dispositivo de transmisión.
Fuentes
Consulta Fuentes preinstaladas para obtener una lista de las fuentes preinstaladas con el receptor.
CSS
El receptor de medios con estilo usa las siguientes clases de CSS:
- .background: Es el fondo del receptor.
- .logo: El logotipo que se muestra cuando se inicia el receptor. Esta clase también se usa cuando el receptor está en estado inactivo y no se declara ninguna clase .splash.
- .progressBar: la barra de progreso para la reproducción de medios.
- .splash: La pantalla que se muestra cuando el receptor está en estado inactivo. Si no se declara esta clase, el receptor utilizará de forma predeterminada el logotipo o el nombre de la app.
- .watermark: una marca de agua que se muestra cuando se reproduce el contenido multimedia
Aquí hay un archivo CSS de ejemplo que usa estas clases:
.background {
background: center no-repeat url(background.png);
}
.logo {
background-image: url(logo.png);
}
.progressBar {
background-color: rgb(238, 255, 65);
}
.splash {
background-image: url(splash.png);
}
.watermark {
background-image: url(watermark.png);
background-size: 57px 57px;
}
A continuación, se muestran algunas ilustraciones de estas clases en uso.
Video
Nota: El material gráfico de la imagen de video es de 96 x 143 píxeles y el primer recurso de imagen asociado con los metadatos de medios se selecciona para la visualización. Las imágenes se ajustan para ajustarse a las dimensiones esperadas.
Audio
Nota: La imagen del álbum de audio es de 384 × 384 píxeles y se selecciona el primer recurso de imagen asociado con los metadatos de contenido multimedia. Las imágenes se ajustan para ajustarse a las dimensiones esperadas.
Imágenes de Big Buck Bunny: (c) Copyright 2008, Blender Foundation / www.bigbuckbunny.org
Imagen de Sintel: (c) Copyright Blender Foundation / www.sintel.org