Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
@brightcove/player-loader-webpack-plugin
Advanced tools
The official webpack plugin for the Brightcove Player.
The official webpack plugin for the Brightcove Player.
Table of Contents generated with DocToc
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 webpack.config.js
:
const PlayerLoader = require('@brightcove/player-loader-webpack-plugin');
Then create an instance of the PlayerLoader
plugin in the plugins
array:
Note:
accountId
is a required parameter!
plugins: [
new PlayerLoader({accountId: '12345678910'})
]
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
prependTo
option.
For a full list of options, see the Options section below.
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.
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:
<video>
or <video-js>
element.data-player
attribute that is equivalent to the playerId
of the bundled player.data-embed
attribute that is equivalent to the embedId
of the bundled player.For example, if this project is used with the following configuration:
plugins: [
new PlayerLoader({
accountId: '12345678910',
playerId: 'abc123xyz',
embedId: 'default'
})
]
The following embed elements will be automatically initialized when the bundle executes:
<video-js
data-player="abc123xyz"
data-embed="default">
</video-js>
<video
data-player="abc123xyz"
data-embed="default">
</video>
This behavior is implicit to the Brightcove Player, not this plugin.
bc
FunctionAny embeds that cannot be auto set up will need to be manually set up using the global bc
function (or window.bc
).
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 videojs
, the bc
function returns a Video.js Player instance:
const player = bc(document.querySelector('video-js'));
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:
player.src({src: 'https://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4'});
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 webpack.config.js
properly:
const PlayerLoader = require('@brightcove/player-loader-webpack-plugin');
module.exports = {
// Additional configuration for entry, output, etc.
plugins: [
new PlayerLoader({accountId: '12345678910'})
]
};
Second, in the JavaScript source (somewhere in the webpack entry point or in an imported path):
// 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 = window.bc;
// Create a video-js element (or find one in the DOM).
const playerEl = document.createElement('video-js');
// Append it to the body.
document.body.appendChild(playerEl);
// Make that element into a Brightcove Player.
const player = bc(playerEl);
// At this point, the player is created. A source can be set or any other
// integration can be written.
player.src({src: 'https://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4'});
This project's Git repository comes with a working demo project.
git clone https://github.com/brightcove/player-loader-webpack-plugin
cd player-loader-webpack-plugin
npm i
BC_ACCOUNT_ID
: export BC_ACCOUNT_ID="1234567890"
(BC_PLAYER_ID
and BC_EMBED_ID
are also supported).npm run start
to run the demo and a local serverhttp://localhost:9999/
in the browser.prependTo
array|string
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.
accountId
string
| number
A Video Cloud account ID.
embedId
string
'default'
The Brightcove Player embed ID for the player. The default value is correct for most users.
playerId
string
'default'
A Brightcove Player ID.
FAQs
The official webpack plugin for the Brightcove Player.
The npm package @brightcove/player-loader-webpack-plugin receives a total of 43 weekly downloads. As such, @brightcove/player-loader-webpack-plugin popularity was classified as not popular.
We found that @brightcove/player-loader-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 87 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.