{"id":21029793,"url":"https://github.com/micnews/react-jw-player","last_synced_at":"2025-04-13T00:48:12.395Z","repository":{"id":15546496,"uuid":"74420592","full_name":"micnews/react-jw-player","owner":"micnews","description":"A React Component API for JW Player","archived":false,"fork":false,"pushed_at":"2023-02-22T17:23:12.000Z","size":537,"stargazers_count":195,"open_issues_count":69,"forks_count":92,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-13T00:48:06.152Z","etag":null,"topics":["component","jw-player","react","video"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/micnews.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-22T01:10:28.000Z","updated_at":"2025-01-07T03:27:54.000Z","dependencies_parsed_at":"2024-06-18T14:06:34.022Z","dependency_job_id":null,"html_url":"https://github.com/micnews/react-jw-player","commit_stats":{"total_commits":194,"total_committers":24,"mean_commits":8.083333333333334,"dds":"0.35051546391752575","last_synced_commit":"1d001d7cf18daf32ae8fb26ca70992ff093b846d"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micnews%2Freact-jw-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micnews%2Freact-jw-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micnews%2Freact-jw-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micnews%2Freact-jw-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/micnews","download_url":"https://codeload.github.com/micnews/react-jw-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650437,"owners_count":21139672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","jw-player","react","video"],"created_at":"2024-11-19T12:14:16.651Z","updated_at":"2025-04-13T00:48:12.374Z","avatar_url":"https://github.com/micnews.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-jw-player :movie_camera: [![Build Status](https://travis-ci.com/micnews/react-jw-player.svg?token=oCXvx519mb3xud77T3xi\u0026branch=master)](https://travis-ci.com/micnews/react-jw-player)\n\n`\u003cReactJWPlayer\u003e` is a React Component for initializing client-side instances of JW Player. Simply give `\u003cReactJWPlayer\u003e` 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.\n\n## Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* Props\n  * [Required Props](#required-props)\n  * Optional Props\n    * [Configuration](#optional-configuration-props)\n    * [Event Hooks](#event-hooks)\n      * [Advertising](#optional-advertising-event-hook-props)\n      * [Player Events](#optional-player-event-hook-props)\n      * [Time Events](#optional-time-event-hook-props)\n* [Example Container Component](#example-container-component)\n* [Contributing](#contributing)\n\n## Installation\n\n```shell\nnpm install react-jw-player\n```\n\n## Usage\n\nAt the mininum, you can just use something like the three following code snippets:\n\n### Playing a JW Player JSON Playlist\n``` javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactJWPlayer from 'react-jw-player';\n\nReactDOM.render(\n  \u003cReactJWPlayer\n    playerId='my-unique-id'\n    playerScript='https://link-to-my-jw-player/script.js'\n    playlist='https://link-to-my-playlist.json'\n  /\u003e,\n  document.getElementById('my-root-div');\n);\n```\n\n### Playing a custom Playlist\n``` javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactJWPlayer from 'react-jw-player';\n\nconst playlist = [{\n  file: 'https://link-to-my-video.mp4',\n  image: 'https://link-to-my-poster.jpg',\n  tracks: [{\n    file: 'https://link-to-subtitles.vtt',\n    label: 'English',\n    kind: 'captions',\n    'default': true\n  }],\n},\n{\n  file: 'https://link-to-my-other-video.mp4',\n  image: 'https://link-to-my-other-poster.jpg',\n}];\n\nReactDOM.render(\n  \u003cReactJWPlayer\n    playerId='my-unique-id'\n    playerScript='https://link-to-my-jw-player/script.js'\n    playlist={playlist}\n  /\u003e,\n  document.getElementById('my-root-div');\n);\n```\n\n### Playing a Specific File\n``` javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactJWPlayer from 'react-jw-player';\n\nReactDOM.render(\n  \u003cReactJWPlayer\n    playerId='my-unique-id'\n    playerScript='https://link-to-my-jw-player/script.js'\n    file='https://link-to-my-video.mp4'\n  /\u003e,\n  document.getElementById('my-root-div');\n);\n```\n\nFor more complex interaction, check out the container component example [here](#example-container-component)\n\nTo 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.\n\n## Required Props\n\nThese are props that modify the basic behavior of the component.\n* `playerId`\n  * A unique Id for the player instance. Used to distinguish the container divs.\n  * Type: `string`\n  * Example: `playerId=\"my-jw-player-instance\"`\n* `playerScript`\n  * Link to a valid JW Player script.\n  * Type: `string`\n  * Example: `https://content.jwplatform.com/libraries/abCD1234.js`\n* `playlist` OR `file`\n  * 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.\n  * Type: `string` (for `file` and `playlist`) or `array` (for `playlist`)\n  * Example: `https//content.jwplatform.com/feeds/abCD1234.json`\n\n## Optional Configuration Props\n* `aspectRatio`\n  * An optional aspect ratio to give the video player. Can be 'inherit', `1:1` or `16:9` currently.\n  * Defaults to 'inherit'.\n* `className`\n  * An optional class name to give the container div.\n  * Type: `string`\n* `customProps`\n  * 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' } }}`.\n  * Type: `object`\n* `isAutoPlay`\n  * Determines whether the player starts automatically or not.\n  * Type: `boolean`\n* `isMuted`\n  * Determines whether the player starts muted or not.\n  * Type: `boolean`\n* `generatePrerollUrl(video)`\n  * Supply a function that returns a VAST or GOOGIMA tag for use in generating a preroll advertisement.\n  * Arguments:\n    * `video`\n      * This is a video object for the current item loaded in the player. You can use it to help generate your preroll tags.\n* `image`\n  * URL to a poster image to display before playback starts\n  * Type: `string`\n* `licenseKey`\n  * License Key as supplied in the jwplayer dashboard, under: Players \u003e Tools \u003e Downloads \u003e JW Player X (Self-Hosted)\n  * Type: `string`\n* `useMultiplePlayerScripts`\n  * EXPERIMENTAL - Allows you to load multiple player scripts and still load the proper configuration. Expect bugs, but report them!\n  * Type: `boolean`\n\n# Event Hooks\n\n`react-jw-player` dynamically supports all events in JW Player. Simply preface the event name with `on` and pass it in as a prop.\n\nExamples:\n* `ready` =\u003e `onReady`\n* `setupError` =\u003e `onSetupError`\n\n`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!\n\n## Optional Advertising Event Hook Props\n* `onAdPause(event)`\n  * A function that is run when the user pauses the preroll advertisement.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onAdPlay(event)`\n  * A function that is run once, when the preroll advertisement first starts to play.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onAdResume(event)`\n  * A function that is run when the user resumes playing the preroll advertisement.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onAdSkipped(event)`\n  * A function that is run when the user skips an advertisement.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onAdComplete(event)`\n  * A function that is run when an ad has finished playing.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n\n## Optional Player Event Hook Props\n* `onAutoStart(event)`\n  * A function that is run once, when an autoplaying player starts to play a video.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onEnterFullScreen(event)`\n  * A function that is run when the user fullscreens a video.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onError(event)`\n  * A function that is run when the player errors.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onExitFullScreen(event)`\n  * A function that is run when the user un-fullscreens a video.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onMute(event)`\n  * A function that is run when the user mutes the player.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onPause(event)`\n  * A function that is run when the user pauses the player during a video.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onPlay(event)`\n  * A function that is run when a video first starts to play.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onReady(event)`\n  * A function that is run once when the video player is ready.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onResume(event)`\n  * A function that is run when the user plays a video after pausing it.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onSetupError(event)`\n  * A function that is run when the player errors during setup.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onTime(event)`\n  * A function that is run whenever the playback position gets updated.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onUnmute(event)`\n  * A function that is run when the user unmutes the player.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onVideoLoad(event)`\n  * A function that is run whenever a new video is loaded into the player.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n\n## Optional Time Event Hook Props\n* `onThreeSeconds(event)`\n  * A function that is run when the playhead reaches passed the 3 second mark.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onTenSeconds(event)`\n  * A function that is run when the playhead reaches passed the 10 second mark.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onThirtySeconds(event)`\n  * A function that is run when the playhead reaches passed the 30 second mark.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onTwentyFivePercent(event)`\n  * A function that is run when the playhead reaches passed the 25% mark.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onFiftyPercent(event)`\n  * A function that is run when the playhead reaches passed the 50% mark.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onSeventyFivePercent(event)`\n  * A function that is run when the playhead reaches passed the 75% mark.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onNinetyFivePercent(event)`\n  * A function that is run when the playhead reaches passed the 95% mark.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n* `onOneHundredPercent(event)`\n  * A function that is run when the a video ends.\n  * Type: `function`\n  * Arguments:\n    * `event`\n      * This is the event object passed back from JW Player itself.\n\n## Example Container Component\n``` javascript\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ReactJWPlayer from 'react-jw-player';\n\nconst displayName = 'ReactJWPlayerContainer';\n\nconst propTypes = {\n  playlist: PropTypes.string.isRequired,\n  playerScript: PropTypes.string.isRequired\n};\n\nclass ReactJWPlayerContainer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      videoTitle: '',\n    };\n\n    this.onAdPlay = this.onAdPlay.bind(this);\n    this.onReady = this.onReady.bind(this);\n    this.onVideoLoad = this.onVideoLoad.bind(this);\n\n    // each instance of \u003cReactJWPlayer\u003e needs a unique id.\n    // we randomly generate it here and assign to the container instance.\n    this.playerId = someFunctionToRandomlyGenerateId();\n  }\n  onReady(event) {\n    // interact with JW Player API here\n    const player = window.jwplayer(this.playerId);\n  }\n  onAdPlay(event) {\n    // track the ad play here\n  }\n  onVideoLoad(event) {\n    this.setState({\n      videoTitle: event.item.description // this only works with json feeds!\n    });\n  }\n  render() {\n    return (\n      \u003cdiv className='react-jw-player-container'\u003e\n        \u003ch1\u003e{ this.state.videoTitle }\u003c/h1\u003e\n        \u003cReactJWPlayer\n          playlist={this.props.playlist}\n          licenseKey='your-license-key'\n          onAdPlay={this.onAdPlay}\n          onReady={this.onReady}\n          onVideoLoad={this.onVideoLoad}\n          playerId={this.playerId} // bring in the randomly generated playerId\n          playerScript='https://link-to-your-jw-player-script.js'\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nReactJWPlayerContainer.propTypes = propTypes;\nReactJWPlayerContainer.defaultProps = defaultProps;\nReactJWPlayerContainer.displayName = displayName;\nexport default ReactJWPlayerContainer;\n```\n\n## Contributing\n\n**Just do it!**\n\n![shia](https://media.giphy.com/media/87xihBthJ1DkA/giphy.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicnews%2Freact-jw-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicnews%2Freact-jw-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicnews%2Freact-jw-player/lists"}