brightcove-react-player v0.1.8
A React component to load a Brightcove Player in the browser written in ES5 for compatibility
Installation
No matter how you use this component, the only place it is available is npm.
npm install --save brightcove-react-player
or
yarn add brightcove-react-player
Standard Usage with JSX
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";
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, success.type);
// Supported actions
// As a property of the component instance:
console.log(reactPlayerLoader.player);
};
reactPlayerLoader = ReactDOM.render(
<ReactPlayerLoader accountId="1234678" onSuccess={onSuccess} />,
document.getElementById("fixture")
);
All Available Option in the player by which you can play around.
- Callbacks:
All parems supported by player
events in the player which you can get from ref of the player(on success callback ref):
"loadstart","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","progress","play","pause","ratechange","volumechange"
- controls with ref(Like: ref.play())
play()
pause()
controls()
focus()
currentSrc()
autoplay()
getChild("controlBar" or "textTrackDisplay" or "errorDisplay" or "closeButton" or "bigPlayButton" or "playToggle" or "textTrackSettings") // you can write any name of the child it should work
language()
languages()
audioTracks()
requestFullscreen()
exitFullscreen()
isFullscreen()
muted(ref.muted()?false:true)
volume(ref.volume()-.1)
buffered()
duration()
bufferedEnd()
currentTime(ref.currentTime()+5) // You can find % by currentTime / duration
remainingTime()
getCache()
scrubbing()
remoteTextTrackEls()
textTracks()
addRemoteTextTrack()
tech_.featuresNativeTextTracks()
textTrackSettings.getValues()
errors.getAll()
clearTimeout(fn) // used to clear the to interval of player
Note: these methods depends upon perameters passed on initialization. So these may or may not be available.
onSuccess (success , playerWrapperRef ) : takes in 2 parameters, success being the callback function and playerWrapperRef the ref value
onFailure (failure , playerWrapperRef ) : takes in 2 parameters, failure being the callback function and playerWrapperRef the ref value
Props
attrs
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"
) by setting props on the component like so:
<ReactPlayerLoader wrapperClassName="my-custom-class" />
Rest all props can be passed as per brightcove-player
Other Props
All props not specified above are passed with a few differences:
- We cannot expose the Player Loader promise easily, so you must use the
onSuccess
andonFailure
callbacks. - If you don't provide an
onFailure
callback, the failure will be handled by throwing an error. - We need to use
refNode
andrefNodeInsert
internally, so those props will be ignored.
All other prop changes, excluding props that are function
's, will cause a complete dispose/reload.
ES Module (without JSX)
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";
const reactPlayerLoader = ReactDOM.render(
React.createElement(ReactPlayerLoader, {
accountId: "any mumber",
onSuccess(success, wrapperRef) {
// two ways to get the underlying player/iframe at this point.
const { ref } = success;
console.log(ref, success, wrapperRef);
},
}),
document.getElementById("fixture")
);
Again, onSuccess (success , playerWrapperRef ) : takes in 2 parameters, success being the callback function and playerWrapperRef the ref value
onFailure (failure , playerWrapperRef ) : takes in 2 parameters, failure being the callback function and playerWrapperRef the ref value
A React component to load a Brightcove Player in the browser.
Brightcove Player Support
This library supports all features of @brightcove/player-loader npm link.
You can use this wrapper however you want.