# faqta-react-plyr
> A simple, accessible HTML5 media player React Component
Latest version **2.2.1** (published 2021-07-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install faqta-react-plyr
pnpm add faqta-react-plyr
yarn add faqta-react-plyr
bun add faqta-react-plyr
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.2.1 |
| Published | 2021-07-08 |
| First published | 2019-02-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 56.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jose Miguel Bejarano |
| Maintainers | pimbutton |
## Links
- npm: https://www.npmjs.com/package/faqta-react-plyr
- Repository: ttps://github.com/faqta/faqta-react-plyr
- Homepage: https://github.com/xDae/react-plyr
- Issues: https://github.com/xDae/react-plyr/issues
- npm.io page: https://npm.io/package/faqta-react-plyr
## Dependencies (2)
- [plyr](https://npm.io/package/plyr.md) ^3.6.8
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
## Recent versions
- 2.2.1 (latest) — 2021-07-08
- 2.1.4 — 2019-11-27
- 2.1.3 — 2019-02-28
- 2.1.2 — 2019-02-28
## README
# ReactPlyr Video Component
[](https://www.npmjs.com/package/react-plyr)
[](https://www.npmjs.com/package/react-plyr)
[](https://david-dm.org/xDae/react-plyr)
[](https://travis-ci.org/xDae/react-plyr)
[]()
A React video component based on Plyr.
## Installation
Add `react-plyr` into your package.json dependencies:
```sh
npm install react-plyr --save
```
### CSS
Include the `plyr.css` stylsheet into your ``
```html
```
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
```html
```
## Usage
### Simple Youtube or Vimeo video
```javascript
import Plyr from 'react-plyr';
// add the component in the render function
render() {
return (
)
}
```
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
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: (typeof navigator !== 'undefined') ? (navigator.language || navigator.userLanguage).split('-')[0] : 'en' }``` |
| 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
Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio | ```{ enabled: false, publisherId: '' }``` |
| captions | | ``` [] ``` |
## 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/).
---
_Source: https://npm.io/package/faqta-react-plyr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._