One of the missions of the core web player team here at Brightcove is to remove barriers to integration with the Brightcove Player. We aim to delight our customers with the Player’s flexibility, stability, and ease-of-use.
The fundamental architecture of the HTML5 web player has not changed much in the last five years or so. Players are managed via the Player Management API or the Studio (which uses the API), published on-demand, and hosted on our CDN at players.brightcove.net as stand-alone scripts.
In these past five years, web tooling has continued to grow more sophisticated and CDN-hosted JavaScript often does not fit into the new paradigms. Instead of pasting a <script> tag into their web templates or CMS, web developers and other advanced users expect to be able to install a package via npm, import it as an ES module, and bundle it into their application via webpack, Rollup, or similar.
Until now, most of these advanced users have been rolling their own solutions. What that tells us is that our Player ecosystem is not fully meeting our customers’ needs and these users are forced to work around us instead of with us. In order to better serve these users, we are now offering an optional suite of free, open source tools – all available on npm – that can be used with most modern web tooling stacks.
Collectively, we’re referring to these tools as the Brightcove Player Toolbox.
As of 2018, the Toolbox includes:
PLAYER LOADER
The Player Loader is our official, framework/tooling-agnostic, asynchronous script loader and embed generator for the Brightcove Player. It is independent of any specific toolchain and serves a dual purpose:
- It will generate any embed code with many options and support for customizations needed by some Brightcove Player plugins.
- It will download player scripts from our CDN asynchronously and automatically initialize any matching embeds.
This tool is entirely runtime-configured, meaning it will always download the latest player at runtime.
The Player Loader is available on npm as @brightcove/player-loader. Get started by reading the README or the Brightcove documentation.
EXAMPLE
NOTE: While this example uses ES modules, they are not required – you should be able to use CommonJS, AMD, or a simple script tag as well.
<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
The React Player Loader project offers users an official React component that can be used to embed and download a Brightcove Player using the Player Loader behind the scenes.
This component takes all options of the Player Loader (with some exceptions) and will handle disposing the player when the React component unmounts.
The React Player Loader is available on npm as @brightcove/react-player-loader. Get started by reading the README or the Brightcove documentation.
EXAMPLE (JSX)
NOTE: React/ReactDOM/global are NOT required, they are only used to show a working example.
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
The Player Loader webpack Plugin is our official webpack plugin for bundling the Brightcove Player. It has a single purpose: to prepend a Brightcove Player to a webpack bundle, avoiding an extra asnychronous HTTP request.
Unlike the Brightcove Player Loader, this tool does not create embeds.
However, it can be used with the Player Loader. In this setup, the webpack plugin will pre-populate a player while the Player Loader will be used to generate embeds. The Player Loader will not re-download Brightcove Players it has already downloaded or detected in memory ahead of time, so any Players prepended to the bundle will not be re-downloaded.
The one caveat with this tool is that it will only download the player at build time. In other words, if you re-publish your player, your webpack bundle will need to be re-created before the player updates on your website.
The Player Loader webpack Plugin is available on npm as @brightcove/player-loader-webpack-plugin. Get started by reading the README.
EXAMPLE
The following example code would be placed in your webpack.config.js file.
const PlayerLoaderPlugin = require('@brightcove/player-loader-webpack-plugin');
module.exports = {
// Other webpack configuration here...
plugins: [
new PlayerLoaderPlugin({accountId: '123456789', playerId: 'AbCDeFgHi'})
]
};
CONCLUSION
We hope this new collection of tools is helpful to our customers working with the Brightcove Player in modern toolchains.
While the Brightcove Player is neither free nor open source, the tools that comprise the Brightcove Player Toolbox are all free and open source and they fall under the Apache-2.0 license.
In other words, they are not officially supported by Brightcove, Inc. and feedback or bug reports should not be directed at Brightcove Customer Support.
With that caveat out of the way, it’s worth mentioning that our engineers are no strangers to open source and we are committed to doing our best to be responsive to feedback, bug reports, and pull requests on GitHub.
We welcome and encourage anyone to contribute to these open source tools to make them better for everyone!
REFERENCES
REPOSITORIES AND OPEN SOURCE DOCUMENTATION
BRIGHTCOVE SUPPORT DOCUMENTATION
