https://github.com/micnews/react-jw-player
A React Component API for JW Player
https://github.com/micnews/react-jw-player
component jw-player react video
Last synced: about 1 year ago
JSON representation
A React Component API for JW Player
- Host: GitHub
- URL: https://github.com/micnews/react-jw-player
- Owner: micnews
- Created: 2016-11-22T01:10:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-02-22T17:23:12.000Z (over 3 years ago)
- Last Synced: 2025-04-13T00:48:06.152Z (about 1 year ago)
- Topics: component, jw-player, react, video
- Language: JavaScript
- Homepage:
- Size: 524 KB
- Stars: 195
- Watchers: 8
- Forks: 92
- Open Issues: 69
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-jw-player :movie_camera: [](https://travis-ci.com/micnews/react-jw-player)
`` is a React Component for initializing client-side instances of JW Player. Simply give `` 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.
## Contents
* [Installation](#installation)
* [Usage](#usage)
* Props
* [Required Props](#required-props)
* Optional Props
* [Configuration](#optional-configuration-props)
* [Event Hooks](#event-hooks)
* [Advertising](#optional-advertising-event-hook-props)
* [Player Events](#optional-player-event-hook-props)
* [Time Events](#optional-time-event-hook-props)
* [Example Container Component](#example-container-component)
* [Contributing](#contributing)
## Installation
```shell
npm install react-jw-player
```
## Usage
At the mininum, you can just use something like the three following code snippets:
### Playing a JW Player JSON Playlist
``` javascript
import React from 'react';
import ReactDOM from 'react-dom';
import ReactJWPlayer from 'react-jw-player';
ReactDOM.render(
,
document.getElementById('my-root-div');
);
```
### Playing a custom Playlist
``` javascript
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(
,
document.getElementById('my-root-div');
);
```
### Playing a Specific File
``` javascript
import React from 'react';
import ReactDOM from 'react-dom';
import ReactJWPlayer from 'react-jw-player';
ReactDOM.render(
,
document.getElementById('my-root-div');
);
```
For more complex interaction, check out the container component example [here](#example-container-component)
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](#optional-configuration-props) for more info.
## Required Props
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`
* `playlist` OR `file`
* 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` (for `file` and `playlist`) or `array` (for `playlist`)
* Example: `https//content.jwplatform.com/feeds/abCD1234.json`
## Optional Configuration Props
* `aspectRatio`
* An optional aspect ratio to give the video player. Can be 'inherit', `1:1` or `16:9` currently.
* Defaults to '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`
* `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`
# Event Hooks
`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` => `onReady`
* `setupError` => `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!
## Optional Advertising Event Hook Props
* `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.
## Optional Player Event Hook Props
* `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.
## Optional Time Event Hook Props
* `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.
## Example Container Component
``` javascript
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 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 (
{ this.state.videoTitle }
);
}
}
ReactJWPlayerContainer.propTypes = propTypes;
ReactJWPlayerContainer.defaultProps = defaultProps;
ReactJWPlayerContainer.displayName = displayName;
export default ReactJWPlayerContainer;
```
## Contributing
**Just do it!**
