<ReactJWPlayer> is a React Component for initializing client-side instances of JW Player. Simply give <ReactJWPlayer> the id of your player script, and the id of a JW Player video or playlist. The component comes with several event hooks that can be accessed through component props.
- Installation
- Usage
- Props
- Required Props
- Optional Props
- Example Container Component
- Contributing
npm install react-jw-playerAt the mininum, you can just use something like the three following code snippets:
import React from 'react';
import ReactDOM from 'react-dom';
import ReactJWPlayer from 'react-jw-player';
ReactDOM.render(
<ReactJWPlayer
playerId='my-unique-id'
playerScript='https://link-to-my-jw-player/script.js'
playlist='https://link-to-my-playlist.json'
/>,
document.getElementById('my-root-div');
);import React from 'react';
import ReactDOM from 'react-dom';
import ReactJWPlayer from 'react-jw-player';
const playlist = [{
file: 'https://link-to-my-video.mp4',
image: 'https://link-to-my-poster.jpg',
tracks: [{
file: 'https://link-to-subtitles.vtt',
label: 'English',
kind: 'captions',
'default': true
}],
},
{
file: 'https://link-to-my-other-video.mp4',
image: 'https://link-to-my-other-poster.jpg',
}];
ReactDOM.render(
<ReactJWPlayer
playerId='my-unique-id'
playerScript='https://link-to-my-jw-player/script.js'
playlist={playlist}
/>,
document.getElementById('my-root-div');
);import React from 'react';
import ReactDOM from 'react-dom';
import ReactJWPlayer from 'react-jw-player';
ReactDOM.render(
<ReactJWPlayer
playerId='my-unique-id'
playerScript='https://link-to-my-jw-player/script.js'
file='https://link-to-my-video.mp4'
/>,
document.getElementById('my-root-div');
);For more complex interaction, check out the container component example here
To generate preroll, supply the player with the generatePrerollUrl prop. This prop just needs to be a function that returns a valid VAST tag! See Optional Configuration Props for more info.
These are props that modify the basic behavior of the component.
playerId- A unique Id for the player instance. Used to distinguish the container divs.
- Type:
string - Example:
playerId="my-jw-player-instance"
playerScript- Link to a valid JW Player script.
- Type:
string - Example:
https://content.jwplatform.com/libraries/abCD1234.js
playlistORfile- Link to a valid JW Player playlist or video file, or playlist array. Cool tip: JW Player automatically generates JSON feeds for individual videos if you use the video id in place of
abCD1234. You can use this to get meta data on the videos without loading an actual playlist. - Type:
string(forfileandplaylist) orarray(forplaylist) - Example:
https//content.jwplatform.com/feeds/abCD1234.json
- Link to a valid JW Player playlist or video file, or playlist array. Cool tip: JW Player automatically generates JSON feeds for individual videos if you use the video id in place of
aspectRatio- An optional aspect ratio to give the video player. Can be 'inherit',
1:1or16:9currently. - Defaults to 'inherit'.
- An optional aspect ratio to give the video player. Can be 'inherit',
className- An optional class name to give the container div.
- Type:
string
customProps- An optional object containing properties to be applied directly to the JW Player instance. Add anything in the API, like skins, into this object.
customProps={{ skin: { name: 'six' } }}. - Type:
object
- An optional object containing properties to be applied directly to the JW Player instance. Add anything in the API, like skins, into this object.
isAutoPlay- Determines whether the player starts automatically or not.
- Type:
boolean
isMuted- Determines whether the player starts muted or not.
- Type:
boolean
generatePrerollUrl(video)- Supply a function that returns a VAST or GOOGIMA tag for use in generating a preroll advertisement.
- Arguments:
video- This is a video object for the current item loaded in the player. You can use it to help generate your preroll tags.
image- URL to a poster image to display before playback starts
- Type:
string
licenseKey- License Key as supplied in the jwplayer dashboard, under: Players > Tools > Downloads > JW Player X (Self-Hosted)
- Type:
string
useMultiplePlayerScripts- EXPERIMENTAL - Allows you to load multiple player scripts and still load the proper configuration. Expect bugs, but report them!
- Type:
boolean
react-jw-player dynamically supports all events in JW Player. Simply preface the event name with on and pass it in as a prop.
Examples:
ready=>onReadysetupError=>onSetupError
react-jw-player has layered some different functionality on some of these events, so please check the docs below if you find any unexpected behavior!
onAdPause(event)- A function that is run when the user pauses the preroll advertisement.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onAdPlay(event)- A function that is run once, when the preroll advertisement first starts to play.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onAdResume(event)- A function that is run when the user resumes playing the preroll advertisement.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onAdSkipped(event)- A function that is run when the user skips an advertisement.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onAdComplete(event)- A function that is run when an ad has finished playing.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onAutoStart(event)- A function that is run once, when an autoplaying player starts to play a video.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onEnterFullScreen(event)- A function that is run when the user fullscreens a video.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onError(event)- A function that is run when the player errors.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onExitFullScreen(event)- A function that is run when the user un-fullscreens a video.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onMute(event)- A function that is run when the user mutes the player.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onPause(event)- A function that is run when the user pauses the player during a video.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onPlay(event)- A function that is run when a video first starts to play.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onReady(event)- A function that is run once when the video player is ready.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onResume(event)- A function that is run when the user plays a video after pausing it.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onSetupError(event)- A function that is run when the player errors during setup.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onTime(event)- A function that is run whenever the playback position gets updated.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onUnmute(event)- A function that is run when the user unmutes the player.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onVideoLoad(event)- A function that is run whenever a new video is loaded into the player.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onThreeSeconds(event)- A function that is run when the playhead reaches passed the 3 second mark.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onTenSeconds(event)- A function that is run when the playhead reaches passed the 10 second mark.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onThirtySeconds(event)- A function that is run when the playhead reaches passed the 30 second mark.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onTwentyFivePercent(event)- A function that is run when the playhead reaches passed the 25% mark.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onFiftyPercent(event)- A function that is run when the playhead reaches passed the 50% mark.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onSeventyFivePercent(event)- A function that is run when the playhead reaches passed the 75% mark.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onNinetyFivePercent(event)- A function that is run when the playhead reaches passed the 95% mark.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
onOneHundredPercent(event)- A function that is run when the a video ends.
- Type:
function - Arguments:
event- This is the event object passed back from JW Player itself.
import React from 'react';
import PropTypes from 'prop-types';
import ReactJWPlayer from 'react-jw-player';
const displayName = 'ReactJWPlayerContainer';
const propTypes = {
playlist: PropTypes.string.isRequired,
playerScript: PropTypes.string.isRequired
};
class ReactJWPlayerContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
videoTitle: '',
};
this.onAdPlay = this.onAdPlay.bind(this);
this.onReady = this.onReady.bind(this);
this.onVideoLoad = this.onVideoLoad.bind(this);
// each instance of <ReactJWPlayer> needs a unique id.
// we randomly generate it here and assign to the container instance.
this.playerId = someFunctionToRandomlyGenerateId();
}
onReady(event) {
// interact with JW Player API here
const player = window.jwplayer(this.playerId);
}
onAdPlay(event) {
// track the ad play here
}
onVideoLoad(event) {
this.setState({
videoTitle: event.item.description // this only works with json feeds!
});
}
render() {
return (
<div className='react-jw-player-container'>
<h1>{ this.state.videoTitle }</h1>
<ReactJWPlayer
playlist={this.props.playlist}
licenseKey='your-license-key'
onAdPlay={this.onAdPlay}
onReady={this.onReady}
onVideoLoad={this.onVideoLoad}
playerId={this.playerId} // bring in the randomly generated playerId
playerScript='https://link-to-your-jw-player-script.js'
/>
</div>
);
}
}
ReactJWPlayerContainer.propTypes = propTypes;
ReactJWPlayerContainer.defaultProps = defaultProps;
ReactJWPlayerContainer.displayName = displayName;
export default ReactJWPlayerContainer;Just do it!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent