React Player Loader

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

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.
• Use the onEmbedCreated parameter to customize the embed element (either a video-js element or an iframe element) before it is inserted into the DOM or customized as a result of embedOptions and before the player is downloaded and initialized. The embed element may be mutated, or if this callback returns an element, that element will be used as the embed element. Potential use cases include adding/removing attributes or child elements, and adding bumpers.

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
}' \
https://players.api.brightcove.com/v2/accounts/ACCOUNT_ID/players/default/configuration

Using Playback Restrictions

To use Playback Restrictions with the React Player Loader, all you need to do is get a reference to the player and pass the JSON Web Token (JWT) to it.

Here's an example:

  <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>Brightcove Player</title>
        <meta charset="UTF-8">
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin
            src="brightcove-player/reactjs/brightcove-react-player-loader.min.js"></script>
    </head>
    
    <body>
        <main>
            <h1>Brightcove Player</h1>
            <div id='container'></div>
    
        </main>
    </body>
    <script>
        var React = window.React;
        var ReactDOM = window.ReactDOM;
        var ReactPlayerLoader = window.BrightcoveReactPlayerLoader;
        var myJwtToken = "your jwt token";
        var myVideoId = "your video Id";
    
        // +++ Add the Brightcove Player +++
        var reactPlayerLoader = window.reactPlayerLoader = ReactDOM.render(
            React.createElement(ReactPlayerLoader, {
                accountId: 'your account Id',
                onSuccess: function (success) {
                    console.log(reactPlayerLoader.player);
                    // Get a reference to the BC Player
                    var myPlayer = success.ref;
                    // When ready...
                    myPlayer.ready(function () {
                        myPlayer.catalog.get({
                            id: myVideoId,
                            type: 'video',
                            bcovAuthToken: myJwtToken
                        }).
                            then(function (data) {
                                myPlayer.catalog.load(data);
                                myPlayer.muted(true);
                                myPlayer.play();
                            }).
                            catch(function (error) {
                                throw new Error(error);
                            });
                    });
                }
            }),
            document.getElementById('container')
        );
    </script>
    </html>