Desarrollo de plantillas de reproductores

Product
Video Cloud
Aplicable a roles
Desarrollador
Versión
Brightcove 5
Módulos
BEML
Edición
Pro, Enterprise
Creado por Chris Howell.

Las plantillas de reproductor personalizadas únicamente están disponibles para los clientes que utilizan Brightcove Pro y Enterprise. Si desea actualizar su cuenta de Brightcove, póngase en contacto con Brightcove para obtener más información.

Un reproductor de Brightcove se especifica mediante un documento XML llamado plantilla de reproductores. Brightcove incluye varias plantillas de reproductor estándar, aunque también permite crear plantillas de reproductor personalizadas. Este documento describe cómo escribir el documento XML que especifique la plantilla de reproductor personalizada.

Elementos principales en BEML

La definición de tipo de documento (DTD) para BEML (Brightcove Experience Markup Language) define el XML que se utiliza en una plantilla de reproductores. La Referencia de DTD de BEML describe todos los atributos y elementos XML que se pueden utilizar en un documento BEML. Las plantillas de reproductor estándar pueden ser útiles como punto de partida para desarrollar una plantilla de reproductor personalizada. Puede descargar el BEML para cada plantilla de reproductor estándar como archivo .zip.

Cada elemento de una plantilla de reproductores define aspectos visuales y no visuales de un reproductor. Un elemento puede definir un elemento de interfaz de usuario, como una etiqueta de texto, un banner o un reproductor de vídeo, o bien un elemento de diseño que establezca cómo se distribuyen los elementos de interfaz de usuario respecto a los demás y al diseño del reproductor en general. Los atributos de los elementos del reproductor definen aspectos como la ubicación de los elementos (en función de x y coordenadas), el estilo y la fuente de los datos que se visualizarán (el nombre del vídeo, la ubicación de la imagen, etc.). Los elementos principales de una plantilla de reproductores incluyen:

BEML y XML

Puesto que una plantilla de reproductor BEML es un documento XML, debe disponer de conocimientos básicos de XML para desarrollar una plantilla de reproductor personalizada utilizando BEML. Si necesita una guía sobre XML, puede utilizar los siguientes recursos básicos:

Los únicos problemas que tiene probabilidades de sufrir son los relacionados con los caracteres especiales. En marcado XML, utilice los caracteres de escape de los cinco caracteres especiales siguientes:

Carácter
Secuencia de escape
<
&lt;
>
&gt;
&
&amp;
'
&apos;
"
&quot;

Además, asegúrese de no incluir espacios en blanco adicionales en los atributos XML. Por ejemplo, realice esto:

<element id="foo" />

y no esto:

<element id = "foo" />

El espacio en blanco adicional que se encuentra antes y después de los signos igual de este ejemplo impide que se realicen retoques estilísticos en la plantilla de reproductores del módulo de publicación.

Elemento Labels: personalice y traduzca el texto

Con el elemento Labels en la plantilla de reproductores, puede personalizar el texto de todas las etiquetas del reproductor. Esto permite crear un reproductor con etiquetas en la mayoría de los idiomas, además de personalizar el texto con fines de estilo, marcas y promoción, entre otros. Para obtener más información, consulte Traducción de reproductores.

Elemento Theme: personalice la apariencia

Con el uso del elemento Theme en la plantilla de reproductores, se puede personalizar la apariencia de los reproductores de Brightcove. En función del grado de personalización que desee, puede utilizar el elemento Theme y los elementos Style para:

Tenga en cuenta que si una plantilla de reproductores no incluye ningún elemento Theme, no se podrá utilizar el módulo de publicación para modificar los estilos de un reproductor basado en dicha plantilla. Para obtener más detalles, consulte Temas y estilos en las plantillas de reproductores.

Elemento Layout: personalizar la posición

El elemento Layout controla qué elementos de interfaz de usuario se incluyen en un reproductor y dónde se colocan. Un elemento Layout puede contener dos tipos de elementos hijo: cuadros de diseño y componentes. Los cuadros de diseño son contenedores para otros elementos, que pueden ser cuadros de diseño adicionales o componentes. El cuadro de diseño contenedor define cuál es el diseño y el tamaño de los elementos hijo. Los componentes son los propios elementos de interfaz de usuario, como VideoPlayer, Label o Image.

