{"id":13907154,"url":"https://github.com/jwplayer/jwplayer-react","last_synced_at":"2025-09-15T20:42:50.160Z","repository":{"id":38074246,"uuid":"470274457","full_name":"jwplayer/jwplayer-react","owner":"jwplayer","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-28T09:22:58.000Z","size":1335,"stargazers_count":31,"open_issues_count":16,"forks_count":16,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-03-26T11:18:33.761Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jwplayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2022-03-15T17:56:39.000Z","updated_at":"2025-02-13T19:38:46.000Z","dependencies_parsed_at":"2024-01-19T10:15:57.172Z","dependency_job_id":"a5a37334-6698-43cc-807a-baf03100cfd3","html_url":"https://github.com/jwplayer/jwplayer-react","commit_stats":{"total_commits":72,"total_committers":9,"mean_commits":8.0,"dds":0.3055555555555556,"last_synced_commit":"650a19373475c1457529091d7d299fff3474092a"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwplayer%2Fjwplayer-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwplayer%2Fjwplayer-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwplayer%2Fjwplayer-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwplayer%2Fjwplayer-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jwplayer","download_url":"https://codeload.github.com/jwplayer/jwplayer-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248259337,"owners_count":21074109,"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":[],"created_at":"2024-08-06T23:01:48.824Z","updated_at":"2025-09-15T20:42:45.107Z","avatar_url":"https://github.com/jwplayer.png","language":"HTML","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"# jwplayer-react\n\n![License](./badges/license.svg) ![Build](./badges/build.svg) ![Tests](./badges/test.svg) ![Test Coverage](./badges/coverage.svg)\n\n`\u003cJWPlayer\u003e` is a React Component that creates an instance of JW Player's web player. It allows for the use of any player configuration options and/or event hooks that can be used on the standard player (as props), and provides access to player's API directly via a `componentDidMount` callback.\n\n\n## Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Props](#props)\n  * [Required Props](#required-props)\n  * [Optional Props](#optional-props)\n  * [API Functionality](#api-functionality)\n* [Advanced Implementation Examples](#advanced-implementation-examples)\n* [Contributing](#contributing)\n\n## Installation\n\n```shell\nnpm i @jwplayer/jwplayer-react\n```\n\n## Usage\n\n### Standard player with file/library\n\n``` javascript\nimport JWPlayer from '@jwplayer/jwplayer-react';\n...\n\u003cJWPlayer\n  file='https://path-to-my.mp4'\n  library='https://path-to-my-jwplayer-library.js'\n/\u003e\n...\n```\n### Platform-hosted playlist\n\n``` javascript\nimport JWPlayer from '@jwplayer/jwplayer-react';\n...\n\u003cJWPlayer\n  library='https://path-to-my-jwplayer-library.js'\n  playlist='https://cdn.jwplayer.com/v2/playlists/playlist_media_id'\n/\u003e\n...\n```\n\n### Custom playlist\n\n``` javascript\nimport JWPlayer from '@jwplayer/jwplayer-react';\n...\nconst playlist = [{\n  file: 'myfile.mp4',\n  image: 'myPoster.jpg',\n  tracks: [{\n    file: 'https://mySubtitles.vtt',\n    label: 'English',\n    kind: 'captions',\n    'default': true\n  }],\n},\n{\n  file: 'mySecondFile.mp4',\n  image: 'MysecondFilesPoster.jpg',\n}];\n...\n\u003cJWPlayer\n  library='https://path-to-my-jwplayer-library.js'\n  playlist={playlist}\n/\u003e\n...\n```\n\n## Required Props\nThese props are required to instantient an instance of JW Player:\n\n* `library`\n  * Must be a url to a jwplayer web player library. Required if jwplayer library not already instantiated on page (ie. if window.jwplayer is undefined).\n  * Type: `string`\n  * Example: `https://content.jwplatform.com/libraries/abcd1234.js`\n  \u003cbr\u003e\n* `playlist` OR `file` OR `advertising` block with `oustream: true`\n  * Player will require content in order to instantiate. See more [here](https://developer.jwplayer.com/jwplayer/docs/jw8-player-configuration-reference).\n  * Type: `string` (for `file` or `playlist`) or `array` (for `playlist`) or `object` for `advertising`\n  * Example: `https://cdn.jwplayer.com/v2/playlists/abcd1234`\n\nIf you are not using a cloud hosted player you will need to provide a license key via the config prop. This prop can also be used to pass additional player config options.\n\n* `config`\n  * JSON config object with all the available options/types available via [standard player configuration](https://developer.jwplayer.com/jwplayer/docs/jw8-player-configuration-reference)\n  * Type: `object`\n  * Example: `{ key: \"your-key-here\" }`\n\n\n## Optional Props\n**All JW Player config options** can be used individually as props to configure a `jwplayer-react` player, i.e.,  `advertising`, `analytics`, `playlist`, `related`, `width`, and `height`. See the full list [here](https://developer.jwplayer.com/jwplayer/docs/jw8-player-configuration-reference). In addition, you may use the following props:\n\n* `on\u003cEvent\u003e`, `once\u003cEvent\u003e`\n  * `jwplayer-react` dynamically supports all events in JW Player. Props beginning with `on` or `once` are parsed and added as JW Player event handlers. Find the full list of supported events [here](https://developer.jwplayer.com/jwplayer/docs/jw8-javascript-api-reference). \n  * Type: `(event: { type: string, [key: string]: any }) =\u003e void`\n  * Examples:\n    `const callback = (event) =\u003e console.log(event)`\n    * `onReady={callback}`: Executes callback every time `ready` event is triggered by player API. Identical to `jwplayer(id).on('ready', callback)`.\n    * `onComplete={callback}`: Executes callback every time `complete` event is triggered by player API. Identical to `jwplayer(id).on('complete', callback)`.\n    * `onceTime={callback}`: Executes callback the **first** time `time` event is triggered by player API. Identical to `jwplayer(id).once('time', callback)`.\n  \u003cbr\u003e\n* `didMountCallback`\n  * A callback triggered after component mounts. Can be used to expose the player API to other parts of your app.\n  * Type: `({ player: PlayerAPI, id: string }) =\u003e void`\n  * Example: See [advanced implementation example](#advanced-implementation-examples)\n  \u003cbr\u003e\n* `willUnmountCallback`\n  * A callback triggered before component unmounts. Can be used to fire any final api calls to player before it is removed, or to inform a higher order component that a player has been removed.\n  * Type: `({ player: PlayerAPI, id: string }) =\u003e void`\n  * Example: See [advanced implementation example](#advanced-implementation-examples)\n\n## API Functionality\nFor advanced usage,`jwplayer-react` creates an instance of the player API when mounted, and sets it to `this.player`, exposing all api functionality listed [here](https://developer.jwplayer.com/jwplayer/docs/jw8-javascript-api-reference). \n\n\n\n## Advanced Implementation Examples\n\n[Interactive Example #1](https://codesandbox.io/s/jwplayer-react-example-1-forked-ctkevf?file=/src/PlayerContainer.js)\n\n``` javascript\nimport React from 'react';\nimport JWPlayer from '@jwplayer/jwplayer-react';\n\nclass PlayerContainer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.players = {};\n    this.onBeforePlay = this.onBeforePlay.bind(this);\n    this.onPlay = this.onPlay.bind(this);\n    this.playerMountedCallback = this.playerMountedCallback.bind(this);\n    this.playerUnmountingCallback = this.playerUnmountingCallback.bind(this);\n  }\n  \n  // Registers players as they mount\n  playerMountedCallback({ player, id }) {\n    this.players[id] = player;\n  }\n\n  // Nulls registered players as they unmount\n  playerUnmountingCallback({ id }) {\n    this.players[id] = null;\n  }\n\n  // Prevent multiple players from playing simultaneously\n  onBeforePlay(event) {\n    Object.keys(this.players).forEach(playerId =\u003e {\n      const player = this.players[playerId];\n      const isPlaying = player.getState() === 'playing';\n      if (isPlaying) {\n        player.pause();\n      }\n    });\n  }\n  \n  // Put teal colored outline on currently playing player, remove it from all other players.\n  onPlay(event) {\n    Object.keys(this.players).forEach(playerId =\u003e {\n      const player = this.players[playerId];\n      const container = player.getContainer();\n      if (player.getState() === 'playing') {\n        container.style.border = '15px solid #00FFFF';\n      } else {\n        container.style.border = '';\n      }\n    });\n  }\n\n  render() {\n    // Re-usable defaults to use between multiple players.\n    const configDefaults = { width: 320, height: 180 };\n\n    return (\n      \u003cdiv className='players-container'\u003e\n        \u003cJWPlayer\n          config={configDefaults}\n          onBeforePlay={this.onBeforePlay}\n          onPlay={this.onPlay}\n          didMountCallback={this.playerMountedCallback}\n          willUnmountCallback={this.playerUnmountingCallback}\n          playlist='https://cdn.jwplayer.com/v2/media/1g8jjku3'\n          library='https://cdn.jwplayer.com/libraries/lqsWlr4Z.js'\n        /\u003e\n        \u003cJWPlayer\n          config={configDefaults}\n          onBeforePlay={this.onBeforePlay}\n          onPlay={this.onPlay}\n          didMountCallback={this.playerMountedCallback}\n          willUnmountCallback={this.playerUnmountingCallback}\n          playlist='https://cdn.jwplayer.com/v2/media/QcK3l9Uv'\n          library='https://cdn.jwplayer.com/libraries/lqsWlr4Z.js'\n        /\u003e\n        \u003cJWPlayer\n          config={configDefaults}\n          onBeforePlay={this.onBeforePlay}\n          onPlay={this.onPlay}\n          didMountCallback={this.playerMountedCallback}\n          willUnmountCallback={this.playerUnmountingCallback}\n          playlist='https://cdn.jwplayer.com/v2/playlists/B8FTSH9D'\n          playlistIndex=\"1\"\n          library='https://cdn.jwplayer.com/libraries/lqsWlr4Z.js'\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\nexport default PlayerContainer;\n```\n\n\n[Interactive Example #2](https://codesandbox.io/s/jwplayer-react-example-2-forked-kl16vj?file=/src/PlayerContainer.js)\n\n``` javascript\nimport React from 'react';\nimport JWPlayer from '@jwplayer/jwplayer-react';\n\nclass PlayerContainer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      loaded: false\n    };\n    this.players = {};\n    this.onBeforePlay = this.onBeforePlay.bind(this);\n    this.didMountCallback = this.didMountCallback.bind(this);\n    this.loadPlayerLibrary();\n  }\n\n  // Load a player library\n  loadPlayerLibrary() {\n    const src = \"https://cdn.jwplayer.com/libraries/lqsWlr4Z.js\";\n    const script = document.createElement(\"script\");\n    script.src = src;\n    script.type = \"text/javascript\";\n    script.onload = () =\u003e this.setState({ loaded: true }); // On load, we're ready to set up our player instances\n    document.body.append(script);\n  }\n\n  // Registers players to container as they mount\n  didMountCallback({ player, id }) {\n    this.players[id] = player;\n    const eventLog = document.getElementById(\"log\");\n\n    // Log all events by player id.\n    player.on(\"all\", (event) =\u003e {\n      const li = document.createElement(\"li\");\n      li.innerText = `${id}: ${event}`;\n      eventLog.prepend(li);\n    });\n  }\n\n  // Prevent simultaneous playbacks\n  onBeforePlay(event) {\n    Object.keys(this.players).forEach((playerId) =\u003e {\n      const player = this.players[playerId];\n      const isPlaying = player.getState() === \"playing\";\n      if (isPlaying) {\n        player.pause();\n      }\n    });\n  }\n\n  render() {\n    // Re-usable defaults to use between multiple players.\n    const configDefaults = { width: 320, height: 180 };\n\n    return this.state.loaded ? (\n      \u003cdiv className=\"players-container\"\u003e\n        \u003cJWPlayer\n          config={configDefaults}\n          onBeforePlay={this.onBeforePlay}\n          didMountCallback={this.didMountCallback}\n          playlist=\"https://cdn.jwplayer.com/v2/media/1g8jjku3\"\n        /\u003e\n        \u003cJWPlayer\n          config={configDefaults}\n          onBeforePlay={this.onBeforePlay}\n          didMountCallback={this.didMountCallback}\n          playlist=\"https://cdn.jwplayer.com/v2/media/QcK3l9Uv\"\n        /\u003e\n        \u003cJWPlayer\n          config={configDefaults}\n          onBeforePlay={this.onBeforePlay}\n          didMountCallback={this.didMountCallback}\n          playlist=\"https://cdn.jwplayer.com/v2/playlists/B8FTSH9D\"\n          playlistIndex=\"1\"\n        /\u003e\n      \u003c/div\u003e\n    ) : (\n      \"loading...\"\n    );\n  }\n}\nexport default PlayerContainer;\n```\n\n## Contributing\nPost issues, or put up PRs that solve pre-existing issues.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwplayer%2Fjwplayer-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjwplayer%2Fjwplayer-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwplayer%2Fjwplayer-react/lists"}