### Clone and Run Demo Locally
Source: https://github.com/cookpete/react-player/blob/master/CONTRIBUTING.md
Clone the repository, install dependencies, start the development server, and open the demo in your browser.
```bash
git clone https://github.com/CookPete/react-player.git
cd react-player
npm install # or yarn
npm start
open http://localhost:3000
```
--------------------------------
### Install ReactPlayer
Source: https://github.com/cookpete/react-player/blob/master/README.md
Install ReactPlayer using npm or yarn. This is the first step to integrating the component into your React project.
```bash
npm install react-player # or yarn add react-player
```
--------------------------------
### Basic ReactPlayer Usage
Source: https://github.com/cookpete/react-player/blob/master/README.md
Import ReactPlayer and use it by providing a media URL to the 'src' prop. This example demonstrates rendering a YouTube player.
```jsx
import React from 'react'
import ReactPlayer from 'react-player'
// Render a YouTube video player
```
--------------------------------
### Create a Responsive Player
Source: https://github.com/cookpete/react-player/blob/master/README.md
Achieve a responsive player by setting width to '100%', height to 'auto', and specifying an `aspectRatio`.
```js
```
--------------------------------
### Run Tests with Karma, Mocha, and Chai
Source: https://github.com/cookpete/react-player/blob/master/CONTRIBUTING.md
Execute the test suite in the browser using Karma, Mocha, and Chai. Add new tests for any new functionality.
```bash
npm test
```
--------------------------------
### Configure YouTube Player Options
Source: https://github.com/cookpete/react-player/blob/master/README.md
Use the `config` prop to pass specific settings to the YouTube player. Refer to the YouTube Player API for available parameters.
```jsx
```
--------------------------------
### Lint Code with StandardJS
Source: https://github.com/cookpete/react-player/blob/master/CONTRIBUTING.md
Run the linting script to check code style according to the project's standard configuration. Fix any reported issues.
```bash
npm run lint
```
--------------------------------
### Enable Light Player with Thumbnail
Source: https://github.com/cookpete/react-player/blob/master/README.md
Use the `light` prop to display a thumbnail and play icon, deferring full player load until interaction. Supports image URLs or components for custom thumbnails.
```jsx
} />
```
--------------------------------
### Enable Native Player Controls
Source: https://github.com/cookpete/react-player/blob/master/README.md
Use the `controls` prop to enable native player controls. Appearance varies by player type.
```jsx
```
--------------------------------
### Add Custom Player Implementation
Source: https://github.com/cookpete/react-player/blob/master/README.md
Integrate your own player compatible with ReactPlayer's architecture using `ReactPlayer.addCustomPlayer`.
```javascript
import YourOwnPlayer from './somewhere';
ReactPlayer.addCustomPlayer(YourOwnPlayer);
```
--------------------------------
### Integrate Media Chrome for Custom Controls
Source: https://github.com/cookpete/react-player/blob/master/README.md
Combine React Player with Media Chrome components for a customizable UI. Ensure `controls` is false on ReactPlayer.
```tsx
import ReactPlayer from "react-player";
import {
MediaController,
MediaControlBar,
MediaTimeRange,
MediaTimeDisplay,
MediaVolumeRange,
MediaPlaybackRateButton,
MediaPlayButton,
MediaSeekBackwardButton,
MediaSeekForwardButton,
MediaMuteButton,
MediaFullscreenButton,
} from "media-chrome/react";
export default function Player() {
return (
);
}
```
--------------------------------
### Import Lazy Player in React Player v2.2
Source: https://github.com/cookpete/react-player/blob/master/MIGRATING.md
Use 'react-player/lazy' for lazy loading players to reduce main bundle size. Requires React 16.6 or later.
```jsx
import ReactPlayer from 'react-player'
// After
import ReactPlayer from 'react-player/lazy'
```
--------------------------------
### Handle Player Ready State in ReactPlayer
Source: https://github.com/cookpete/react-player/blob/master/MIGRATING.md
Before v2.0, refs were used to access the player instance. In v2.0, `onReady` is invoked with the player instance, allowing direct method calls. This is useful for accessing internal player methods like `getInternalPlayer`.
```jsx
class Player extends Component {
ref = player => {
this.player = player // Store a player that may not be ready for methods
this.player.getInternalPlayer() // Returns null if player is not ready
}
handleReady = () => {
this.player.getInternalPlayer() // Internal player now ready
}
render () {
return (
)
}
}
```
```jsx
class Player extends Component {
handleReady = player => {
this.player = player // Store a player that is ready for methods
this.player.getInternalPlayer() // Internal player now ready
}
render () {
return (
)
}
}
```
--------------------------------
### ReactPlayer Static Methods
Source: https://github.com/cookpete/react-player/blob/master/README.md
Static methods available on the ReactPlayer component.
```APIDOC
## ReactPlayer Static Methods
### Description
Static methods available on the ReactPlayer component.
### Methods
- `ReactPlayer.canPlay(src)`: 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 attempting to play. Any URL that does not match any patterns will fall back to a native HTML5 media player.
- `ReactPlayer.addCustomPlayer(CustomPlayer)`: Add a custom player. See [Adding custom players](#adding-custom-players).
- `ReactPlayer.removeCustomPlayers()`: Remove any players that have been added using `addCustomPlayer()`.
```
--------------------------------
### Multiple Sources and Tracks in ReactPlayer
Source: https://github.com/cookpete/react-player/blob/master/README.md
Use multiple `` and `