En general, los cuadros de diseño no se muestran, aunque se les puede asignar un color y una imagen de fondo que se mostrará debajo de todos sus elementos hijo. Puede utilizar los siguientes cuadros de diseño estándar:

Canvas

Es el cuadro de diseño más simple. Los elementos hijo de Canvas se colocan totalmente dentro del cuadro de lienzo en la posición (x, y) especificada por el elemento hijo.

HBox

Cuadro horizontal que presenta todos los elementos hijo de forma horizontal. Los elementos hijo de HBox se colocan de forma secuencial de izquierda a derecha, y cada uno de ellos se sitúa directamente a la derecha del elemento hijo anterior, con un margen interno opcional en el medio.

VBox

Cuadro vertical que presenta todos los elementos hijo de forma vertical. Los elementos hijo de VBox se colocan de forma secuencial de la parte superior a la inferior, y cada uno de ellos se sitúa directamente debajo del elemento hijo anterior, con un margen interno opcional en el medio.

Grid

Un cuadro de diseño que permite un diseño más complejo, con elementos hijo que se presentan en columnas y filas.

TextRegion

TextRegion permite agrupar componentes de texto (como etiquetas, vínculos, etc.) y representa el grupo como un componente más unificado en el modo de retoque estilístico del módulo de publicación. Incluye una nueva función para especificar los colores de fondo y de los bordes del área.

Para obtener más información sobre el elemento Layout y los cuadros de diseño, consulte Elementos Layout en las plantillas de reproductores.

Componentes: elementos de interfaz de usuario

Entre los componentes existen varias clases de objetos diferentes, que se pueden incluir en el diseño de un reproductor. Un componente puede ser visual, como VideoPlayer o Image, o no visual. A continuación, se muestra cómo aparecen estos elementos en un reproductor:

Brightcove incluye los componentes estándar siguientes, que se describen de forma más detallada en Componentes de las plantillas de reproductores y en la Referencia DTD de BEML.

VideoPlayer

Una combinación de una ventana de vídeo y un conjunto de controles multimedia estándar de Brightcove, incluidos un botón de alternancia reproducción/pausa, un indicador progresivo de la línea de tiempo, controles de volumen, controles para maximizar y un botón de acceso al menú.

VideoDisplay

Una ventana de vídeo sin la barra de control multimedia estándar.

ChromelessVideoPlayer

ChromelessVideoPlayer tiene un aspecto similar al componente VideoDisplay sin el control de reproductor "chrome". Cuando el espectador pasa el ratón por encima del área de visualización de vídeo, los controles del reproductor aparecen en la parte inferior.

MediaControls

Un contenedor de diseño que incluye otros componentes que controlan la reproducción, incluidos Playhead y ToggleButtons.

Playhead

Un indicador progresivo que se mueve de forma continuada durante la reproducción y que muestra la posición del contenido multimedia actual. El usuario puede arrastrar Playhead hacia atrás y hacia adelante para avanzar o retroceder en el contenido multimedia.

VolumeControl

Un desplazador vertical que controla el volumen de audio durante la reproducción.

ToggleButton

Un gráfico con una etiqueta en el que se puede hacer clic. Puede alternar entre dos estados. Puede definir diferentes gráficos (iconos), etiquetas, información sobre herramientas y acciones de clic para los estados alternados y no alternados.

Label

Un componente de texto simple que permite añadir cualquier texto a un reproductor. El texto puede enlazarse de forma dinámica a cualquier propiedad de otro componente, por ejemplo, para mostrar el nombre del vídeo que se está reproduciendo en estos momentos.

TitleLabel

Un componente Label que puede mostrar un estado "seleccionado". Es útil para las listas en las que se debe distinguir el elemento seleccionado en estos momentos.

Image

Image carga un elemento visual escalable (JPEG, GIF o SWF) en un reproductor.

Button

Un gráfico con una etiqueta en el que se puede hacer clic y que puede emitir eventos.

ThumbnailButton

Muestra una imagen; cuando el espectador mueve el cursor por encima de la imagen, el botón muestra un icono de reproducción.

Link

Ofrece los medios para mostrar texto en el que se puede hacer clic en un reproductor; se utiliza para navegar a otra dirección URL o llamar a JavaScript.

