react-jw-player 🎥
This is a temporary repo for a mission critical project. We will be using this patched version until the main parent repo accepts our patch.
<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.
Contents
- Installation
- Usage
- Props
- Required Props
- Optional Props
- Configuration
- Event Hooks
- Example Container Component
- Contributing
Installation
npm install react-jw-player
Usage
At the mininum, you can just use something like the two following code snippets:
Playing a JW Player JSON Playlist
;;;ReactDOM;
Playing a Specific File
;;;ReactDOM;
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)[#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
ORfile
- Link to a valid JW Player playlist or video file. 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
- Example:
https//content.jwplatform.com/feeds/abCD1234.json
- Link to a valid JW Player playlist or video file. Cool tip: JW Player automatically generates JSON feeds for individual videos if you use the video id in place of
Optional Configuration Props
aspectRatio
- An optional aspect ratio to give the video player. Can be 'inherit',
1:1
or16:9
currently. - 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
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
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.
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.
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.
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.
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
;;const displayName = 'ReactJWPlayerContainer';const propTypes =playlist: ReactPropTypesstringisRequiredplayerScript: ReactPropTypesstringisRequired;Component{superprops;thisstate =videoTitle: '';thisonAdPlay = thisonAdPlay;thisonVideoLoad = thisonVideoLoad;// each instance of <ReactJWPlayer> needs a unique id.// we randomly generate it here and assign to the container instance.thisplayerId = ;}{// track the ad play here}{this;}{return<div className='react-jw-player-container'><h1> thisstatevideoTitle </h1><JWPlayerplaylist=thispropsplaylistonAdPlay=thisonAdPlayonVideoLoad=thisonVideoLoadplayerId=thisplayerId // bring in the randomly generated playerIdplayerScript='https://link-to-your-jw-player-script.js'/></div>;}ReactJWPlayerContainerpropTypes = propTypes;ReactJWPlayerContainerdefaultProps = defaultProps;ReactJWPlayerContainerdisplayName = displayName;;
Contributing
Just do it!