Controles del reproductor nativo de Brightcove

En este tema, aprenderá a usar y personalizar los controles del reproductor con los SDK nativos de Brightcove.

Introducción

Al fusionar la estética de Brightcove Web Player con los estándares de las plataformas iOS y Android, los controles de reproducción nativa de Brightcove brindan una apariencia elegante además de un sólido conjunto de funcionalidades desde el primer momento.

UI dinámica

Los controles del reproductor nativo de Brightcove son altamente adaptables para garantizar que su contenido se muestre en una hermosa interfaz de usuario, independientemente de la situación.

Tamaño de pantalla adaptable

Asegurarse de que los elementos de la interfaz de usuario sean lo suficientemente grandes para verlos y usarlos claramente es crucial para cualquier aplicación móvil. Los controles del reproductor nativo de Brightcove contienen lógica para determinar cuánto espacio está disponible para la interfaz de usuario. Si el ancho cae por debajo de cierto umbral, los controles cambiarán automáticamente para usar una configuración de dos líneas.

Controles del jugador
Controles del jugador
Controles de reproductor compacto
Controles de reproductor compacto

Androide

El SDK nativo para Android comprueba el tamaño de la pantalla del dispositivo para configurar el diseño de los controles del reproductor.

  • Cuando el ancho es 480dp o mayor, se utiliza el diseño de una línea.
  • Cuando el ancho es menor que 480dp , se utiliza el diseño compacto de dos líneas.

Para obtener más información sobre los píxeles independientes de la densidad (dp), consulte la Admite diferentes densidades de píxeles documento.

iOS

El SDK nativo para iOS comprueba el tamaño de la pantalla del dispositivo para configurar el diseño de los controles del reproductor.

  • Cuando el ancho es 450px o mayor, se utiliza el diseño de una línea.
  • Cuando el ancho es menor que 450px , se utiliza el diseño compacto de dos líneas.

Modos de reproducción

Su reproductor puede contener diversos tipos de contenido a lo largo de su ciclo de vida, cada uno de los cuales requiere un diseño de interfaz de usuario específico. Los controles del reproductor nativo de Brightcove contienen lógica para determinar automáticamente si el tipo de contenido es VoD, Live o Live DVR y adaptar la interfaz de usuario en consecuencia, ¡incluso a través de una lista de reproducción de tipos de contenido cambiantes!

Video a pedido (VoD)

La interfaz VoD, que representa la mayoría de las experiencias de reproducción, es la raíz de todos los diseños de la interfaz de usuario del reproductor.

Desplácese por las imágenes a continuación para ver los controles del reproductor de Brightcove. Observe que los controles cambian a un diseño compacto de dos líneas cuando el ancho del visor es pequeño:

 

  • Controles de Android
  • Controles compactos de Android
  • Botón de subtítulos ocultos
  • controles de iOS
  • Controles compactos de iOS

Las características notables de Brightcove Player Controls incluyen:

  • Botón de reproducción / pausa
    • Reproduce y pausa el contenido.
  • Botón de retroceso
    • Cuando se presiona, hace que el contenido retroceda 10 segundos.
  • Barra de búsqueda mejorada
    • Muestra el contenido reproducido en rosa.
    • Muestra el contenido almacenado en búfer en gris claro
    • Admite el uso de marcadores para anuncios u otros fines (Android)
  • Botón de subtítulos ocultos
    • Solo se muestra cuando se detectan subtítulos. Al seleccionar este botón, aparece el menú de configuración de subtítulos ocultos.
  • Botón de pantalla completa
    • Permite al espectador ir a pantalla completa o volver a la reproducción en línea.
  • Botón Airplay (solo iOS)
    • Solo se muestra si se detectan dispositivos Airplay. Esta función permite al espectador configurar la transmisión de Airplay.

Vivir

La interfaz de usuario en vivo oculta ciertos elementos con los que un usuario no podría interactuar. Los elementos eliminados incluyen el botón de retroceso y la barra de búsqueda. Sin embargo, se agrega una nueva etiqueta "EN VIVO", que cuando está verde indica que el contenido que se está viendo es en vivo.

Video en vivo de iOS
Video en vivo de iOS

DVR en vivo

El formato Live DVR ofrece la misma funcionalidad que el diseño VoD, además de una etiqueta LIVE adicional que se vuelve verde cuando el contenido está en vivo y gris cuando el espectador está viendo contenido más antiguo. Además, la etiqueta LIVE actúa como un botón que se puede presionar en cualquier momento para buscar el momento en vivo más reciente.

Video en vivo de iOS DVR
Video en vivo de iOS DVR

Personalización

¿Quieres cambiar los colores o la máscara para que coincida con los temas de color de tu aplicación? ¡No es un problema! Los controles del reproductor nativo de Brightcove se diseñaron para que se puedan personalizar fácilmente. Estas son algunas de las formas en que puede personalizar los controles:

  • Intercambia colores y usa tus propios botones personalizados para crear temas personalizados. El SDK nativo para Android le permite incluir / excluir fácilmente una amplia variedad de botones comunes. Aquí, los botones de control se han cambiado a naranja y la barra de búsqueda tiene una imagen personalizada.
    Controles personalizados de Android
    Controles personalizados de Android
  • Si bien el SDK nativo para iOS también le permite elegir entre un conjunto de botones y diseños comunes, también puede crear su propio diseño personalizado. A continuación, se muestra un ejemplo de un diseño personalizado.
    Controles personalizados de iOS
    Controles personalizados de iOS
  • Alternativamente, puede eliminar botones para crear un diseño simple y limpio.
    Controles simples de iOS
    Controles simples de iOS

Botones de avance rápido y rebobinado

Los SDK nativos de Brightcove le permiten agregar botones de avance rápido y rebobinado a los controles del reproductor.

Androide

Para crear su propio controlador de medios personalizado, hay ID predefinidos que puede usar.

Para obtener detalles de implementación, consulte lo siguiente:

iOS

El SDK incluye un botón de retroceso en el diseño predeterminado. También puede agregar su propio botón de avance creando su propio diseño.

Para un botón personalizado, puede realizar una búsqueda en el controlador de reproducción. Para determinar dónde desea buscar, obtenga la hora actual, sume/reste 10 segundos (por ejemplo) y luego use ese valor.

Para obtener detalles de implementación, consulte lo siguiente:

Accesibilidad

Las funciones de accesibilidad vienen de fábrica como parte estándar de nuestra interfaz de usuario, sin necesidad de configuración adicional.

Personas con discapacidad auditiva

Los controles del reproductor nativo de Brightcove integran un botón de subtítulos en cada diseño para garantizar que cuando los subtítulos estén disponibles, la experiencia de visualización de los mismos se pueda personalizar fácilmente. Para obtener más información sobre los subtítulos ocultos con los SDK, consulte nuestro Formatos de video y subtítulos sección.

Deficientes visuales

Androide

¡Próximamente, en breve, pronto!

iOS

¡Próximamente, en breve, pronto!