npm package: @peergrade/react-plyr
Description: A simple, accessible HTML5 media player React Component
Author: Jose Miguel Bejarano
Latest version: 2.2.0-peergrade.1

# ReactPlyr Video Component

[![npm](https://img.shields.io/npm/dt/react-plyr.svg)](https://www.npmjs.com/package/react-plyr)
[![npm](https://img.shields.io/npm/v/react-plyr.svg)](https://www.npmjs.com/package/react-plyr)
[![Storybook](https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg)](https://xdae.github.io/react-plyr)
[![David](https://img.shields.io/david/xDae/react-plyr.svg)](https://david-dm.org/xDae/react-plyr)
[![Travis](https://img.shields.io/travis/xDae/react-plyr.svg)](https://travis-ci.org/xDae/react-plyr)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()

A React video component based on Plyr.

![react-plyr ](screenshot.png "react-plyr")

## Installation

Add `react-plyr` into your package.json dependencies:

```sh
npm install react-plyr --save
```

### CSS

Include the `plyr.css` stylsheet into your `<head>`

```html
<link rel="stylesheet" href="path/to/plyr.css">
```

If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:

```html
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.2/plyr.css">
```

## Usage

### Simple Youtube or Vimeo video
```javascript
import Plyr from 'react-plyr';

// add the component in the render function
render() {
  return (
    <Plyr
      type="youtube" // or "vimeo"
      videoId="CDFN1VatiJA"
    />
  )
}
```
Note: The ``videoId`` can either be the video ID or URL for the media.

## Props

| Prop               |                                                                                                                                                  | Default                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
|--------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| enable             | Disable                                                                                                                                          | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| title              | Custom media title                                                                                                                               | ""                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| debug              | Logging to console                                                                                                                               | false                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| autoplay           | Auto play (if supported)                                                                                                                         | false                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| autopause          | Only allow one media playing at once (vimeo only)                                                                                                | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| seekTime           | Default time to skip when rewind/fast forward                                                                                                    | 10                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| volume             | Default volume                                                                                                                                   | 1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| muted              |  Default volume (0)                                                                                                                              | false                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| duration           | Pass a custom duration                                                                                                                           | null                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| displayDuration    | Display the media duration on load in the current time position<br/> If you have opted to display both duration and currentTime, this is ignored | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| invertTime         | Invert the current time to be a countdown                                                                                                        | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| toggleInvert       | Clicking the currentTime inverts it's value to show time left rather than elapsed                                                                | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ratio              | Aspect ratio (for embeds)                                                                                                                        | "16:9"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| clickToPlay        | Click video container to play/pause                                                                                                              | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| hideControls       | Auto hide the controls                                                                                                                           | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| resetOnEnd         | Reset to start when playback ended                                                                                                               | false                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| disableContextMenu | Disable the standard context menu                                                                                                                | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| loadSprite         | Sprite (for icons)                                                                                                                               | true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| iconPrefix         | Sprite (for icons)                                                                                                                               | "plyr"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| iconUrl            | Sprite (for icons)                                                                                                                               | "https://cdn.plyr.io/3.3.5/plyr.svg"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| blankVideo         | Blank video (used to prevent errors on source change)                                                                                            | "https://cdn.plyr.io/static/blank.mp4"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| quality            | Quality default                                                                                                                                  | ``` {    default: 576,    options: [      4320,      2880,      2160,      1440,      1080,      720,      576,      480,      360,      240,      "default"    ] } ```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| loop               | Set loops                                                                                                                                        | ``` {    loop: {      active: false    } } ```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| speed              | Speed default and options to display                                                                                                             | ```{ selected: 1, options: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ] }```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| keyboard           | Keyboard shortcut settings                                                                                                                       | ```{ focused: true, global: false }```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| tooltips           | Display tooltips                                                                                                                                 | ```{ controls: false, seek: true }```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| captions           | Captions settings                                                                                                                                | ```{ active: false, language: 'auto', update: false }```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| fullscreen         | Fullscreen settings                                                                                                                              | ```{ enabled: true, fallback: true, iosNative: false }```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| storage            | Local storage                                                                                                                                    | ```{ enabled: true, key: 'plyr' }```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| controls           | Default controls                                                                                                                                 | ```[ 'play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen' ]```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| settings           |                                                                                                                                                  | ```[ 'captions', 'quality', 'speed' ]```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| i18n               | Localisation                                                                                                                                     | ```{ restart: 'Restart', rewind: 'Rewind {seektime} secs', play: 'Play', pause: 'Pause', fastForward: 'Forward {seektime} secs', seek: 'Seek', played: 'Played', buffered: 'Buffered', currentTime: 'Current time', duration: 'Duration', volume: 'Volume', mute: 'Mute', unmute: 'Unmute', enableCaptions: 'Enable captions', disableCaptions: 'Disable captions', enterFullscreen: 'Enter fullscreen', exitFullscreen: 'Exit fullscreen', frameTitle: 'Player for {title}', captions: 'Captions', settings: 'Settings', speed: 'Speed', normal: 'Normal', quality: 'Quality', loop: 'Loop', start: 'Start', end: 'End', all: 'All', reset: 'Reset', disabled: 'Disabled', enabled: 'Enabled', advertisement: 'Ad' }``` |
| urls               | URLs                                                                                                                                             | ```{ vimeo: { sdk: 'https://player.vimeo.com/api/player.js', iframe: 'https://player.vimeo.com/video/{0}?{1}', api: 'https://vimeo.com/api/v2/video/{0}.json' }, youtube: { sdk: 'https://www.youtube.com/iframe_api', api: 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title))&part=snippet', poster: 'https://img.youtube.com/vi/{0}/maxresdefault.jpg,https://img.youtube.com/vi/{0}/hqdefault.jpg' }, googleIMA: { sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js' } }```                                                                                                                                                                                            |
| keys               | API keys                                                                                                                                         | ```{ google: null }```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ads                | Advertisements plugin<br> Register for an account here: http://vi.ai/publisher-video-monetization/                                    | ```{ enabled: false, publisherId: '', tagUrl: '' }```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| tracks           |                                                                                                                                                  | ``` [] ```                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |

## Support

Please [open an issue](https://github.com/xDae/react-plyr/issues/new) for support.

## Contributing

Please contribute using [Github Flow](https://guides.github.com/introduction/flow/). Create a branch, add commits, and [open a pull request](https://github.com/xDae/react-plyr/compare/).