Una de las misiones del equipo del reproductor web principal de Brightcove es eliminar las barreras a la integración con el reproductor de Brightcove. Nuestro objetivo es deleitar a nuestros clientes con la flexibilidad, estabilidad y facilidad de uso del reproductor.
La arquitectura fundamental del reproductor web HTML5 no ha cambiado mucho en los últimos cinco años aproximadamente. Los reproductores se gestionan a través de la Player Management API o de Studio (que utiliza la API), se publican a la carta y se alojan en nuestra CDN en players.brightcove.net como guiones independientes.
En estos últimos cinco años, las herramientas web no han dejado de sofisticarse y el JavaScript alojado en CDN a menudo no encaja en los nuevos paradigmas. En lugar de pegar un <script> en sus plantillas web o CMS, los desarrolladores web y otros usuarios avanzados esperan poder instalar un paquete a través de npm, import como un Módulo ESe integrarlo en su aplicación a través de webpack, Enrollableo similar.
Hasta ahora, la mayoría de estos usuarios avanzados han estado desarrollando sus propias soluciones. Lo que esto nos indica es que nuestro ecosistema Player no satisface plenamente las necesidades de nuestros clientes y estos usuarios se ven obligados a trabajar a nuestro alrededor en lugar de con nosotros. Con el fin de servir mejor a estos usuarios, ahora estamos ofreciendo un conjunto opcional de herramientas gratuitas de código abierto - todas disponibles en npm - que se pueden utilizar con la mayoría de las pilas de herramientas web modernas.
En conjunto, nos referimos a estas herramientas como Brightcove Player Toolbox.
A partir de 2018, la caja de herramientas incluye:
CARGADOR DE REPRODUCTORES
El cargador del reproductor es nuestro cargador de secuencias de comandos asíncrono y generador de incrustaciones oficial, independiente del marco de trabajo y de las herramientas, para el reproductor de Brightcove. Es independiente de cualquier cadena de herramientas específica y tiene un doble propósito:
- Generará cualquier código de incrustación con muchas opciones y compatibilidad con las personalizaciones que necesitan algunos plugins del reproductor de Brightcove.
- Descargará secuencias de comandos de reproductores de nuestra CDN de forma asíncrona e inicializará automáticamente cualquier incrustación que coincida.
Esta herramienta está totalmente configurada en tiempo de ejecución, lo que significa que siempre descargará el último reproductor en tiempo de ejecución.
El Player Loader está disponible en npm como @brightcove/player-loader. Empiece leyendo el README o la documentación de Brightcove.
EJEMPLO
NOTA: Aunque este ejemplo utiliza módulos ES, no son necesarios - debería ser capaz de utilizar CommonJS, AMD, o una simple etiqueta script también.
<body>
<div id="player-container"></div>
</body>
import brightcovePlayerLoader from '@brightcove/player-loader';
brightcovePlayerLoader({
refNode: '#player-container',
accountId: '123456789',
playerId: 'AbCDeFgHi',
videoId: '987654321'
})
.then(function(success) {
// The player has been created!
// success.type will be "in-page" or "iframe"
// success.ref will be the player or the iframe element
})
.catch(function(error) {
// Player creation failed!
});
REACT PLAYER LOADER
El proyecto React Player Loader ofrece a los usuarios un componente oficial de React que puede utilizarse para incrustar y descargar un reproductor de Brightcove utilizando el Player Loader entre bastidores.
Este componente toma todas las opciones del Player Loader(con algunas excepciones) y se encargará de deshacerse del reproductor cuando el componente React se desmonte.
React Player Loader está disponible en npm como @brightcove/react-player-loader. Empiece leyendo el README o la documentación de Brightcove.
EJEMPLO (JSX)
NOTA: React/ReactDOM/global NO son obligatorios, sólo se utilizan para mostrar un ejemplo práctico.
import document from 'global/document';
import React from 'react';
import ReactDOM from 'react-dom';
import BrightcovePlayer from '@brightcove/react-player-loader';
let brightcovePlayer;
// A success callback will offer two ways of accessing the underlying player
// or iframe.
const onSuccess = function(success) {
console.log(success.ref);
console.log(brightcovePlayer.player);
};
brightcovePlayer = ReactDOM.render(
<BrightcovePlayer accountId='1234678' onSuccess={onSuccess}/>,
document.getElementById('fixture')
);
PLAYER LOADER WEBPACK PLUGIN
El complemento webpack Player Loader es nuestro complemento webpack oficial para empaquetar el reproductor de Brightcove. Tiene un único propósito: añadir un reproductor de Brightcove a un paquete webpack, evitando una solicitud HTTP asíncrona adicional.
A diferencia del cargador de reproductores de Brightcove, esta herramienta no crea incrustaciones.
Sin embargo, se puede utilizar con Player Loader. En esta configuración, el complemento webpack rellenará previamente un reproductor, mientras que el cargador de reproductores se utilizará para generar incrustaciones. El cargador de reproductores no volverá a descargar los reproductores de Brightcove que ya haya descargado o detectado en la memoria con antelación, por lo que no se volverán a descargar los reproductores añadidos al paquete.
El único inconveniente de esta herramienta es que sólo descargará el reproductor en el momento de la compilación. En otras palabras, si vuelves a publicar el reproductor, tendrás que volver a crear el paquete webpack para que el reproductor se actualice en tu sitio web.
El Player Loader webpack Plugin está disponible en npm como @brightcove/player-loader-webpack-plugin. Empiece leyendo el README.
EJEMPLO
El siguiente código de ejemplo se colocaría en su webpack.config.js archivo.
const PlayerLoaderPlugin = require('@brightcove/player-loader-webpack-plugin');
module.exports = {
// Other webpack configuration here...
plugins: [
new PlayerLoaderPlugin({accountId: '123456789', playerId: 'AbCDeFgHi'})
]
};
CONCLUSIÓN
Esperamos que esta nueva colección de herramientas sea útil para nuestros clientes que trabajan con el reproductor de Brightcove en cadenas de herramientas modernas.
Aunque el reproductor de Brightcove no es gratuito ni de código abierto, las herramientas que componen Brightcove Player Toolbox son todas gratuitas y de código abierto, y están sujetas a la licencia Apache-2.0.
En otras palabras, no cuentan con el soporte oficial de Brightcove, Inc. y los comentarios o informes de errores no deben dirigirse al Servicio de Atención al Cliente de Brightcove.
Una vez hecha esta salvedad, merece la pena mencionar que nuestros ingenieros no son ajenos al código abierto y nos comprometemos a hacer todo lo posible para responder a los comentarios, informes de errores y solicitudes de extracción en GitHub.
Invitamos y animamos a todo el mundo a contribuir a estas herramientas de código abierto para que sean mejores para todos.
REFERENCIAS
REPOSITORIOS Y DOCUMENTACIÓN DE CÓDIGO ABIERTO
DOCUMENTACIÓN DE APOYO DE BRIGHTCOVE