List

Una lista de desplazamiento vertical con elementos de lista definidos por el usuario. List contiene ListItems, que pueden contener otros componentes.

TileList

Una lista en cuadrícula con elementos de lista definidos por el usuario. TitleList contiene ListItems, que pueden contener otros componentes.

ListItem

ListItem debe definirse en un componente List o TitleList. Se utiliza como definición visual de todos los elementos de lista mostrados en dicha lista. La definición de ListItem utiliza el mismo BEML que el elemento Layout. Sus subcomponentes pueden ser cualquier componente compatible salvo VideoPlayer u otro List.

Banner

Banner se añade a las funciones de publicidad de un reproductor. Al incluir un nodo banner, se admite un nuevo formato, que se añade a todas las llamadas al servidor de anuncios para informarle de que dicho banner puede mostrarse. El tamaño del banner determina el formato de anuncio compatible, por lo que un elemento banner de 468 x 60 es compatible, de forma predeterminada, con un formato de anuncio de banner de 468 x 60. También pueden especificarse formatos de anuncios adicionales para poder utilizar un área de banner grande para dar soporte a tamaños de banner pequeños. Los atributos de Banner controlan el modo de escalar y alinear los banners con el área grande.

ExpandingBanner

ExpandingBanner se añade a las funciones de publicidad de un reproductor. Al incluir un nodo banner expansible, se admiten dos nuevos formatos, que se añaden a todas las llamadas al servidor de anuncios para informarle de que dicho banner puede mostrarse. El tamaño del banner determina los formatos de anuncio compatibles, por lo que un elemento banner de 468 x 60 es compatible, de forma predeterminada, con un formato de anuncio de banner de 468 x 60 y una unidad de banner sincronizado de 468 x 60.

Spacer

Un componente de formato que crea espacios entre otros elementos.

TabBar

Una serie de fichas de paginación horizontal. TabBar permite realizar una selección única en la colección. TabBar muestra la navegación izquierda y derecha cuando el número de fichas supera las dimensiones del componente. De forma opcional, TabBar puede mostrar una ficha que crea una lista desplegable de sustitución.

SWFLoader

El componente SWFLoader permite cargar componentes personalizados que se pueden colocar y redimensionar en un reproductor. Se pasa un identificador de la API en tiempo de ejecución al SWF cargado, que le permite escuchar eventos e interactuar con el resto del reproductor. Para obtener más información sobre componentes personalizados, consulte Creación de componentes de reproductor personalizados y Adición de un componente personalizado a una plantilla de reproductores.

Elemento Modules: componentes personalizados

Puede utilizar el elemento Modules para cargar componentes personalizados que no se muestran en los reproductores. Se debe compilar un módulo personalizado en un archivo SWF y hospedar fuera de Brightcove. Para especificar un módulo personalizado, incluya un elemento Module como hijo del elemento Modules, que contenga un atributo file con la ruta del SWF que se cargará. Por ejemplo:

<Modules>
  <Module file="http://myserver/customReporting.swf" />
</Modules>

Opcionalmente, el elemento Module puede incluir cualquier número de parámetros, que se pasarán mediante el SWF cuando se cargue:

<Module file="http://server/file.swf">
  <param name="foo" value="bar" />
  <param name="food" value="grill" />
</Module>

Los valores de los parámetros también pueden estar enlazados a otros elementos de la plantilla de reproductores. Por ejemplo, si un módulo necesitara un parámetro flashvar establecido en el HTML, además del nombre del vídeo cada vez que se cambiara, el BEML siguiente lo permitiría.

<Module file="http://server/file.swf">
  <param name="customParam" value="{player.parameters.customParam}" />
  <param name="videoName" value="{videoPlayer.video.displayName}" />
</Module>

Un elemento Modules puede incluir más de un elemento Module hijo, si tiene más de un elemento SWF y desea cargarlo en el reproductor. Para los componentes personalizados que se deben mostrar en el reproductor, utilice el componente SWFLoader. Para obtener más información sobre componentes personalizados, consulte Creación de componentes de reproductor personalizados y Adición de un componente personalizado a una plantilla de reproductores.

A continuación…

Obtenga más información sobre los elementos que forman una plantilla de reproductores: