POR QUÉ LOS MINORISTAS NECESITAN REPRODUCTORES DE VÍDEO DE MARCA

Anything that can increase a business’s revenue by 10%–20% isn’t just essential; it’s mandatory. For top retailers, whose combined brand value exceeds $1 trillion, that doesn’t just mean using the right logo. Every detail on every customer touchpoint must support and convey the brand.increase a business’s revenue by 10%–20% isn’t just essential; it’s mandatory. For top retailers, whose combined brand value exceeds $1 trillion, that doesn’t just mean using the right logo. Every detail on every customer touchpoint must support and convey the brand.

Cuando las empresas auditan sus marcas, un elemento que a menudo se pasa por alto es el reproductor de vídeo en línea (OVP). Hoy en día, la mayoría de las empresas utilizan reproductores de vídeo en sus sitios web y aplicaciones, pero muchas aún no utilizan reproductores de marca. Puede que la empresa utilice un reproductor gratuito o que simplemente no se haya dado cuenta de que su OVP tiene funciones de marca. En cualquier caso, los reproductores genéricos erosionan la coherencia de la marca y pueden costar ingresos a la empresa.

Si no está seguro de si su proveedor ofrece reproductores de marca, tómese un momento para repasar los elementos que deben ser personalizables en cualquier plataforma.

ELEMENTOS DE REPRODUCCIÓN DE VÍDEO DE MARCA

Los reproductores de vídeo en línea actuales se basan en HTML5, lo que significa que técnicamente se pueden personalizar tanto como cualquier otro objeto web. Sin embargo, a efectos de marca, estos elementos suelen clasificarse en las cuatro categorías siguientes.

• Los colores. Aunque el color puede ser uno de los primeros elementos de marca en los que pensamos, el reproductor de vídeo puede ser uno de los últimos lugares en los que lo aplicamos. Todo, desde el botón de reproducción hasta el control de volumen o la barra de progreso, puede personalizarse con los colores de tu marca.
• Fuentes. Fuera de Comic Sans, la mayoría de nosotros probablemente nunca pensamos en la tipografía. Pero aunque no sepamos distinguir entre Helvetica y Arial, todos notaríamos si la "M" de McDonald's apareciera de repente en Times New Roman. Lo mismo se aplica al tiempo de ejecución y al texto flotante de su reproductor: una fuente incorrecta podría alterar la experiencia de marca.
• Iconos. Más allá de los logotipos, la iconografía es otro aspecto importante de la marca visual. Algunas marcas prefieren las líneas curvas, otras los bordes rectos. Algunas prefieren líneas delicadas, otras líneas gruesas. Al igual que ocurre con los colores y los tipos de letra, el botón de reproducción, el control de volumen y cualquier otro control del reproductor pueden personalizarse con distintos iconos.
• Controles. Para algunas marcas, los propios controles del reproductor pueden transmitir un mensaje equivocado. Para una marca minimalista, demasiados controles pueden crear desorden, mientras que algunos diseños de reproductores pueden resultar extraños para los espectadores de otros países. Por eso es importante poder ajustar tanto la visibilidad como la posición de los controles del reproductor de vídeo.

CÓMO MARCAR UN REPRODUCTOR DE VÍDEO

Los reproductores de vídeo pueden adaptarse a su marca de varias maneras. Por ejemplo, su desarrollador web podría hacer algunas ediciones rápidas en línea en el CSS de la página web. Sin embargo, este no es el mejor enfoque, ya que esas ediciones sólo se aplicarían a una página y al reproductor alojado en ella.

Para controlar mejor sus reproductores de vídeo de marca, debe gestionarlos desde su plataforma de vídeo. Y hay tres formas principales de hacerlo.

OPCIONES DE PLATAFORMA LISTAS PARA USAR

Las mejores plataformas de vídeo para minoristas deberían ofrecer varias opciones en sus interfaces para personalizar fácilmente su reproductor de vídeo. Por ejemplo, Brightcove permite ajustar rápidamente lo siguiente:

A diferencia de algunas soluciones tecnológicas que ofrecen paletas preestablecidas, la mayoría de las plataformas de vídeo te permiten personalizar completamente los colores con los valores hexadecimales, HSV o RGB de tu marca. Eso sí, no suelen tener opciones listas para usar para cambiar las fuentes de sus reproductores.

EDITOR JSON

Algunas plataformas incluyen un editor JSON que permite manipular directamente el código del reproductor. Aunque esto suele ser el dominio de desarrolladores experimentados, hay un par de ajustes sencillos que cualquiera puede realizar en el reproductor de Brightcove. (Seleccione un reproductor para editarlo en el módulo Reproductor de Brightcove y, a continuación, seleccione el Editor JSON).

