React Player Loader

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Playback
Type
Support Doc

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.

Overview

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.

Installation

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.

Parameters

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.