A React component to load a Brightcove Player in the browser.
Currently, this library supports Brightcove Players v6.11.0 and higher.
npm install --save @brightcove/react-player-loader
To include @brightcove/react-player-loader
on your website or web application, use any of the following methods.
- Install the module (see Installation)
import
the module in your javascript. IEimport ReactPlayerLoader from '@brightcove/react-player-loader'
- Now you can use it however you like, with the
ReactPlayerLoader
variable. - See the example below for full usage.
NOTE: React/ReactDOM/global are NOT required, they are only used to show a working example.
import document from 'global/document';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactPlayerLoader from '@brightcove/react-player-loader';
let reactPlayerLoader;
const onSuccess = function(success) {
// two ways to get the underlying player/iframe at this point.
console.log(success.ref)
console.log(reactPlayerLoader.player);
};
reactPlayerLoader = ReactDOM.render(
<ReactPlayerLoader accountId='1234678' onSuccess={onSuccess}/>,
document.getElementById('fixture')
);
- Get the script however you prefer
- Include the script in your html
- Use the
BrightcoveReactPlayerLoader
object that this module exports on thewindow
object. - See the example below for full usage.
NOTE: React/ReactDOM are NOT required, they are only used to show a working example.
<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 = window.BrightcoveReactPlayerLoader;
var reactPlayerLoader = window.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')
);
</script>
- Install the module (see Installation)
require
the module in your javascript. IEvar ReactPlayerLoader = require('@brightcove/react-player-loader')
- Now you can use it however you like, with the
ReactPlayerLoader
variable. - See the example below for full usage.
NOTE: React/ReactDOM/global are NOT required, they are only used to show a working example.
var React = require('react');
var ReactDOM = require('react-dom');
var document = require('global/document');
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')
);
- Install the module (see Installation)
import
the module in your javascript. IEimport ReactPlayerLoader from '@brightcove/react-player-loader'
- Now you can use it however you like, with the
ReactPlayerLoader
variable. - See the example below for full usage.
NOTE: React/ReactDOM/global are NOT required, they are only used to show a working example.
import document from 'global/document';
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')
);
See the Player Loader page for most options. There are four differences
- We cannot export the promise easily, so you will have to use the
onSuccess
andonFailure
callbacks - If you don't provide an
onFailure
callback the failure will be handle by throwing an error - We need to use
refNode
andrefNodeInsert
internally, so those options will not be used if passed in. - We allow a
baseUrl
string option, so that the baseUrl can be changed. Player loader makes you usesetBaseUrl()
which you won't have access to.
- clone the repo
- move into the repo
- run
npm i
- run
npm run start
- Navigate to
http://localhost:9999
in the browser