xDae / React Plyr
Licence: mit
📺 A React video component based on Plyr
Stars: ✭ 254
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Plyr
Network Avatar Picker
A npm module that returns user's social network avatar. Supported providers: facebook, instagram, twitter, tumblr, vimeo, github, youtube and gmail
Stars: ✭ 74 (-70.87%)
Mutual labels: vimeo, youtube
Plyr React
A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo
Stars: ✭ 89 (-64.96%)
Mutual labels: vimeo, youtube
Ac D3
Javascript Library for building Audiovisual Charts in D3
Stars: ✭ 76 (-70.08%)
Mutual labels: vimeo, youtube
Yaydl
yet another youtube down loader (Git mirror)
Stars: ✭ 45 (-82.28%)
Mutual labels: vimeo, youtube
Kaku
🎧 Kaku is a highly integrated music player supports different online platform like YouTube, SoundCloud, Vimeo and more. Available on Mac, Windows and Linux.
Stars: ✭ 1,028 (+304.72%)
Mutual labels: vimeo, youtube
Lazyframe
🛀🏽 Dependency-free library for lazyloading iframes
Stars: ✭ 237 (-6.69%)
Mutual labels: vimeo, youtube
Bigpicture
Lightweight JavaScript image / video viewer. Supports Youtube, Vimeo, etc.
Stars: ✭ 722 (+184.25%)
Mutual labels: vimeo, youtube
Vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Stars: ✭ 1,928 (+659.06%)
Mutual labels: vimeo, youtube
React Modal Video
Accessible React Modal Video Component
Stars: ✭ 105 (-58.66%)
Mutual labels: vimeo, youtube
Plyr
Plyr Mediaplayer (Video und Audio) im Front- und Backend
Stars: ✭ 30 (-88.19%)
Mutual labels: vimeo, youtube
Richtextview
iOS Text View (UIView) that Properly Displays LaTeX, HTML, Markdown, and YouTube/Vimeo Links
Stars: ✭ 953 (+275.2%)
Mutual labels: vimeo, youtube
Unity Videoplayer Helper
Simple helper for the Video Player in Unity
Stars: ✭ 49 (-80.71%)
Mutual labels: vimeo, youtube
Raspberrycast
📺 Transform your Raspberry Pi into a streaming device. Videos can be sent from mobile devices or computers (Chrome extension).
Stars: ✭ 726 (+185.83%)
Mutual labels: vimeo, youtube
Ngx Youtube Player
(ngx) A youtube component wrapped with Angular (typescript)
Stars: ✭ 89 (-64.96%)
Mutual labels: youtube, component
Superembed.js
Fluid width for YouTube, Vimeo, Vine, VideoPress, DailyMotion, and more embedded videos.
Stars: ✭ 615 (+142.13%)
Mutual labels: vimeo, youtube
Podsync
Turn YouTube or Vimeo channels, users, or playlists into podcast feeds
Stars: ✭ 657 (+158.66%)
Mutual labels: vimeo, youtube
Socialcounters
jQuery/PHP - Collection of Social Media APIs that display number of your social media fans. Facebook Likes, Twitter Followers, Instagram Followers, YouTube Subscribers, etc..
Stars: ✭ 104 (-59.06%)
Mutual labels: vimeo, youtube
ReactPlyr Video Component
A React video component based on 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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].