Optimiza tu contenido para pantallas inteligentes

Las pantallas inteligentes son dispositivos con funcionalidad táctil que permiten que las aplicaciones de receptores web admitan controles táctiles. El SDK de receptor web proporciona una experiencia de IU predeterminada con personalización adicional de los controles del reproductor.

En esta guía, se explica cómo optimizar tu aplicación Web Receiver cuando se inicia en pantallas inteligentes y cómo personalizar los controles del reproductor.

Cómo acceder a los controles de la IU

Se puede acceder al objeto de controles de la IU con el siguiente código:

const controls = cast.framework.ui.Controls.getInstance();

Si no usas un elemento cast-media-player, debes establecer la propiedad touchScreenOptimizedApp en true en UiConfig, en CastReceiverOptions.

context.start({
  uiConfig: {
    touchScreenOptimizedApp: true
  }
});

IU de video predeterminada

Los botones de control predeterminados se asignan a cada ranura en función de MetadataType y MediaStatus.supportedMediaCommands.

MetadataType.Movie y MetadataType.Generic

A. --playback-logo-image

B. MovieMediaMetadata.subtitle o GenericMediaMetadata.subtitle.

C. MovieMediaMetadata.title o GenericMediaMetadata.title.

D. MediaStatus.currentTime

E. MediaInformation.duration

F. ControlsSlot.SLOT_SECONDARY_1

G. ControlsSlot.SLOT_PRIMARY_1

H. Reproducir/Detener

I. ControlsSlot.SLOT_PRIMARY_2

J. ControlsSlot.SLOT_SECONDARY_2

Cuando el valor de supportedMediaCommands sea igual a ALL_BASIC_MEDIA, se mostrará el diseño de control predeterminado de la siguiente manera:

Cuando el valor de supportedMediaCommands sea igual a ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, se mostrará el diseño de control predeterminado de la siguiente manera:

Cuando el valor de supportedMediaCommands sea igual a PAUSE | QUEUE_PREV | QUEUE_NEXT, se mostrará el diseño de control predeterminado de la siguiente manera:

Cuando haya pistas de texto disponibles, el botón de subtítulos siempre se mostrará en SLOT_SECONDARY_1.

Para cambiar dinámicamente el valor de supportedMediaCommands después de iniciar un contexto de receptor, puedes llamar a PlayerManager.setSupportedMediaCommands a fin de anular el valor. Además, puedes agregar un comando nuevo con addSupportedMediaCommands o quitar el comando existente con removeSupportedMediaCommands.

IU de audio predeterminada

Tipo de metadatos:MUSIC_TRACK

A. --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist o MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

C. ControlsSlot.SLOT_SECONDARY_1

I. ControlsSlot.SLOT_PRIMARY_1

J. Reproducir/Detener

K. ControlsSlot.SLOT_PRIMARY_2

I. ControlsSlot.SLOT_SECONDARY_2

Cuando el valor de supportedMediaCommands sea igual a ALL_BASIC_MEDIA, se mostrará el diseño de control predeterminado de la siguiente manera:

Cuando el valor de supportedMediaCommands sea igual a ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, se mostrará el diseño de control predeterminado de la siguiente manera:

Para cambiar dinámicamente el valor de supportedMediaCommands después de iniciar un contexto de receptor web, puedes llamar a PlayerManager.setSupportedMediaCommands a fin de anular el valor. Además, puedes agregar comandos nuevos mediante addSupportedMediaCommands o quitar comandos existentes mediante removeSupportedMediaCommands.

Cómo personalizar el diseño del botón de control de la IU

Usa un diseño personalizado si deseas cambiar los botones en los controles de IU.

const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();

Luego, puedes asignar botones de control a 4 ranuras llamando a assignButton.

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_1,
  cast.framework.ui.ControlsButton.LIKE
)

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_2,
  cast.framework.ui.ControlsButton.DISLIKE
)

Y el diseño personalizado se mostrará de la siguiente manera:

Cuando el botón asignado no sea compatible en MediaStatus.supportedMediaCommands, se mostrará de color gris. Por ejemplo, si supportedMediaCommands es igual a ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE, se inhabilita el botón QUEUE_PREV.

Para cambiar dinámicamente el valor de supportedMediaCommands después de iniciar un contexto de receptor web, puedes llamar a PlayerManager.setSupportedMediaCommands a fin de anular el valor. Además, puedes agregar comandos nuevos mediante addSupportedMediaCommands o quitar los existentes mediante removeSupportedMediaCommands.

Imagen secundaria

La imagen secundaria proporciona a los desarrolladores de Cast la flexibilidad de agregar una imagen informativa a la IU para las aplicaciones de audio y video, por ejemplo, a fin de mostrar logotipos de canales locales o formatos multimedia. Esta nueva funcionalidad proporciona muy poca sobrecarga y, al mismo tiempo, mantiene una IU coherente en todas las plataformas de visualización de Cast: Chromecast, pantallas inteligentes y Chromecast con Google TV.