El receptor de contenido multimedia 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 proporciona tu propio archivo CSS para personalizar el esquema de colores y el desarrollo de la marca SMR durante el registro.
Registro
Para usar SMR en tu app, selecciona la opción Receptor de contenido multimedia con estilo Cuando agregas una nueva aplicación Consola para desarrolladores del SDK de Google Cast. Consulta Registro para obtener más información. Esta opción incluye un vínculo para Obtener vista previa de la hoja de estilo predeterminada, así como un campo donde ingresa 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 de tu archivo CSS, puedes hacer clic en Vista previa. para ver cómo se verán tus estilos en la app receptora.
Contenido multimedia compatible
Todos los receptores admiten los tipos de medios, como se describe en Contenido multimedia admitido.
El SMR admite video, imágenes y audio, y se controla desde un remitente aplicación a través del canal de contenido multimedia del SDK de Cast. El SMR cumple plenamente 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 fuentes preinstaladas con el receptor.
CSS
El receptor de contenido multimedia con estilo usa las siguientes clases de CSS:
- .background: El fondo para el receptor.
- .logo: Es el logotipo que se muestra cuando se inicia el receptor. Esta clase también es que se usa cuando el receptor está en estado inactivo y no hay ninguna clase .splash declarado.
- .progressBar: Es la barra de progreso para la reproducción de contenido multimedia.
- .splash: Es la pantalla que se muestra cuando el receptor se encuentra en estado inactivo. Si esta no se declara la clase, el receptor usará .logo o el nombre de la app de forma predeterminada.
- .watermark: Es una marca de agua que se muestra cuando se reproduce el contenido multimedia.
A continuación, se muestra un ejemplo de un archivo CSS 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: La imagen de video tiene 96 x 143 píxeles y es el primer recurso de imagen. asociados con los metadatos multimedia están seleccionados para mostrarse. Las imágenes se ajustan a que se ajusten a las dimensiones esperadas.
Audio
Nota: La imagen del álbum de audio es de 384 x 384 píxeles y es el primer recurso de imagen. asociados con los metadatos multimedia están seleccionados para mostrarse. Las imágenes se ajustan a que se ajusten a las dimensiones esperadas.
Imágenes de Big Buck Bunny: (c) Copyright 2008, Smoother Foundation / www.bigbuckbunny.org
Imagen de Sintel: (c) Copyright Mergeer Foundation / www.sintel.org