Bienvenido al primer artículo de una serie de artículos técnicos que, en los próximos meses, tratarán temas como la personalización del nuevo reproductor, la seguridad y la transcodificación. Quería hablar de estos temas, a medida que Brightcove lanza nuevos productos, ya que surgen preguntas similares de clientes potenciales, clientes y socios. Por ejemplo, los clientes que habían invertido en Smartplayer de Brightcove, basado en Flash, querían saber por dónde empezar y qué grado de personalización ofrecía el nuevo reproductor.
El reproductor de Brightcove es una versión moderna de un reproductor de vídeo que utiliza HTML5 siempre que es posible. Quizá le interese saber que comenzó como un proyecto de código abierto patrocinado por Brightcove, Video.js. Ahora, sigue mejorando y realmente resuelve la importante inversión de tiempo que realizan los desarrolladores para crear experiencias de vídeo únicas para sus visitantes. Permítame mostrarle algunos ejemplos de cómo puede utilizar esta tecnología.
REPRODUCTORES DE VÍDEO HTML5 FÁCILES DE PERSONALIZAR
Personalización suele ser una palabra que infunde inquietud en la gente. No temas. Como el reproductor está construido con HTML5, es altamente personalizable y extensible. Tal vez desee modificar los colores de la apariencia del reproductor de vídeo para adaptarlos a su propiedad web, recopilar métricas y enviarlas a una plataforma de análisis (distinta de Brightcove Analytics) y permitir interacciones dentro de la página; todo esto es posible. Con algunos conocimientos de JS y CSS, realmente puede personalizar el reproductor de vídeo como desee y con facilidad.
Personalizar la apariencia del reproductor de vídeo es sencillo y se basa principalmente en CSS. Es posible cambiar el botón del reproductor, reducir el área del cabezal de reproducción, cambiar la ubicación del botón de reproducción y mucho, mucho más. Para una personalización más sencilla, el módulo Players de Studio permite cambiar el color del área de reproducción. Para cambios más sofisticados, anule el CSS del reproductor a nivel de página o añada un archivo CSS al reproductor.
Recurso: Cómo personalizar la apariencia del reproductor de vídeo
Ejemplo de personalización de la apariencia de un reproductor de vídeo
CREACIÓN DE INTERACCIONES CON PLUGINS DE REPRODUCTORES DE VÍDEO
El aspecto más potente del reproductor son claramente los plugins y JS/CSS en la página, que impulsan las interacciones del reproductor Estas API de reproductores de vídeo permiten escuchar eventos y luego realizar/programar una acción. Puede ser tan sencillo como añadir un botón de descarga o tan complejo como enviar métricas a Google Analytics u Omniture.
Recurso: Inicio rápido al desarrollo de plugins
Una razón para crear interacciones en un complemento, en lugar de en la página, es que el complemento puede residir dentro del código del reproductor de vídeo. Como parte del proceso de creación del reproductor, el código JS del complemento se ingiere e integra en el archivo JS del reproductor, lo que significa que, para cada solicitud del reproductor, sólo hay que enviar un único archivo. De hecho, cuando creo un plugin, empiezo construyendo la funcionalidad en un archivo JS, que se llama en la página que contiene el reproductor de vídeo. De esta forma, puedo revisar el código del plugin, mirar la consola de desarrollador y ajustar el código del plugin. Una vez que he conseguido que el plugin tenga la funcionalidad deseada, empaqueto el código en un plugin y lo adjunto al reproductor.
La codificación de un enlace relacionado en el reproductor de vídeo puede reunir todo su contenido relacionado.
Dado que el reproductor de Brightcove contiene el núcleo del reproductor Video.js, existe una amplia biblioteca de complementos que pueden utilizarse con el reproductor de Brightcove. Nota: No todos los complementos de la biblioteca VideoJS se han probado con el reproductor de Brightcove, por lo que se proporcionan tal cual.
Si necesita espacio para alojar sus archivos CSS y/o JS para el reproductor, disponemos incluso de la posibilidad de alojar estos archivos en un repositorio tipo git. Los repositorios pueden ser creados para cada cuenta, utilizando la API del Sistema de Entrega. Una vez que haya creado el repositorio y enviado los archivos al mismo, el reproductor podrá hacer referencia a estos archivos en la sección Plugins.
EJEMPLOS DE PERSONALIZACIÓN DE REPRODUCTORES DE VÍDEO
¿Busca inspiración sobre lo que puede hacer con el reproductor? En Player Lounge, comisariada por los ingenieros de ventas de Brightcove, encontrará magníficos ejemplos de personalización del reproductor. Eche un vistazo a la sección Muestras de código de la documentación del reproductor de Brightcove para empezar rápidamente. Espero que este artículo haya despertado su curiosidad sobre el reproductor de Brightcove y sobre lo fácil que es ampliar la funcionalidad del reproductor. La próxima vez hablaré de la transcodificación.
