Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
react-jw-player
Advanced tools
A React component for launching JW Player instances on the client.
<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.
npm install react-jw-player
At 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
string
playerId="my-jw-player-instance"
playerScript
string
https://content.jwplatform.com/libraries/abCD1234.js
playlist
OR file
abCD1234
. You can use this to get meta data on the videos without loading an actual playlist.string
(for file
and playlist
) or array
(for playlist
)https//content.jwplatform.com/feeds/abCD1234.json
aspectRatio
1:1
or 16:9
currently.className
string
customProps
customProps={{ skin: { name: 'six' } }}
.object
isAutoPlay
boolean
isMuted
boolean
generatePrerollUrl(video)
video
image
string
licenseKey
string
useMultiplePlayerScripts
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
=> 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!
onAdPause(event)
function
event
onAdPlay(event)
function
event
onAdResume(event)
function
event
onAdSkipped(event)
function
event
onAdComplete(event)
function
event
onAutoStart(event)
function
event
onEnterFullScreen(event)
function
event
onError(event)
function
event
onExitFullScreen(event)
function
event
onMute(event)
function
event
onPause(event)
function
event
onPlay(event)
function
event
onReady(event)
function
event
onResume(event)
function
event
onSetupError(event)
function
event
onTime(event)
function
event
onUnmute(event)
function
event
onVideoLoad(event)
function
event
onThreeSeconds(event)
function
event
onTenSeconds(event)
function
event
onThirtySeconds(event)
function
event
onTwentyFivePercent(event)
function
event
onFiftyPercent(event)
function
event
onSeventyFivePercent(event)
function
event
onNinetyFivePercent(event)
function
event
onOneHundredPercent(event)
function
event
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!
FAQs
A React component for launching JW Player instances on the client.
We found that react-jw-player demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.