Gathering detailed insights and metrics for react-plyr
Gathering detailed insights and metrics for react-plyr
Gathering detailed insights and metrics for react-plyr
Gathering detailed insights and metrics for react-plyr
npm install react-plyr
Typescript
Module System
Node Version
NPM Version
68.4
Supply Chain
98.9
Quality
75.1
Maintenance
100
Vulnerability
100
License
Total Downloads
725,133
Last Day
103
Last Week
452
Last Month
2,185
Last Year
28,150
Minified
Minified + Gzipped
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
Cumulative downloads
Total Downloads
2
1
31
A React video component based on Plyr.
Add react-plyr
into your package.json dependencies:
1npm install react-plyr --save
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">
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.
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 | [] |
Please open an issue for support.
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.
No vulnerabilities found.
No security vulnerabilities found.
Last Day
-18.3%
103
Compared to previous day
Last Week
-2.4%
452
Compared to previous week
Last Month
-17.8%
2,185
Compared to previous month
Last Year
-33.8%
28,150
Compared to previous year