A React component to load a Brightcove Player in the browser.

This library has the same support characteristics as the Brightcove Player Loader.

• Installation
• Standard Usage with JSX
• Props
  • attrs
  • baseUrl
  • Other Props
• Effects of Prop Changes
• View the Demo
• Alternate Usage
  • ES Module (without JSX)
  • CommonJS
  • <script> Tag

No matter how you use this component, the only place it is available is npm.

npm install --save @brightcove/react-player-loader

Most React applications are using JSX and the toolchain provided by create-react-app.

After installing, import the module and use the ReactPlayerLoader component like any other component in your React application:

NOTE: React/ReactDOM are NOT required, they are only used here to show a complete working example!

import React from 'react';
import ReactDOM from 'react-dom';
import ReactPlayerLoader from '@brightcove/react-player-loader';

let reactPlayerLoader;
const onSuccess = function(success) {

  // The player object or iframe element (depending on embed type) can be
  // accessed in two ways.
  // 
  // From the success object passed to the `onSuccess` callback:
  console.log(success.ref);

  // As a property of the component instance:
  console.log(reactPlayerLoader.player);
};

reactPlayerLoader = ReactDOM.render(
  <ReactPlayerLoader accountId='1234678' onSuccess={onSuccess}/>,
  document.getElementById('fixture')
);

See Alternate Usage below for less common ways to use this component.

Type: Object

Provides attributes (props) to the component element.

For example, you may want to customize the className of the component (by default, "brightcove-react-player-loader") by setting props on the component like so:

<ReactPlayerLoader attrs={{className: 'my-custom-class'}} />

Type: string

Used to override the base URL for the Brightcove Player being embedded.

Most users will never need this prop. By default, players are loaded from Brightcove's player CDN (players.brightcove.net).

All props not specified above are passed to the Brightcove Player Loader with a few differences:

1. We cannot expose the Player Loader promise easily, so you must use the onSuccess and onFailure callbacks.
2. If you don't provide an onFailure callback, the failure will be handled by throwing an error.
3. We need to use refNode and refNodeInsert internally, so those props will be ignored.

When a prop passed to this component changes, it will have one of two effects:

1. Dispose/reload the player. This is the most common case.
2. Update the player's state (e.g. fetch a new video).

The following props will update the player's state without a reload:

• catalogSearch
• catalogSequence
• playlistId
• playlistVideoId
• videoId

All other prop changes will cause a complete dispose/reload.

This repository includes a barebones demo/example page.

1. Clone the repository
2. Move into the repository
3. Run npm install
4. Run npm start
5. Navigate to http://localhost:9999 in a browser

After installation, import the module in your JavaScript and use the ReactPlayerLoader component like any other component in your React application:

NOTE: React/ReactDOM are NOT required, they are only used here to show a complete working example!

import React from 'react';
import ReactDOM from 'react-dom';
import ReactPlayerLoader  from '@brightcove/react-player-loader';

const reactPlayerLoader = ReactDOM.render(
  React.createElement(ReactPlayerLoader, {
    accountId: '1234678',
    onSuccess(success) {
      // two ways to get the underlying player/iframe at this point.
      console.log(success.ref)
      console.log(reactPlayerLoader.player);
    }
  }),
  document.getElementById('fixture')
);

After installation, require the module in your JavaScript and use the ReactPlayerLoader component like any other component in your React application:

NOTE: React/ReactDOM are NOT required, they are only used here to show a complete working example!

var React = require('react');
var ReactDOM = require('react-dom');
var ReactPlayerLoader = require('@brightcove/react-player-loader');

var reactPlayerLoader = ReactDOM.render(
  React.createElement(ReactPlayerLoader, {
    accountId: '1234678',
    onSuccess: function(success) {
      // two ways to get the underlying player/iframe at this point.
      console.log(success.ref)
      console.log(reactPlayerLoader.player);
    }
  }),
  document.getElementById('fixture')
);

This case is extremely unlikely to be used.

After installation or loading from a CDN, use a script tag to include the module in your HTML and use the global window.BrightcoveReactPlayerLoader to construct the component.

<div id="fixture"></div>
<script src="//path/to/react.min.js"></script>
<script src="//path/to/react-dom.min.js"></script>
<script src="//path/to/brightcove-react-player-loader.min.js"></script>
<script>
  var React = window.React;
  var ReactDOM = window.ReactDOM;

  var reactPlayerLoader = ReactDOM.render(
    React.createElement(window.BrightcoveReactPlayerLoader, {
      accountId: '1234678',
      onSuccess: function(success) {
        // two ways to get the underlying player/iframe at this point.
        console.log(success.ref)
        console.log(reactPlayerLoader.player);
      }
    }),
    document.getElementById('fixture')
  );
</script>