The React Player Loader library provides more technical customers the ability to integrate their Brightcove Player with a React web application. This library defines a React component for loading the Brightcove Player in the browser. For complete details, see the brightcove/react-player-loader repository on GitHub.
Start video playback to see the specified video playing in a Brightcove Player. Review the code to see how the React component is implemented.
Using the CodePen
Here are some tips to effectively use the above CodePen:
- Toggle the actual display of the player by clicking the Result button.
- Click the HTML/CSS/JS buttons to display ONE of the code types.
- Later in this document the logic, flow and styling used in the application will be discussed in the Player/HTML configuration, Application flow and Application styling sections. The best way to follow along with the information in those sections is to:
- Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
- In CodePen, adjust what code you want displayed. You can change the width of different code sections within CodePen.
- View the Player/HTML configuration, Application flow and/or Application styling sections in another browser/browser tab. You will now be able to follow the code explanations and at the same time view the code.
The library is installed using NPM, using the following:
npm install --save @brightcove/react-player-loader
Including the library
To include the
@brightcove/react-player-loader library for your website or web application, you can use any of the methods shown in the GitHub repo. The sample in the CodePen above uses the
<script> Tags method.
No special configuration is required for the Brightcove Player you create for this sample.
In the HTML code, include
- The React library.
The React-DOM library. This package is used as the entry point for DOM-related rendering paths. It is intended to be used with the React library.
- The Brightcove React Player Loader library.
Next, include a
<div> tag with an
id attribute. This is the location where your Brightcove Player will be rendered by React.
The basic logic behind this application is:
- Get a reference to needed libraries
- Add the Brightcove Player to the HTML page
Get a reference to needed libraries
Get a reference to React, React-DOM and the Brightcove Player Loader libraries.
Add the Brightcove Player to the HTML page
Find the code which is labeled:
// +++ Add the Brightcove Player +++
ReactDOM.render() method in conjunction with the
React.createElement() method to add the Brightcove Player to the HTML page.
This sample uses the following parameters to play a video from the specified account:
Note that the Player Loader uses your default player if the
playerId parameter is not included.
For a list of available parameters, see the Parameters section of this document.
CSS styles are used to size the Brightcove Player.
For a list of available parameters that can be used with the Brightcove Player Loader, see the Player Loader Overview document. All of the parameters listed can be used with the React Player Loader, except as follows:
- You need to use the
onFailurecallbacks, since promises cannot be exported easily.
- If you don't provide the
onFailurecallback, failure will be handled by throwing an error.
refNodeInsertparameters cannot be used with the React Player Loader since they are used internally.
- Use the
baseUrlparameter to change the base URL. The Brightcove Player Loader uses the
setBaseUrl()method to do this, but the React Player Loader does not have access to this method.