Desarrollo de plantillas de reproductores

Un reproductor de Video Cloud se especifica mediante un documento XML llamado plantilla de reproductores. Video Cloud incluye varias plantillas de reproductor estándar, aunque también permite crear plantillas de reproductor personalizadas. Este documento describe los principales elementos que conforman una plantilla de reproductor personalizada.

Las plantillas de reproductor personalizadas sólo están disponibles para los clientes que utilizan Video Cloud Pro y Enterprise. Póngase en contacto con Brightcove para obtener más información sobre cómo obtener una versión superior de Video Cloud.

Este tema incluye la siguiente información:

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 reproductor. 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 coordenadas x, y), 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 en relación con su archivo XML 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, haga 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 el tema 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 Video Cloud. 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: personalice 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 Video Cloud, incluidos un botón de alternancia reproducción/pausa, un desplazador 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

El reproductor ChromelessVideoPlayer tiene un aspecto similar al componente VideoDisplay, pero sin el control de reproductor "chrome". Cuando el espectador sitúa el ratón sobre el área de visualización del 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

Una barra de desplazamiento 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 pulsado o no pulsado.

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 a su vez pueden contener otros componentes.

TileList

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

ListItem

Un ListItem debe definirse dentro de un componente List o TileList. 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

El 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

El 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. Los módulos personalizados para reproductores Flash deben compilarse en archivos SWF, mientras que los módulos para reproductores HTML5 deben ser archivos JavaScript; ambos tipos deben alojarse 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.

Requerimiento y validación de módulos SWF

Si se incluey el atributo required="true", será necesario cargar un complemento SWF correctamente para poder cargar el reproductor. La inclusión del atributo hash="[SHA1 código hash para el archivo]" le permite, además, verificar la suma de comprobación del archivo SWF:

<Module file="http://ruggs.net/stuff/plugins/TestPlugin.swf" required="true" hash="d7bff4532be0fff524e4f2feb2d79c998f30031f" >
  <param name="currentVideo" value="{videoPlayer.video.displayName}"/>
</Module>

El atributo required indica que el reproductor necesita un complemento para funcionar. Si por alguna razón el complemento no pudiera cargarse, el reproductor abortará la carga, desencadenándose un evento de error en la plantilla con código 16, de tipo PE_REQUIRED_COMPONENT.

Al utilizar el atributo hash, si el módulo se carga y la suma de comprobación no es acorde a lo esperado, aparecerá uno de estos dos errores. En caso de que no se necesite el módulo, se tratará de un código 18, de tipo PE_COMPONENT_CORRUPTED. En caso de que el módulo sea necesario, se tratará de un código 17, de tipo PE_REQUIRED_COMPONENT_CORRUPTED. Si el error es de tipo PE_COMPONENT_CORRUPTED, el reproductor podrá cargarse, pero el complemento no lo hará.

Nota: los parámetros añadidos a la ruta del archivo SWF son incompatibles con los complementos necesarios. Los parámetros deben añadirse utilizando en su lugar el elemento param, como en el código de ejemplo mostrado anteriormente.

Cómo obtener ayuda adicional

Si se le presenta algún problema durante la estilización de su reproductor BEML en el módulo de publicación, el Servicio de Asistencia Técnica de Brightcove puede prestarle ayuda. Puede enviar una solicitud de asistencia técnica aquí. Para que podamos darle una solución lo antes posible, le rogamos que tenga preparada la siguiente lista de requisitos.

  • Su Id. de editor/nombre de editor
  • Nombre de la plantilla de reproductor que intenta personalizar en el módulo de publicación
  • Una captura de pantalla del problema en el explorador
  • El identificador del reproductor o la URL de la página que esté probando

Tras enviar su solicitud de asistencia técnica, recibirá por correo electrónico una confirmación procedente del Servicio de Asistencia Técnica de Brightcove. Puede proporcionar información adicional al Servicio de Asistencia Técnica de Brightcove respondiendo a dicho correo de confirmación.

A continuación…

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

Publicar nuevo comentario

El contenido de este campo es confidencial y no se mostrará al público.
0

Comentarios