@rocketseat/react-plyr
@rocketseat/react-plyr
npm i @rocketseat/react-plyr
@rocketseat/react-plyr

@rocketseat/react-plyr

📺 A React video component based on Plyr

by Rocketseat

1.0.1 (see all)License:MITTypeScript:Not Found
npm i @rocketseat/react-plyr
Readme

ReactPlyr Video Component

license

Rocketseat's implementation of xDae/react-plyr

react-plyr

Installation

Add @rocketseat/react-plyr into your package.json dependencies:

npm install @rocketseat/react-plyr --save

CSS

Include the plyr.css stylsheet into your <head>

<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:

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

Usage

Simple Youtube or Vimeo video

import Plyr from '@rocketseat/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

PropDefault
enableDisabletrue
titleCustom media title""
debugLogging to consolefalse
autoplayAuto play (if supported)false
autopauseOnly allow one media playing at once (vimeo only)true
seekTimeDefault time to skip when rewind/fast forward10
volumeDefault volume1
mutedDefault volume (0)false
durationPass a custom durationnull
displayDurationDisplay the media duration on load in the current time position
If you have opted to display both duration and currentTime, this is ignored
true
invertTimeInvert the current time to be a countdowntrue
toggleInvertClicking the currentTime inverts it's value to show time left rather than elapsedtrue
ratioAspect ratio (for embeds)"16:9"
clickToPlayClick video container to play/pausetrue
hideControlsAuto hide the controlstrue
resetOnEndReset to start when playback endedfalse
disableContextMenuDisable the standard context menutrue
loadSpriteSprite (for icons)true
iconPrefixSprite (for icons)"plyr"
iconUrlSprite (for icons)"https://cdn.plyr.io/3.3.5/plyr.svg"
blankVideoBlank video (used to prevent errors on source change)"https://cdn.plyr.io/static/blank.mp4"
qualityQuality default{ default: 576, options: [ 4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240, "default" ] }
loopSet loops{ loop: { active: false } }
speedSpeed default and options to display{ selected: 1, options: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ] }
keyboardKeyboard shortcut settings{ focused: true, global: false }
tooltipsDisplay tooltips{ controls: false, seek: true }
captionsCaptions settings{ active: false, language: 'auto', update: false }
fullscreenFullscreen settings{ enabled: true, fallback: true, iosNative: false }
storageLocal storage{ enabled: true, key: 'plyr' }
controlsDefault controls[ 'play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen' ]
settings[ 'captions', 'quality', 'speed' ]
i18nLocalisation{ 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' }
urlsURLs{ 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' } }
keysAPI keys{ google: null }
adsAdvertisements plugin
Register for an account here: http://vi.ai/publisher-video-monetization/
{ enabled: false, publisherId: '', tagUrl: '' }
tracks[]

Downloads/wk

25

GitHub Stars

20

LAST COMMIT

3yrs ago

MAINTAINERS

7

CONTRIBUTORS

18

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.0.1
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate