El receptor de medios con estilo (SMR) permite que tu aplicación emisora reproduzca contenido multimedia en un dispositivo de transmisión sin crear tu propia aplicación receptora personalizada. Puedes personalizar el esquema de colores y el desarrollo de la marca de SMR proporcionando tu propio archivo CSS durante el registro.
Registro
Si deseas usar el SMR en tu aplicación, selecciona la opción receptor de medios con estilo cuando agregues una aplicación nueva en la consola para desarrolladores del SDK de Google Cast. Consulte Registro para obtener más información. Esta opción incluye un vínculo para obtener una vista previa de la hoja de estilo predeterminada, así como un campo en el que puedes ingresar la URL de 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 diseños en el receptor.
Contenido multimedia compatible
Todos los receptores admiten los tipos de contenido multimedia, como se describe en Contenido multimedia compatible.
El SMR admite video, audio e imágenes, y se controla desde una aplicación emisora mediante el canal de medios del SDK de Cast. El SMR cumple con los lineamientos de UX para la reproducción de contenido multimedia en un dispositivo de transmisión.
Escribir 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: El fondo del receptor.
- .logo: Es 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 una clase .splash.
- .progressBar: Es la barra de progreso de la reproducción de contenido multimedia.
- .splash: Es la pantalla que se muestra cuando el receptor está inactivo. Si no se declara esta clase, el receptor usará .logo o el nombre de la app de forma predeterminada.
- .watermark: marca de agua que se muestra cuando se reproduce el contenido multimedia.
Este es un ejemplo de archivo CSS que utiliza 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 se selecciona para mostrar el primer recurso de imagen asociado con los metadatos multimedia. Las imágenes se escalan para adaptarse a las dimensiones esperadas.
Audio
Nota: La portada del álbum de audio es de 384 x 384 píxeles y se selecciona para mostrar el primer recurso de imagen asociado con los metadatos multimedia. Las imágenes se escalan para adaptarse 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