Gathering detailed insights and metrics for react-plyr
Gathering detailed insights and metrics for react-plyr
Installations
npm install react-plyrDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
8.11.2
NPM Version
6.9.0
Score
68.4
Supply Chain
98.9
Quality
75.1
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
725,133
Last Day
103
Last Week
452
Last Month
2,185
Last Year
28,150
Bundle Size
126.17 kB
Minified
36.63 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
2.2.0
Package Id
react-plyr@2.2.0
Unpacked Size
64.86 kB
Size
10.96 kB
File Count
7
NPM Version
6.9.0
Node Version
8.11.2
Total Downloads
Cumulative downloads
Total Downloads
725,133
Dependencies
2
Peer Dependencies
1
Dev Dependencies
31
@babel/cli@babel/core@babel/plugin-proposal-class-properties@babel/preset-react@storybook/addon-actions@storybook/addon-info@storybook/addon-links@storybook/addon-options@storybook/addons@storybook/reactbabel-eslintbabel-jestenzymeenzyme-adapter-react-16enzyme-to-jsoneslinteslint-config-react-appeslint-plugin-flowtypeeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reactidentity-obj-proxyjestjest-clijest-enzymeprettierrafreactreact-domreact-scriptsrimraf
ReactPlyr Video Component
A React video component based on Plyr.
Installation
Add react-plyr into your package.json dependencies:
1npm install react-plyr --save
CSS
Include the plyr.css stylsheet into your <head>
1<link rel="stylesheet" href="path/to/plyr.css">
If you want to use our CDN (provided by Fastly) for the default CSS, you can use the following:
1<link rel="stylesheet" href="https://cdn.plyr.io/3.5.2/plyr.css">
Usage
Simple Youtube or Vimeo video
1import Plyr from 'react-plyr'; 2 3// add the component in the render function 4render() { 5 return ( 6 <Plyr 7 type="youtube" // or "vimeo" 8 videoId="CDFN1VatiJA" 9 /> 10 ) 11}
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: '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 Register for an account here: http://vi.ai/publisher-video-monetization/ | { enabled: false, publisherId: '', tagUrl: '' } |
| tracks | [] |
Support
Please open an issue for support.
Contributing
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.
No vulnerabilities found.
No security vulnerabilities found.