Contact Support | System Status
Page Contents

    React Player Loader

    In this topic, you will learn how to use the React Player Loader to load a Brightcove Player in the browser as a React component.


    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.

    React is a JavaScript library for building interactive user interfaces. It updates and renders your components when your data changes. To learn more about it, visit the React home page.

    Player example

    Start video playback to see the specified video playing in a Brightcove Player. Review the code to see how the React component is implemented.

    See the Pen React with Brightcove Player by Brightcove Learning Services (@bcls1969) on CodePen.

    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:
      1. Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
      2. In CodePen, adjust what code you want displayed. You can change the width of different code sections within CodePen.
      3. 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.

    Player/HTML configuration

    No special configuration is required for the Brightcove Player you create for this sample.

    In the HTML code, include <script> tags for the following minified JavaScript files:

    • 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.

    <div id='container'></div>

    Application flow

    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 +++

    Use the 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:

    • accountId
    • videoId

    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.

    Application styling

    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 onSuccess and onFailure callbacks, since promises cannot be exported easily.
    • If you don't provide the onFailure callback, failure will be handled by throwing an error.
    • The refNode and refNodeInsert parameters cannot be used with the React Player Loader since they are used internally.
    • Use the baseUrl parameter 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.

    Inline playback

    The playsinline attribute tells the player to play video within the element's playback area. Because React Player Loader does not support the playsinline attribute, you can use cURL to configure this in the player. Here is an example:

    curl \
    --header "Content-Type: application/json" \
    --user EMAIL_ADDRESS \
    --request PATCH \
    --data '{
          "playsinline": true
    }' \

    Page last updated on 19 Jun 2021