ReactPlyr Video/Audio Component

A React video component based on Plyr (without Youtube and Vimeo part).

Installation

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

1npm install @m2g/react-plyr --save

Usage

Simple Video

1import ReactPlyr from '@m2g/react-plyr';
2import '@m2g/react-plyr/build/react-plyr.css';
3
4// add the component in the render function
5<ReactPlyr
6  type="video"
7  url="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
8/>;

Simple Audio

1import ReactPlyr from '@m2g/react-plyr';
2import '@m2g/react-plyr/build/react-plyr.css';
3
4// add the component in the render function
5<ReactPlyr
6  type="audio"
7  title="Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;"
8  url="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
9/>;

Video with Source

1import ReactPlyr from '@m2g/react-plyr';
2import '@m2g/react-plyr/build/react-plyr.css';
3
4// add the component in the render function
5<ReactPlyr
6  poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
7  settings={['quality', 'captions']}
8  sources={[
9    {
10      size: 576,
11      src:
12        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
13      type: 'video/mp4',
14    },
15    {
16      size: 720,
17      src:
18        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
19      type: 'video/mp4',
20    },
21    {
22      size: 1080,
23      src:
24        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
25      type: 'video/mp4',
26    },
27    {
28      size: 1440,
29      src:
30        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
31      type: 'video/mp4',
32    },
33  ]}
34  title="Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;"
35  type="video"
36  tracks={
37    // @ts-ignore
38    [
39      {
40        kind: 'captions',
41        label: 'English',
42        src: '/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
43        srcLang: 'en',
44      },
45      {
46        default: true,
47        kind: 'captions',
48        label: 'French',
49        src: '/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
50        srcLang: 'fr',
51      },
52    ]
53  }
54/>;

Video with Source and caption

1import ReactPlyr from '@m2g/react-plyr';
2import '@m2g/react-plyr/build/react-plyr.css';
3
4// add the component in the render function
5<ReactPlyr
6  poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
7  settings={['quality', 'captions']}
8  sources={[
9    {
10      size: 576,
11      src:
12        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
13      type: 'video/mp4',
14    },
15    {
16      size: 720,
17      src:
18        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
19      type: 'video/mp4',
20    },
21    {
22      size: 1080,
23      src:
24        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
25      type: 'video/mp4',
26    },
27    {
28      size: 1440,
29      src:
30        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
31      type: 'video/mp4',
32    },
33  ]}
34  title="Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;"
35  type="video"
36  tracks={
37    // @ts-ignore
38    [{
39      kind: 'captions',
40      label: 'English',
41      src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
42      srcLang: 'en',
43    },
44      {
45        default: true,
46        kind: 'captions',
47        label: 'French',
48        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
49        srcLang: 'fr',
50      }]
51  }
52  type="video"
53  previewThumbnails={{
54    enabled: true,
55    src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
56  }}
57/>;

Audio with Source

1import ReactPlyr from '@m2g/react-plyr';
2import '@m2g/react-plyr/build/react-plyr.css';
3
4// add the component in the render function
5<ReactPlyr
6      title='Example title'
7      type="audio"
8      sources={[
9          {
10              src: '/path/to/audio.mp3',
11              type: 'audio/mp3',
12          },
13          {
14              src: '/path/to/audio.ogg',
15              type: 'audio/ogg',
16          },
17      ]}
18/>;

HLS example

1import ReactPlyr from '@m2g/react-plyr';
2import '@m2g/react-plyr/build/react-plyr.css';
3
4// add the component in the render function
5<ReactPlyr
6  isHls
7  type='video'
8  title='My title'
9  url="https://stream.mux.com/Wxle5yzErvilJ02C13zuv8OSeROvfwsjS.m3u8"
10/>;

Note: See App.tsx file on project if you want more example.

Props

Prop	Prop	Description	Default
enable	Boolean	Disable	true
title	String	Custom media title	""
debug	Boolean	Logging to console	false
autoplay	Boolean	Auto play (if supported)	false
autopause	Boolean	Only allow one media playing at once (vimeo only)	true
seekTime	Number	Default time to skip when rewind/fast forward	10
volume	Boolean	Default volume	1
muted	Boolean	Default volume (0)	false
duration	Number	Pass a custom duration	null
displayDuration	Boolean	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	Boolean	Invert the current time to be a countdown	true
toggleInvert	Boolean	Clicking the currentTime inverts it's value to show time left rather than elapsed	true
ratio	String	Aspect ratio (for embeds)	"16:9"
clickToPlay	Boolean	Click video container to play/pause	true
hideControls	Boolean	Auto hide the controls	true
resetOnEnd	Boolean	Reset to start when playback ended	false
disableContextMenu	Boolean	Disable the standard context menu	true
loadSprite	Boolean	Sprite (for icons)	true
iconPrefix	String	Sprite (for icons)	"plyr"
iconUrl	String	Sprite (for icons)	"https://cdn.plyr.io/3.3.5/plyr.svg"
blankVideo	String	Blank video (used to prevent errors on source change)	"https://cdn.plyr.io/static/blank.mp4"
quality	Object	Quality default	{ default: 576, options: [ 4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240, "default" ] }
loop	Boolean	Set loops	{ loop: { active: false } }
speed	Object	Speed default and options to display	{ selected: 1, options: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ] }
keyboard	Object	Keyboard shortcut settings	{ focused: true, global: false }
tooltips	Object	Display tooltips	{ controls: false, seek: true }
captions	Object	Captions settings	{ active: false, language: 'auto', update: false }
fullscreen	Object	Fullscreen settings	{ enabled: true, fallback: true, iosNative: false }
storage	Object	Local storage	{ enabled: true, key: 'plyr' }
controls	Object	Default controls	[ 'play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen' ]
settings	Object		[ 'captions', 'quality', 'speed' ]
i18n	Object	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	Object	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	Object	API keys	{ google: null }
ads	Object	Advertisements plugin Register for an account here: http://vi.ai/publisher-video-monetization/	{ enabled: false, publisherId: '', tagUrl: '' }
tracks	Array		[]
previewThumbnails	Object	enabled: Whether to enable the preview thumbnails (they must be generated by you). src must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about preview thumbnails below.	{ enabled: false, src: '' }

Support

Please open an issue for support.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.