The official webpack plugin for the Brightcove Player.
Table of Contents generated with DocToc
- Basic Usage
- How it Works
- Putting it All Together
- Running the Demo Project
- More Resources
To install, use:
npm install --save-dev @brightcove/player-loader-webpack-plugin
This webpack plugin supports webpack 3.x & webpack 4.x
First, require the plugin at the top of your
const PlayerLoader = ;
Then create an instance of the
PlayerLoader plugin in the
accountIdis a required parameter!
Note: If you have more than one output, we will automatically pick the first output with a .js extension. If you want to control that see the
For a full list of options, see the Options section below.
How it Works
This webpack plugin will prepend your Brightcove Player to your bundle. Doing this can reduce the number of requests needed by your website and ensure that the global
bc function is available synchronously.
There are several limitations and caveats to using this plugin.
- iframe embeds are not supported. This plugin is only suitable for use with in-page/advanced embeds.
- If your player is updated or republished, the bundle will need to be re-generated before the bundled player is updated.
As an alternative, users who want an iframe embed or want to load their player script asynchronously can use the @brightcove/player-loader project instead, which downloads players at runtime rather than at build time. It does not have these limitations.
When your bundle executes, the Player will automatically set up any embed elements that match certain criteria:
- Must be either a
- Must have a
data-playerattribute that is equivalent to the
playerIdof the bundled player.
- Must have a
data-embedattribute that is equivalent to the
embedIdof the bundled player.
For example, if this project is used with the following configuration:
plugins:accountId: '12345678910'playerId: 'abc123xyz'embedId: 'default'
The following embed elements will be automatically initialized when the bundle executes:
This behavior is implicit to the Brightcove Player, not this plugin.
Manual Setup via
Any embeds that cannot be auto set up will need to be manually set up using the global
bc function (or
This function is created by all Brightcove Players. Its signature matches the
videojs function - please refer to that documentation for a complete description.
At a minimum, the
bc function takes an element or
id attribute value. And, just like
bc function returns a Video.js Player instance:
const player = ;
Setting a Source
Most Video Cloud users configure sources either in the Studio application or via programmatic methods. However, using the Video.js
src method works as well:
Putting it All Together
This is a complete example for using this webpack plugin, which will bundle an imaginary Brightcove Player and set it up manually (as described above). It may also be beneficial to try the included demo project.
First, set up the
const PlayerLoader = ;moduleexports =// Additional configuration for entry, output, etc.plugins:accountId: '12345678910';
// Because the player is prepended to the bundle, the global `bc` function// will be available immediately.//// Note that if your bundle needs to be executed in a Node.js environment// instead of just the browser, we advise using the something like the// `global` package on npm.const bc = windowbc;// Create a video-js element (or find one in the DOM).const playerEl = document;// Append it to the body.documentbody;// Make that element into a Brightcove Player.const player = ;// At this point, the player is created. A source can be set or any other// integration can be written.player;
Running the Demo Project
This project's Git repository comes with a working demo project.
- Clone the repo:
git clone https://github.com/brightcove/player-loader-webpack-plugin
- Move into the directory:
- Install dependencies:
- Set environment variables that will configure the demo. At a minimum,
BC_EMBED_IDare also supported).
- Run the demo:
npm run startto run the demo and a local server
- If everything succeeds, wait for the web server to start then open
http://localhost:9999/in the browser.
By default we prepend the player to the first file with a
.js extension that is listed as an output. If you only want to prepend to certain file(s) pass an array or string along with the filename of the files you want to prepend the player to.
A Video Cloud account ID.
The Brightcove Player embed ID for the player. The default value is correct for most users.
A Brightcove Player ID.