ReactPlayer

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura. Not using React? No problem.

--- > Using Next.js and need to handle video upload/processing? Check out [next-video](https://github.com/muxinc/next-video). ### ✨ The future of ReactPlayer Maintenance of ReactPlayer is being taken over by [Mux](https://www.mux.com). The team at Mux have worked on many highly respected projects and are committed to improving video tooling for developers. ReactPlayer will remain open source, but with a higher rate of fixes and releases over time. Thanks to everyone in the community for your ongoing support. ### Usage ```bash npm install react-player # or yarn add react-player ``` ```jsx import React from 'react' import ReactPlayer from 'react-player' // Render a YouTube video player ``` By default, ReactPlayer supports [many different types](#supported-media) of `url`. If you only ever use one type, use imports such as `react-player/youtube` to reduce your bundle size. See [config keys](#config-prop) for all player keys. ```jsx import React from 'react' import ReactPlayer from 'react-player/youtube' // Only loads the YouTube player ``` If your build system supports `import()` statements, use `react-player/lazy` to lazy load the appropriate player for the `url` you pass in. This adds several `reactPlayer` chunks to your output, but reduces your main bundle size. ```jsx import React from 'react' import ReactPlayer from 'react-player/lazy' // Lazy load the YouTube player ``` Demo page: [`https://cookpete.github.io/react-player`](https://cookpete.github.io/react-player) The 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/examples/react/src/App.js) for a full example. For platforms 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`. #### Autoplay As 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. Please set `muted={true}`. ### Props Prop | Description | Default ---- | ----------- | ------- `url` | The url of a video or song to play
◦ Can be an [array](#multiple-sources-and-tracks) or [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) object `playing` | Set to `true` or `false` to pause or play the media | `false` `loop` | Set to `true` or `false` to loop the media | `false` `controls` | Set to `true` or `false` to display native player controls.
◦ For Vimeo videos, hiding controls must be enabled by the video owner. | `false` `light` | Set to `true` to show just the video thumbnail, which loads the full player on click
◦ Pass in an image URL to override the preview image | `false` `volume` | Set the volume of the player, between `0` and `1`
◦ `null` uses default volume on all players [`#357`](https://github.com/cookpete/react-player/issues/357) | `null` `muted` | Mutes the player
◦ Only works if `volume` is set | `false` `playbackRate` | Set the playback rate of the player
◦ Only supported by YouTube, Wistia, and file paths | `1` `width` | Set the width of the player | `640px` `height` | Set the height of the player | `360px` `style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element | `{}` `progressInterval` | The time between `onProgress` callbacks, in milliseconds | `1000` `playsinline` | Applies the `playsinline` attribute where supported | `false` `pip` | Set to `true` or `false` to enable or disable [picture-in-picture mode](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)
◦ Only available when playing file URLs in [certain browsers](https://caniuse.com/#feat=picture-in-picture) | `false` `stopOnUnmount` | If you are using `pip` you may want to use `stopOnUnmount={false}` to continue playing in picture-in-picture mode even after ReactPlayer unmounts | `true` `fallback` | Element or component to use as a fallback if you are using lazy loading | `null` `wrapper` | Element or component to use as the container element | `div` `playIcon` | Element or component to use as the play icon in light mode `previewTabIndex` | Set the tab index to be used on light mode | 0 `config` | Override options for the various players, see [config prop](#config-prop) #### Callback props Callback props take a function that gets fired on various player events: Prop | Description ---- | ----------- `onReady` | Called when media is loaded and ready to play. If `playing` is set to `true`, media will play immediately `onStart` | Called when media starts playing `onPlay` | Called when media starts or resumes playing after pausing or buffering `onProgress` | Callback containing `played` and `loaded` progress as a fraction, and `playedSeconds` and `loadedSeconds` in seconds
◦ eg `{ played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }` `onDuration` | Callback containing duration of the media, in seconds `onPause` | Called when media is paused `onBuffer` | Called when media starts buffering `onBufferEnd` | Called when media has finished buffering
◦ Works for files, YouTube and Facebook `onSeek` | Called when media seeks with `seconds` parameter `onPlaybackRateChange` | Called when playback rate of the player changed
◦ Only supported by YouTube, Vimeo ([if enabled](https://developer.vimeo.com/player/sdk/reference#playbackratechange)), Wistia, and file paths `onPlaybackQualityChange` | Called when playback quality of the player changed
◦ Only supported by YouTube ([if enabled](https://developers.google.com/youtube/iframe_api_reference#Events)) `onEnded` | Called when media finishes playing
◦ Does not fire when `loop` is set to `true` `onError` | Called when an error occurs whilst attempting to play media `onClickPreview` | Called when user clicks the `light` mode preview `onEnablePIP` | Called when picture-in-picture mode is enabled `onDisablePIP` | Called when picture-in-picture mode is disabled #### Config prop There is a single `config` prop to override settings for each type of player: ```jsx ``` Settings for each player live under different keys: Key | Options --- | ------- `youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)
`embedOptions`: Override the [default embed options](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)
`onUnstarted`: Called when state changes to `unstarted` (usually when video fails to autoplay) `facebook` | `appId`: Your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id)
`version`: Facebook SDK version
`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))
`attributes`: Extra data attributes to pass to the `fb-video` element `soundcloud` | `options`: Override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params) `vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/sdk/embed)
`title`: Set the player `iframe` title attribute `mux` | `attributes`: Apply [element attributes](https://github.com/muxinc/elements/blob/main/packages/mux-player/REFERENCE.md#attributes)
`version`: Mux player version `wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)
`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid)) `mixcloud` | `options`: Override the [default player options](https://www.mixcloud.com/developers/widget/#methods) `dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters) `twitch` | `options`: Override the [default player options](https://dev.twitch.tv/docs/embed)
`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid)) `file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)
`forceVideo`: Always render a `

套件	下載數	Stars	大小	Issues	發布時間	許可

react-player	1,194,645	9,723	1.5 MB	88	1 年前	MIT