Cast Media Browse (CMB) es una función que permite a los usuarios de pantallas inteligentes descubrir e interactuar con tu catálogo de contenido de audio o video. Para hacerlo, CMB mejora el receptor web con una experiencia de navegación optimizada que se ajusta especialmente para pantallas inteligentes.
CMB define plantillas estandarizadas que brindan una experiencia de navegación coherente que sigue las convenciones de la IU de pantallas inteligentes. Los desarrolladores proporcionan datos para propagar estas plantillas estandarizadas. Las plantillas admiten contenido de audio y video, o bien una combinación de ambos.
Puntos de entrada
Hay dos puntos de entrada de CMB, desde los que un usuario puede explorar y seleccionar contenido mediante el control táctil o por voz.
Navegación en el reproductor
Desliza el dedo hacia arriba durante la reproducción para elegir entre una lista del contenido de la aplicación:
Video
Audio
Navegación de la página de destino
Cuando un receptor web con el elemento cast-media-player
se ejecuta en pantallas inteligentes, muestra CMB en estado IDLE.
Video y audio
Propagando contenido
Los desarrolladores son responsables de propagar la plantilla de cada punto de entrada con datos de cada elemento de contenido. El contenido que se usa para propagar la exploración en el reproductor puede ser diferente del que se usa para completar la exploración de la página de destino.
Usa la navegación en el reproductor para mostrar elementos relacionados con el contenido que un usuario está reproduciendo actualmente o elementos de una lista de reproducción. Los proveedores de TV en vivo también pueden usar este punto de entrada para propagar una lista de canales y facilitar el acceso.
Usa la exploración de la página de destino para dar a conocer el contenido original nuevo, el contenido que está publicado actualmente o el que podría ser de mayor interés para el usuario.
Habilitar exploración multimedia
Para proporcionar una lista de contenidos multimedia para navegar, llama a setBrowseContent
:
const controls = cast.framework.ui.Controls.getInstance(); controls.setBrowseContent(BrowseContent);
La IU de exploración multimedia se actualiza inmediatamente después de llamar a este método.
Altura del área segura
Cuando CMB está habilitado, la altura de la IU del SDK de Cast cambia y es posible que debas actualizar la IU del receptor web existente. Usa getSafeAreaHeight
para determinar la altura del área segura.
// Media Browse UI enabled controls.setBrowseContent(BrowseContent); console.log(controls.getSafeAreaHeight()); // 338px on Google Nest Hub // Media Browse UI disabled controls.setBrowseContent(null); console.log(controls.getSafeAreaHeight()); // 408px on Google Nest Hub
Eliminar exploración multimedia
Para quitar la IU de exploración multimedia, usa null
con setBrowseContent
:
controls.setBrowseContent(null);
Personalizar exploración multimedia
Explorando contenido
Usa BrowseContent
para personalizar el título de la IU de exploración multimedia y actualizar los elementos:
Usa BrowseItem
para mostrar el título, los subtítulos, la duración y la imagen de cada elemento en la IU de exploración multimedia:
Relación de aspecto
Usa targetAspectRatio
a fin de seleccionar la mejor relación de aspecto para tus elementos de imagen. El SDK de receptor web admite tres relaciones de aspecto:
Relación de aspecto | Ejemplo |
---|---|
SQUARE_1_TO_1 |
|
PORTRAIT_2_TO_3 |
|
LANDSCAPE_16_TO_9 |
Mensajes
Cuando un usuario selecciona uno de los elementos de la IU de exploración multimedia, el SDK de receptor web envía un mensaje de LOAD
a la aplicación de acuerdo con los valores del BrowseItem
seleccionado.
Código de muestra
const controls = cast.framework.ui.Controls.getInstance();
const item1 = new cast.framework.ui.BrowseItem();
item1.title = 'Title 1';
item1.subtitle = 'Subtitle 1';
item1.duration = 300;
item1.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item1.image = new cast.framework.messages.Image('1.jpg');
item1.entity = 'example://gizmos/1';
const item2 = new cast.framework.ui.BrowseItem();
item2.title = 'Title 2';
item2.subtitle = 'Subtitle 2';
item2.duration = 100;
item2.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item2.image = new cast.framework.messages.Image('2.jpg');
item2.entity = 'example://gizmos/2';
const items = [item1, item2];
const browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = items;
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
(e) => {
// Media browse
controls.setBrowseContent(browseContent);
});
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, loadRequestData => {
if (loadRequestData.media && loadRequestData.media.entity) {
// Load by entity
loadRequestData.media.contentId = entityToId(loadRequestData.media.entity);
loadRequestData.media.contentUrl = entityToUrl(loadRequestData.media.entity);
}
return loadRequestData;
});