{"_id":"@codedown/react-player","name":"@codedown/react-player","dist-tags":{"latest":"1.6.6"},"versions":{"1.6.6":{"name":"@codedown/react-player","version":"1.6.6","description":"A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion","main":"lib/ReactPlayer.js","typings":"index.d.ts","scripts":{"clean":"rimraf lib demo coverage","start":"webpack-dev-server","lint":"standard --verbose | snazzy","test":"cross-env NODE_ENV=test ava","test:coverage":"cross-env NODE_ENV=test nyc ava","test:codecov":"nyc report --reporter=json && codecov -f coverage/coverage-final.json","build:lib":"cross-env NODE_ENV=production babel src -d lib --ignore src/demo","build:demo":"cross-env NODE_ENV=production webpack --config webpack.demo.babel.js","build:dist":"cross-env NODE_ENV=production webpack --config webpack.dist.babel.js","build:standalone":"cross-env NODE_ENV=production webpack --config webpack.standalone.babel.js","preversion":"npm run lint && npm run test","version":"auto-changelog -p && npm run build:dist && npm run build:standalone && git add CHANGELOG.md dist","prepublishOnly":"npm run build:lib && npm run build:dist","postpublish":"npm run clean"},"repository":{"type":"git","url":"git+https://github.com/CookPete/react-player.git"},"keywords":["react","media","player","video","audio","youtube","facebook","twitch","soundcloud","streamable","vimeo","wistia","dailymotion","hls","dash","react-component"],"author":{"name":"Pete Cook","email":"pete@cookpete.com","url":"http://github.com/cookpete"},"license":"MIT","bugs":{"url":"https://github.com/CookPete/react-player/issues"},"homepage":"https://github.com/CookPete/react-player","peerDependencies":{"react":"*"},"devDependencies":{"auto-changelog":"^1.2.2","ava":"^0.25.0","babel-cli":"^6.26.0","babel-core":"^6.16.0","babel-eslint":"^8.2.1","babel-loader":"^7.0.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-istanbul":"^4.1.4","babel-plugin-transform-es3-member-expression-literals":"^6.8.0","babel-plugin-transform-es3-property-literals":"^6.8.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.16.0","babel-preset-stage-0":"^6.16.0","codecov":"^3.0.0","cross-env":"^5.1.3","css-loader":"^0.28.9","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","exports-loader":"^0.6.3","extract-text-webpack-plugin":"^3.0.2","html-webpack-plugin":"^2.30.1","nyc":"^11.7.1","postcss-automath":"^1.0.1","postcss-loader":"^2.0.10","postcss-nested":"^3.0.0","postcss-sassy-mixins":"^2.1.0","postcss-simple-vars":"^4.1.0","react":"^16.2.0","react-dom":"^16.2.0","react-hot-loader":"^4.0.0-beta.15","rimraf":"^2.5.4","screenfull":"^3.3.2","sinon":"^5.0.3","snazzy":"^7.0.0","standard":"^11.0.0-beta.0","style-loader":"^0.19.1","webpack":"^3.10.0","webpack-dev-server":"^2.11.0","whatwg-fetch":"^2.0.1"},"dependencies":{"deepmerge":"^2.0.1","load-script":"^1.0.0","prop-types":"^15.5.6"},"babel":{"presets":["env","stage-0","react"],"plugins":["react-hot-loader/babel"],"env":{"production":{"plugins":["transform-es3-member-expression-literals","transform-es3-property-literals"]},"test":{"plugins":["istanbul"]}}},"postcss":{"plugins":{"postcss-nested":{},"postcss-sassy-mixins":{},"postcss-simple-vars":{},"postcss-automath":{}}},"standard":{"parser":"babel-eslint","ignore":["/dist/*"]},"ava":{"babel":"inherit","require":["babel-register","babel-polyfill"]},"nyc":{"all":true,"include":"src","sourceMap":false,"instrument":false,"report-dir":"./coverage","temp-directory":"./coverage/.nyc_output","reporter":["text","html"]},"gitHead":"cb4c653aac91c7c8b07edd6ba3163c6e1da19fa6","_id":"@codedown/react-player@1.6.6","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-1eKUQRwGKfnmf3ggfLbEULxaPdhEIw25KvOHIaxvqvxx3ca2YQBVFyltXb70liC5QpsOSRO/sUFHYCoxu8HO4g==","shasum":"2edf97ca9250200d0e6a8921f1a5af907404483b","tarball":"https://registry.npmjs.org/@codedown/react-player/-/react-player-1.6.6.tgz","fileCount":35,"unpackedSize":1351867,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLGt3M8eTm4Wzj+ccwySs1TAxTB9QGfHrIBDp30KBoUAiAT0SOtxOWKwiJeMDgdizCGIkJ8pTLjBQ03uzRznVJp4g=="}]},"_npmUser":{"name":"thomasjm","email":"tom@codedown.io"},"directories":{},"maintainers":[{"name":"thomasjm","email":"tom@codedown.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-player_1.6.6_1687242671004_0.21063727742928373"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-20T06:31:10.947Z","1.6.6":"2023-06-20T06:31:11.250Z","modified":"2023-06-20T06:31:11.458Z"},"maintainers":[{"name":"thomasjm","email":"tom@codedown.io"}],"description":"A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion","homepage":"https://github.com/CookPete/react-player","keywords":["react","media","player","video","audio","youtube","facebook","twitch","soundcloud","streamable","vimeo","wistia","dailymotion","hls","dash","react-component"],"repository":{"type":"git","url":"git+https://github.com/CookPete/react-player.git"},"author":{"name":"Pete Cook","email":"pete@cookpete.com","url":"http://github.com/cookpete"},"bugs":{"url":"https://github.com/CookPete/react-player/issues"},"license":"MIT","readme":"<h1 align='center'>\n  ReactPlayer\n</h1>\n\n<p align='center'>\n  <a href='https://www.npmjs.com/package/react-player'>\n    <img src='https://img.shields.io/npm/v/react-player.svg' alt='Latest npm version'>\n  </a>\n  <a href='https://travis-ci.org/CookPete/react-player'>\n    <img src='https://img.shields.io/travis/CookPete/react-player/master.svg' alt='Build Status'>\n  </a>\n  <a href='https://david-dm.org/CookPete/react-player'>\n    <img src='https://img.shields.io/david/CookPete/react-player.svg' alt='Dependency Status'>\n  </a>\n  <a href='https://codecov.io/gh/CookPete/react-player'>\n    <img src='https://img.shields.io/codecov/c/github/cookpete/react-player.svg' alt='Test Coverage'>\n  </a>\n  <a href='https://paypal.me/ckpt'>\n    <img src='https://img.shields.io/badge/donate-PayPal-blue.svg' alt='Donate'>\n  </a>\n</p>\n\n<p align='center'>\n  A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. Not using React? <a href='#standalone-player'>No problem.</a>\n</p>\n\n### Usage\n\n```bash\nnpm install react-player --save\n# or\nyarn add react-player\n```\n\n```js\nimport React, { Component } from 'react'\nimport ReactPlayer from 'react-player'\n\nclass App extends Component {\n  render () {\n    return <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />\n  }\n}\n```\n\nDemo page: [`https://cookpete.com/react-player`](https://cookpete.com/react-player)\n\nThe component parses a URL and loads in the appropriate markup and external SDKs to play media from [various sources](#supported-media). [Props](#props) can be passed in to control playback and react to events such as buffering or media ending. See [the demo source](https://github.com/CookPete/react-player/blob/master/src/demo/App.js) for a full example.\n\nFor platforms like [Meteor](https://www.meteor.com) without direct use of `npm` modules, a minified version of `ReactPlayer` is located in `dist` after installing. To generate this file yourself, checkout the repo and run `npm run build:dist`.\n\n#### Polyfills\n\n* If you are using `npm` and need to support [browsers without `Promise`](http://caniuse.com/#feat=promises) you will need a [`Promise` polyfill](https://github.com/stefanpenner/es6-promise).\n* To support IE11 you will need to use [`babel-polyfill`](https://babeljs.io/docs/usage/polyfill) or a similar ES2015+ polyfill.\n\n#### Autoplay\n\nAs of Chrome 66, [videos must be `muted` in order to play automatically](https://www.theverge.com/2018/3/22/17150870/google-chrome-autoplay-videos-sound-mute-update). Some players, like Facebook, cannot be unmuted until the user interacts with the video, so you may want to enable `controls` to allow users to unmute videos themselves.\n\n### Props\n\nProp | Description | Default\n---- | ----------- | -------\n`url` | The url of a video or song to play<br/>&nbsp; ◦ &nbsp;Can be an [array](#multiple-sources-and-tracks) or [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) object\n`playing` | Set to `true` or `false` to pause or play the media | `false`\n`loop` | Set to `true` or `false` to loop the media | `false`\n`controls` | Set to `true` or `false` to display native player controls<br />&nbsp; ◦ &nbsp;Vimeo, Twitch and Wistia player will always display controls | `false`\n`volume` | Set the volume of the player, between `0` and `1`<br/>&nbsp; ◦ &nbsp;`null` uses default volume on all players [`#357`](https://github.com/CookPete/react-player/issues/357) | `null`\n`muted` | Mutes the player<br/>&nbsp; ◦ &nbsp;Only works if `volume` is set | `false`\n`playbackRate` | Set the playback rate of the player<br />&nbsp; ◦ &nbsp;Only supported by YouTube, Wistia, and file paths | `1`\n`width` | Set the width of the player | `640px`\n`height` | Set the height of the player | `360px`\n`style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element | `{}`\n`progressInterval` | The time between `onProgress` callbacks, in milliseconds | `1000`\n`playsinline` | Applies the `playsinline` attribute where supported | `false`\n`wrapper` | Element or component to use as the container element | `div`\n`config` | Override options for the various players, see [config prop](#config-prop)\n\n#### Callback props\n\nCallback props take a function that gets fired on various player events:\n\nProp | Description\n---- | -----------\n`onReady` | Called when media is loaded and ready to play. If `playing` is set to `true`, media will play immediately\n`onStart` | Called when media starts playing\n`onPlay` | Called when media starts or resumes playing after pausing or buffering\n`onProgress` | Callback containing `played` and `loaded` progress as a fraction, and `playedSeconds` and `loadedSeconds` in seconds<br />&nbsp; ◦ &nbsp;eg `{ played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }`\n`onDuration` | Callback containing duration of the media, in seconds\n`onPause` | Called when media is paused\n`onBuffer` | Called when media starts buffering\n`onSeek` | Called when media seeks with `seconds` parameter\n`onEnded` | Called when media finishes playing\n`onError` | Called when an error occurs whilst attempting to play media\n\n#### Config prop\n\nAs of version `0.24`, there is a single `config` prop to override the settings for the various players. If you are migrating from an earlier version, you must move all the old config props inside `config`:\n\n```jsx\n<ReactPlayer\n  url={url}\n  config={{\n    youtube: {\n      playerVars: { showinfo: 1 }\n    },\n    facebook: {\n      appId: '12345'\n    }\n  }}\n/>\n```\n\nThe old style [config props](https://github.com/CookPete/react-player/tree/v0.23.0#config-props) still work but will produce a console warning:\n\n```jsx\n<ReactPlayer\n  url={url}\n  youtubeConfig={{ playerVars: { showinfo: 1 } }}\n  facebookConfig={{ appId: '12345' }}\n/>\n```\n\nSettings for each player live under different keys:\n\nKey | Options\n--- | -------\n`youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)<br />`preload`: Used for [preloading](#preloading)\n`facebook` | `appId`: Your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id)\n`soundcloud` | `options`: Override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params)<br />`preload`: Used for [preloading](#preloading)\n`vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters)<br />`preload`: Used for [preloading](#preloading)\n`wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)\n`mixcloud` | `options`: Override the [default player options](https://www.mixcloud.com/developers/widget/#methods)\n`dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters)<br />`preload`: Used for [preloading](#preloading)\n`twitch` | `options`: Override the [default player options](https://dev.twitch.tv/docs/embed)\n`file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)<br />`forceVideo`: Always render a `<video>` element<br />`forceAudio`: Always render an `<audio>` element<br />`forceHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams<br />`forceDASH`: Always use [dash.js](https://github.com/Dash-Industry-Forum/dash.js) for DASH streams<br />`hlsOptions`: Override the [default `hls.js` options](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning)\n\n##### Preloading\n\nWhen `preload` is set to `true` for players that support it, a short, silent video is played in the background when `ReactPlayer` first mounts. This fixes a [bug](https://github.com/CookPete/react-player/issues/7) where videos would not play when loaded in a background browser tab.\n\n### Methods\n\n#### Static Methods\n\nMethod | Description\n------ | -----------\n`ReactPlayer.canPlay(url)` | Determine if a URL can be played. This does *not* detect media that is unplayable due to privacy settings, streaming permissions, etc. In that case, the `onError` prop will be invoked after attemping to play. Any URL that does not match any patterns will fall back to a native HTML5 media player.\n`ReactPlayer.addCustomPlayer(CustomPlayer)` | Add a custom player. See [Adding custom players](#adding-custom-players)\n`ReactPlayer.removeCustomPlayers()` | Remove any players that have been added using `addCustomPlayer()`\n\n#### Instance Methods\n\nUse [`ref`](https://facebook.github.io/react/docs/refs-and-the-dom.html) to call instance methods on the player. See [the demo app](src/demo/App.js) for an example of this.\n\nMethod | Description\n------ | -----------\n`seekTo(amount)` | Seek to the given number of seconds, or fraction if `amount` is between `0` and `1`\n`getCurrentTime()` | Returns the number of seconds that have been played<br />&nbsp; ◦ &nbsp;Returns `null` if unavailable\n`getSecondsLoaded()` | Returns the number of seconds that have been loaded<br />&nbsp; ◦ &nbsp;Returns `null` if unavailable or unsupported\n`getDuration()` | Returns the duration (in seconds) of the currently playing media<br />&nbsp; ◦ &nbsp;Returns `null` if duration is unavailable\n`getInternalPlayer()` | Returns the internal player of whatever is currently playing<br />&nbsp; ◦ &nbsp;eg the [YouTube player instance](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player), or the [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) element when playing a video file<br />&nbsp; ◦ &nbsp;Use `getInternalPlayer('hls')` to get the [hls.js](https://github.com/video-dev/hls.js) player<br />&nbsp; ◦ &nbsp;Use `getInternalPlayer('dash')` to get the [dash.js](https://github.com/Dash-Industry-Forum/dash.js) player<br />&nbsp; ◦ &nbsp;Returns `null` if the internal player is unavailable\n\n### Advanced Usage\n\n#### Responsive player\n\nSet `width` and `height` to `100%` and wrap the player in a [fixed aspect ratio box](https://css-tricks.com/aspect-ratio-boxes) to get a responsive player:\n\n```js\nclass ResponsivePlayer extends Component {\n  render () {\n    return (\n      <div className='player-wrapper'>\n        <ReactPlayer\n          className='react-player'\n          url='https://www.youtube.com/watch?v=ysz5S6PUM-U'\n          width='100%'\n          height='100%'\n        />\n      </div>\n    )\n  }\n}\n```\n\n```css\n.player-wrapper {\n  position: relative;\n  padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */\n}\n\n.react-player {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n```\n\nSee [`jsFiddle` example](https://jsfiddle.net/e6w3rtj1/)\n\n#### Single player imports\n\nIf you are only ever playing a single type of URL, you can import individual players to keep your bundle size down:\n\n```jsx\nimport YouTubePlayer from 'react-player/lib/players/YouTube'\n\n<YouTubePlayer\n  url='https://www.youtube.com/watch?v=d46Azg3Pm4c'\n  playing\n  controls\n  // Other ReactPlayer props will work here\n/>\n```\n\nSee a list of available players [here](https://github.com/CookPete/react-player/tree/master/src/players).\n\n#### Standalone player\n\nIf you aren’t using React, you can still render a player using the standalone library:\n\n```html\n<script src='https://cdn.rawgit.com/CookPete/react-player/standalone/dist/ReactPlayer.standalone.js'></script>\n<script>\n  const container = document.getElementById('container')\n  const url = 'https://www.youtube.com/watch?v=d46Azg3Pm4c'\n\n  renderReactPlayer(container, { url, playing: true })\n\n  function pausePlayer () {\n    renderReactPlayer(container, { url, playing: false })\n  }\n</script>\n```\n\nSee [`jsFiddle` example](https://jsfiddle.net/krkcvx9s/)\n\n#### Adding custom players\n\nIf you have your own player that is compatible with ReactPlayer’s internal architecture, you can add it using `addCustomPlayer`:\n\n```javascript\nimport YourOwnPlayer from './somewhere';\nReactPlayer.addCustomPlayer(YourOwnPlayer);\n```\n\nUse `removeCustomPlayers` to clear all custom players:\n\n```javascript\nReactPlayer.removeCustomPlayers();\n```\n\nIt is your responsibility to ensure that custom players keep up with any internal changes to ReactPlayer in later versions.\n\n#### Using Bower\n\n```bash\nbower install react-player --save\n```\n\n```html\n<script src='bower_components/react/react.js'></script>\n<script src='bower_components/react/react-dom.js'></script>\n<script src='bower_components/react-player/dist/ReactPlayer.js'></script>\n<script>\n  ReactDOM.render(\n    <ReactPlayer url='https://www.youtube.com/watch?v=d46Azg3Pm4c' playing />,\n    document.getElementById('container')\n  )\n</script>\n```\n\n#### Mobile considerations\n\nDue to various restrictions, `ReactPlayer` is not guaranteed to function properly on mobile devices. The [YouTube player documentation](https://developers.google.com/youtube/iframe_api_reference), for example, explains that [certain mobile browsers require user interaction](https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations) before playing:\n\n> The HTML5 `<video>` element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it’s initiated by a user interaction (such as tapping on the player).\n\n#### Multiple Sources and Tracks\n\nWhen playing file paths, an array of sources can be passed to the `url` prop to render multiple `<source>` tags.\n\n```jsx\n<ReactPlayer playing url={['foo.webm', 'foo.ogg']} />\n```\n\nYou can also specify a `type` for each source by using objects with `src` and `type` properties.\n\n```jsx\n<ReactPlayer\n  playing\n  url={[\n    {src: 'foo.webm', type: 'video/webm'},\n    {src: 'foo.ogg', type: 'video/ogg'}\n  ]}\n/>\n```\n\n[`<track>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) elements for subtitles can be added using `fileConfig`:\n\n```jsx\n<ReactPlayer\n  playing\n  url='foo.webm'\n  config={{ file: {\n    tracks: [\n      {kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},\n      {kind: 'subtitles', src: 'subs/subtitles.ja.vtt', srcLang: 'ja'},\n      {kind: 'subtitles', src: 'subs/subtitles.de.vtt', srcLang: 'de'}\n    ]\n  }}}\n/>\n```\n\n### Supported media\n\n* YouTube videos use the [YouTube iFrame Player API](https://developers.google.com/youtube/iframe_api_reference)\n* Facebook videos use the [Facebook Embedded Video Player API](https://developers.facebook.com/docs/plugins/embedded-video-player/api)\n* SoundCloud tracks use the [SoundCloud Widget API](https://developers.soundcloud.com/docs/api/html5-widget)\n* Streamable videos use [`Player.js`](https://github.com/embedly/player.js)\n* Vidme videos are [no longer supported](https://medium.com/vidme/goodbye-for-now-120b40becafa)\n* Vimeo videos use the [Vimeo Player API](https://developer.vimeo.com/player/js-api)\n* Wistia videos use the [Wistia Player API](https://wistia.com/doc/player-api)\n* Twitch videos use the [Twitch Interactive Frames API](https://dev.twitch.tv/docs/embed#interactive-frames-for-live-streams-and-vods)\n* DailyMotion videos use the [DailyMotion Player API](https://developer.dailymotion.com/player)\n* [Supported file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats) are playing using [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) or [`<audio>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/audio) elements\n  * HLS streams are played using [`hls.js`](https://github.com/video-dev/hls.js)\n  * DASH streams are played using [`dash.js`](https://github.com/Dash-Industry-Forum/dash.js)\n\n### Contributing\n\nSee the [contribution guidelines](https://github.com/CookPete/react-player/blob/master/CONTRIBUTING.md) before creating a pull request.\n\n### Thanks\n\n- Many thanks to [Kostya Luchankin](https://github.com/phationmationion) for help overhauling the player inheritance patterns.\n- Thanks to anyone who has [contributed](https://github.com/CookPete/react-player/graphs/contributors).\n","readmeFilename":"README.md"}