• Remove the control bar.Remove the control bar. Because retailers want to keep the focus on their products, not the video experience, they often want to remove player controls completely. This is especially valuable for homepage players or other pages where you want looping videos that catch the eye without distracting from the purchase. All you need to do is add the property, "control_bar": false, and every control except the play button will be hidden.

• Stylize the play button.Stylize the play button. For brands that want to change how the play button reacts when you hover over it, Brightcove has two options. You can add a glow effect around the button, or you can make the button darken. Just add one of the following objects under the play_button property: "hover": "glow" or "hover": "darken".

Note:Note: When adding properties in JSON, be sure to close them and any preceding objects with a comma (,) unless directly followed by a close bracket (}). To prevent playback errors, the editor won’t accept invalid code and you won’t be able to save changes.

HOJAS DE ESTILO

La mayoría de los sitios web utilizan hojas de estilo en cascada (CSS) para establecer los estándares de la marca. En esencia, son documentos de texto sin formato que siguen un formato específico para ajustar los colores, las fuentes y los iconos de todos los elementos de una página web.

Los reproductores de vídeo de marca también pueden gestionarse mediante CSS, especialmente cuando necesitas realizar más personalizaciones de las que la plataforma proporciona de forma nativa. Sin embargo, si no eres desarrollador, consulta con uno antes de realizar cualquier cambio, ya que requiere conocer la sintaxis y los valores adecuados.

Para hacer un documento CSS, todo lo que necesitas es el Bloc de notas para Windows o TextEdit para Mac.

• Cree un nuevo documento (para TextEdit, seleccione Formato > Hacer texto sin formato)
• Añada sus selectores, propiedades y valores
• Guardar como archivo CSS (guardando el archivo con la extensión .css o cambiando el nombre del archivo más adelante).

El reproductor de Brightcove puede personalizarse con CSS accediendo al módulo Reproductores y seleccionando Plugins > Hojas de estilo. Puede cargar sus documentos aquí, y el reproductor tendrá la marca correspondiente en cualquier lugar de su sitio en el que aparezca. Para aquellos que carezcan de recursos de desarrollo, a continuación encontrará un par de personalizaciones sencillas que puede implementar usted mismo.

CAMBIAR LAS FUENTES DEL REPRODUCTOR

La mayor parte del texto de los reproductores de vídeo es muy pequeño (por ejemplo, el tiempo de ejecución, el texto hover, etc.). Así que haz cambios con precaución y considera la posibilidad de consultar a un especialista en UX si los estándares de tu marca no tienen en cuenta la legibilidad en diferentes plataformas. Dicho esto, para cambiar las fuentes en todo el reproductor, crea un documento CSS con sólo lo siguiente:

.video-js {

font-family: ;

}

After font-family and between the colon (:) and semicolon (;), add the font of your choice. Bear in mind that browsers support different fonts, and CSS is designed with a fallback system. At minimum, reference a recent list of common web fonts, and copy the font you want as displayed. For example, if you really want Comic Sans, your CSS doc would look like this:common web fonts, and copy the font you want as displayed. For example, if you really want Comic Sans, your CSS doc would look like this:

.video-js {

font-family: Comic Sans MS, Comic Sans, cursive;

}

La biblioteca predeterminada de familias de fuentes es limitada, por lo que tendrás que añadir una clase o URL de fuente al documento CSS para fuentes personalizadas. Consulta a tu desarrollador web para asegurarte de que haces referencia a la fuente de tu marca correctamente.

QUITAR TODOS LOS CONTROLES

Para los minoristas que quieren crear reproductores de cabecera web para vídeos de productos en bucle, no basta con eliminar las barras de control y progreso. Quieren eliminarlo todo, incluido el gran botón de reproducción. Para ello, todo lo que necesita es otro simple documento CSS.

.video-js .vjs-big-play-button {

display: none;

}

.video-js .vjs-control-bar {

display: none;

}

Además, asegúrese de que la opción "Mostrar título y descripción" no está seleccionada en la pestaña Estilo de su reproductor. De lo contrario, ambos aparecerán por defecto en la parte superior del reproductor.

GUIONES

Cambiar los colores y las fuentes de los reproductores de vídeo de marca es relativamente fácil porque estás editando atributos existentes; no estás cambiando lo que hacen ni añadiendo otros nuevos. Para cambiar por completo el diseño de un reproductor de vídeo, tendrás que utilizar secuencias de comandos.

While creating CSS docs can be relatively simple, Javascript isn’t something you can manipulate without development experience or assistance. If you have in-house resources to do so, check out our support documentation on player customization to get started. You can also connect with our Brightcove Global Services team for direct support.support documentation on player customization to get started. You can also connect with our Brightcove Global Services team for direct support.