Definir los estilos de los reproductores

Product
Video Cloud
Aplicable a roles
Editor
Versión
Brightcove 5
Módulos
Módulo de publicación
Edición
Todas

Después de crear un reproductor, puede personalizar su aspecto de muchas formas, para que la apariencia del reproductor refuerce el reconocimiento y coincida con la marca de su organización, el contenido del reproductor, el diseño de la página o cualquier otro factor que requiera modificar el diseño de su reproductor. La vista Editar estilos le permite personalizar cada componente de su reproductor en combinaciones prácticamente infinitas de colores y estilos. También puede personalizar componentes de imagen, imágenes de fondo, etiquetas y direcciones URL de pulsación pasante.

Si es un cliente de Brightcove Pro o Enterprise, también puede crear plantillas de reproductor personalizadas utilizando BEML, una función de plantilla de reproductor XML de Brightcove.

Definir los estilos

Para definir o modificar el aspecto visual de un reproductor:

  1. En el módulo de publicación, seleccione el reproductor.
  2. Haga clic en Estilos en la barra de herramientas de acciones. Se abre la vista Editar estilos:

    Editar estilos

  3. Seleccione los componentes de su reproductor que desee editar. Puede seleccionar un componente haciendo clic en el componente del panel de lienzo a la izquierda, o haciendo clic en el nombre del componente en el panel Áreas editables a la derecha. Cuando seleccione un componente para editarlo, el componente aparecerá resaltado en el panel de lienzo.
  4. Editar los componentes seleccionados. Las propiedades editables dependen del tipo de componente, como se describe más detalladamente a continuación.
  5. Haga clic en Guardar y cerrar cuando haya finalizado.

Definir estilos globales

Cuando defina estilos globales para su reproductor, puede seleccionar una imagen de fondo, un conjunto global de colores y un tema para su reproductor.

Definir el tema y el color global

Para seleccionar un tema y un conjunto global de colores:

  1. En Áreas editables, seleccione Global.
  2. En Editar, haga clic en la etiqueta Colores y temas.
  3. Utilizando los menús desplegables, seleccione el tema y el conjunto de colores que desea utilizar. Puede seleccionar uno entre dos conjuntos de colores (Claro u Oscuro) y uno entre tres temas (Deluxe, Plano o Mínimo) para cambiar el estilo de su reproductor.

Definir la imagen de fondo global

Para seleccionar una imagen de fondo global:

  1. En Áreas editables, seleccione Global.
  2. En Editar, haga clic en la etiqueta Selección de imágenes.
    • Haga clic en Cargar para cargar un nuevo archivo de imagen. Después de cargar una imagen, la tendrá disponible en su biblioteca multimedia.
    • Haga clic en Cambiar para cambiar desde la imagen asignada actualmente a otra imagen de su biblioteca multimedia.
    • Haga clic en X para anular la selección de la imagen asignada actualmente.

Seleccionar imágenes para los componentes de imagen

Puede seleccionar propiedades de imagen para su reproductor. Según el diseño de su reproductor, puede definir una imagen de fondo e imágenes de visualización para varios componentes del reproductor. Por ejemplo, el reproductor de Navegación por fichas y el reproductor de Navegación reducida por fichas permiten definir una imagen para los componentes de estos reproductores:

  • Imagen superior
  • Imagen inferior

Además, puede definir direcciones URL de pulsación pasante y texto de información sobre herramientas para los componentes de imagen. No todas las plantillas de reproductores admiten componentes de imagen; consulte Plantillas de reproductores para obtener más información, incluida la de las dimensiones de los componentes de imagen.

Para definir las propiedades de imagen:

  1. En Áreas editables, seleccione el componente de imagen que desea cambiar.
  2. En Editar, en la etiqueta Selección de imágenes:
    • Haga clic en Cargar para cargar un nuevo archivo de imagen.
    • Haga clic en Seleccionar para cambiar desde la imagen asignada actualmente a otra imagen de su biblioteca multimedia.
    • Haga clic en X para anular la selección de la imagen asignada actualmente.
  3. De forma opcional, en el campo URL de pulsación pasante, introduzca la URL donde desea enviar a los usuarios que hacen clic en la imagen. Se realizan unas comprobaciones de validez en las direcciones URL que introduzca y no podrá guardar la URL que no pase la comprobación de validez.
  4. De forma opcional, en el campo Información sobre herramienta , introduzca el texto que desee mostrar en el navegador del espectador cuando éste pase el cursor sobre la imagen.

Para obtener un mejor rendimiento, las imágenes que utilice no deben tener más de 1 MB. Las imágenes deben tener además un tamaño apropiado para la colocación de la imagen en la plantilla de reproductores; consulte Plantillas de reproductores para obtener más información.

Definir los colores de los componentes

Puede seleccionar colores personalizados para la mayoría de los componentes de reproductor. Un componente puede tener un número distinto de opciones de color editables, según cuál sea la función del componente en cualquier tema o conjunto de colores que haya seleccionado. Por ejemplo, el reproductor de vídeo: el componente de vídeo tiene una sola opción de color, Fondo, que se utiliza para definir el color de fondo que se muestra en el panel de visualización de vídeo cuando el reproductor no está mostrando otro contenido. Sin embargo, otros componentes permiten un diseño y un comportamiento mucho más sofisticado; por ejemplo, la lista de vídeo: el componente de los cuadros de elementos de lista tiene 10 opciones de color diferentes:

  • Gradiente superior
  • Gradiente medio
  • Gradiente inferior
  • Gradiente superior al pasar por encima
  • Gradiente medio al pasar por encima
  • Gradiente inferior al pasar por encima
  • Gradiente superior seleccionado
  • Gradiente medio seleccionado
  • Gradiente inferior seleccionado
  • Borde

Estas opciones de color le permiten personalizar cada aspecto del cuadro de elementos de lista, con diferentes opciones de color para sus elementos visuales (borde) y estados de comportamiento (normal, al pasar el ratón por encima, seleccionado). Nota: al cambiar un reproductor para que utilice un tema o un conjunto global de colores, todas las propiedades de color de todos los componentes del reproductor se devuelven a los valores predeterminados de ese tema o conjunto de colores.

Para seleccionar un color:

  1. En la página de Editar estilos, en Áreas editables, seleccione el componente que desea personalizar.
  2. En Editar, haga clic en la etiqueta Colores y temas.
  3. Amplíe el nombre de componente y haga clic en el botón selector de color cuadrado:

    Se abre una paleta de colores:

    Seleccione el color que desea haciendo clic en el cuadrado de color o escribiendo el código de color hexadecimal en el campo de texto y pulsando la tecla Enter. El selector de color muestra ahora el color configurado actualmente.

Usar gradientes

Algunos componentes y temas le permiten usar gradientes que sombrean los colores desde la parte superior al medio y la parte inferior del componente. Si no desea sombrear con gradiente, establezca los gradientes superior, medio e inferior en el mismo valor. Una alternativa es cambiar a un tema que no utilice gradientes.

Nota: al cambiar un reproductor para que utilice un tema o un conjunto global de colores, todas las propiedades de color de todos los componentes del reproductor se devuelven a los valores predeterminados de ese tema o conjunto de colores.

Etiquetas
colores, skins, estilos