🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple, accessible HTML5 media player component based on Plyr.

Audio_Video React

Documentation

ReactPlyr Video Component

npm npm Storybook David Travis license

A React video component based on Plyr.

react-plyr

Installation

Add react-plyr into your package.json dependencies:

npm install 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 '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

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.


You May Also Like