Visión general: componentes

Producto (s)
Brightcove Player
Video Cloud
Papel (s)
Desarrollador de jugador
Tema (s)
arquitectura

El reproductor de Brightcove está construido sobre una arquitectura de componentes de interfaz de usuario personalizada y simple. Este tema proporciona una breve visión de los componentes y su estructura.

Este es un documento general. Para obtener información sobre cómo cambiar los componentes, consulte el Personaliza la apariencia del jugador documento.

Componentes etiquetados

A continuación, se muestran capturas de pantalla del jugador, la carga del reproductor y la reproducción de un video, con los componentes etiquetados.

En carga de jugador y hover

componentes en carga

Durante la reproducción

componentes de reproducción

Para obtener información sobre los selectores de CSS para estos componentes, consulte la Personaliza la apariencia del jugador documentos Selectores de componentes sección.

Estructura jerarquica

 

La estructura predeterminada del componente jerárquico del jugador es la siguiente:

Jugador PosterImage TextTrackDisplay DockText DockTitle DockDescription DockShelf LoadingSpinner BigPlayButton controlbar PlayToggle VolumePanelHorizontal MuteToggle VolumeControl VolumeBar VolumeLevel CurrentTimeDisplay TimeDivider DurationDisplay ProgressControl ProgressHolder SeekBar LoadProgressBar PlayProgressBar SeekHandle LiveControl RemainingTimeDisplay espaciador PlaybackRate ChaptersButton DescriptionsButton SubtitlesCaptionsButton AudioTrackButton FullscreenToggle ErrorDisplayModal ModalDialog InfoModal

También puede ver la estructura de los componentes por vista Elementos pestaña de las herramientas de desarrollo de un navegador. Usted ve los elementos en la captura de pantalla a continuación. Por ejemplo, resaltados en amarillo son los elementos secundarios de ControlBar.

elementos en herramientas de desarrollo

definiciones

Las definiciones para los componentes clave se dan en la siguiente tabla:

Componente Descripción
PosterImage La imagen mostrada hasta que el video comienza a reproducirse
TextTrackDisplay Texto que se muestra como una pista separada utilizada para subtítulos y subtítulos (en formato WebVTT)
LoadingSpinner La rueda giratoria animada que se muestra hasta que se carga el video
BigPlayButton El botón de reproducción se muestra dentro del área del botón en el momento de la carga
Barra de control El contenedor para todos los controles principales del jugador
PlayToggle El botón de reproducción que alterna entre reproducción y pausa
MuteToggle El botón para alternar entre audio silenciado y no
Control del volumen Barra deslizadora para controlar el nivel de volumen
VolumeLevel Muestra el nivel de volumen actual al pasar el puntero sobre la barra de volumen
VolumeHandle Muestra la posición actual del nivel de volumen y se puede arrastrar para ajustar el nivel de volumen
CurrentTimeDisplay La duración actual del video reproducido se muestra como mm: ss
TimeDivider La barra inclinada '/' que separa la duración actual y la duración del video
DurationDisplay La duración total del video
ProgressControl El componente que contiene las barras de progreso de búsqueda, carga y progreso
Barra de busqueda Barra de medios que se activa al recibir el evento que los medios han sido captados
LoadProgressBar Indica la progresión del video que se está buscando
PlayProgressBar Indica la progresión del video que se está reproduciendo
SeekHandle Muestra la posición actual de la cabeza lectora durante la reproducción y se puede arrastrar para ajustar la cabeza lectora
LiveControl Muestra la palabra EN VIVO si transmites un feed en vivo
RemainingTimeDisplay Muestra la duración del video aún por reproducir
Espaciador Elemento insertado en la Barra de control especialmente para agregar iconos
PlaybackRate Muestra la velocidad de reproducción
ChaptersButton Botón para mostrar capítulos
CaptionsButton Alternar para mostrar el formulario de configuración de subtítulos
FullScreenToggle Botón para alternar visualización a pantalla completa
CaptionsSettings Formulario para mostrar y modificar la configuración de subtítulos
DockText Contenedor para el título y la descripción
DockTitle Título del video
DockDescription Breve descripción del video
DockShelf Utilizado por el complemento de redes sociales

Información de clase

La clase de jugador y todas las clases de control heredan de la clase Componente o una subclase de Componente.

videojs.Control = videojs.Component.extend (); videojs.Button = videojs.Control.extend (); videojs.PlayToggle = videojs.Button.extend ();

La arquitectura del componente UI hace que sea más fácil agregar componentes secundarios a un componente principal y crear una interfaz de usuario completa, como los controles para el reproductor Video.js. Cuando agrega un componente secundario, inserta el elemento de ese elemento secundario en el elemento del elemento principal y le permite manipular el elemento según sea necesario, como se muestra a continuación:

myButton = myPlayer.controlBar.addChild ('Botón'); myButton.addClass ('bc-download-button'); myButton.on ('click', function () {...})