# @m2g/react-plyr > A wrapper plyr with React (only HTML5 video and audio) and HLS quality control Latest version **1.3.8** (published 2021-08-04) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @m2g/react-plyr pnpm add @m2g/react-plyr yarn add @m2g/react-plyr bun add @m2g/react-plyr ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.3.8 | | Published | 2021-08-04 | | First published | 2021-03-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 17 | | Unpacked size | 583.4 KB | | Known vulnerabilities | 0 (+5 in 2 direct dependencies) | | Install scripts | no | | Author | m2g | | Maintainers | m2g | ## Links - npm: https://www.npmjs.com/package/@m2g/react-plyr - Repository: https://github.com/M2G/react-plyr - Issues: https://github.com/M2G/react-plyr/issues - npm.io page: https://npm.io/package/@m2g/react-plyr ## Dependencies (17) - [plyr](https://npm.io/package/plyr.md) ^3.6.8 - [enzyme](https://npm.io/package/enzyme.md) ^3.11.0 - [hls.js](https://npm.io/package/hls.js.md) ^1.0.8-0.canary.7839 - [cssnano](https://npm.io/package/cssnano.md) ^4.1.10 - [env-cmd](https://npm.io/package/env-cmd.md) ^10.1.0 - [node-sass](https://npm.io/package/node-sass.md) ^4.14.1 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.5.0 - [@types/react](https://npm.io/package/@types/react.md) ^16.14.8 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.8 - [@types/classnames](https://npm.io/package/@types/classnames.md) ^2.2.10 - [@types/prop-types](https://npm.io/package/@types/prop-types.md) ^15.7.3 - [http-proxy-middleware](https://npm.io/package/http-proxy-middleware.md) ^1.0.6 - [enzyme-adapter-react-16](https://npm.io/package/enzyme-adapter-react-16.md) ^1.15.6 - [hard-source-webpack-plugin](https://npm.io/package/hard-source-webpack-plugin.md) ^0.13.1 - [fork-ts-checker-webpack-plugin](https://npm.io/package/fork-ts-checker-webpack-plugin.md) ^4.1.6 ## Recent versions - 1.3.8 (latest) — 2021-08-04 - 1.3.7 — 2021-08-04 - 1.3.6 — 2021-08-03 - 1.2.4 — 2021-03-13 - 1.2.1 — 2021-03-13 ## README # ReactPlyr Video/Audio Component A React video component based on Plyr (without Youtube and Vimeo part). ## Installation Add `@m2g/react-plyr` into your package.json dependencies: ```sh npm install @m2g/react-plyr --save ``` ## Usage ### Simple Video ```javascript import ReactPlyr from '@m2g/react-plyr'; import '@m2g/react-plyr/build/react-plyr.css'; // add the component in the render function ; ``` ### Simple Audio ```javascript import ReactPlyr from '@m2g/react-plyr'; import '@m2g/react-plyr/build/react-plyr.css'; // add the component in the render function ; ``` ### Video with Source ```javascript import ReactPlyr from '@m2g/react-plyr'; import '@m2g/react-plyr/build/react-plyr.css'; // add the component in the render function ; ``` ### Video with Source and caption ```javascript import ReactPlyr from '@m2g/react-plyr'; import '@m2g/react-plyr/build/react-plyr.css'; // add the component in the render function ; ``` ### Audio with Source ```javascript import ReactPlyr from '@m2g/react-plyr'; import '@m2g/react-plyr/build/react-plyr.css'; // add the component in the render function ; ``` ### HLS example ```javascript import ReactPlyr from '@m2g/react-plyr'; import '@m2g/react-plyr/build/react-plyr.css'; // add the component in the render function ; ``` Note: See App.tsx file on project if you want more example. ## Props | Prop | Prop | Description | Default | | ------------------ | -------------------|----------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | enable | Boolean | Disable | true | | title | String | Custom media title | "" | | debug | Boolean | Logging to console | false | | autoplay | Boolean | Auto play (if supported) | false | | autopause | Boolean | Only allow one media playing at once (vimeo only) | true | | seekTime | Number | Default time to skip when rewind/fast forward | 10 | | volume | Boolean | Default volume | 1 | | muted | Boolean | Default volume (0) | false | | duration | Number | Pass a custom duration | null | | displayDuration | Boolean | 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 | Boolean | Invert the current time to be a countdown | true | | toggleInvert | Boolean | Clicking the currentTime inverts it's value to show time left rather than elapsed | true | | ratio | String | Aspect ratio (for embeds) | "16:9" | | clickToPlay | Boolean | Click video container to play/pause | true | | hideControls | Boolean | Auto hide the controls | true | | resetOnEnd | Boolean | Reset to start when playback ended | false | | disableContextMenu | Boolean | Disable the standard context menu | true | | loadSprite | Boolean | Sprite (for icons) | true | | iconPrefix | String | Sprite (for icons) | "plyr" | | iconUrl | String | Sprite (for icons) | "https://cdn.plyr.io/3.3.5/plyr.svg" | | blankVideo | String | Blank video (used to prevent errors on source change) | "https://cdn.plyr.io/static/blank.mp4" | | quality | Object | Quality default | `{ default: 576, options: [ 4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240, "default" ] }` | | loop | Boolean | Set loops | `{ loop: { active: false } }` | | speed | Object | Speed default and options to display | `{ selected: 1, options: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ] }` | | keyboard | Object | Keyboard shortcut settings | `{ focused: true, global: false }` | | tooltips | Object | Display tooltips | `{ controls: false, seek: true }` | | captions | Object | Captions settings | `{ active: false, language: 'auto', update: false }` | | fullscreen | Object | Fullscreen settings | `{ enabled: true, fallback: true, iosNative: false }` | | storage | Object | Local storage | `{ enabled: true, key: 'plyr' }` | | controls | Object | Default controls | `[ 'play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen' ]` | | settings | Object | | `[ 'captions', 'quality', 'speed' ]` | | i18n | Object | 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 | Object | 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 | Object | API keys | `{ google: null }` | | ads | Object | Advertisements plugin
Register for an account here: http://vi.ai/publisher-video-monetization/ | `{ enabled: false, publisherId: '', tagUrl: '' }` | | tracks | Array | | `[]` | | previewThumbnails | Object | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src` must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below. | `{ enabled: false, src: '' }` | ## Support Please [open an issue](https://github.com/m2g/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/m2g/react-plyr/compare/). --- _Source: https://npm.io/package/@m2g/react-plyr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._