@m2g/react-plyr v1.3.8

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:

npm install @m2g/react-plyr --save

Usage

Simple Video

import ReactPlyr from '@m2g/react-plyr';
import '@m2g/react-plyr/build/react-plyr.css';

// add the component in the render function
<ReactPlyr
  type="video"
  url="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
/>;

Simple Audio

import ReactPlyr from '@m2g/react-plyr';
import '@m2g/react-plyr/build/react-plyr.css';

// add the component in the render function
<ReactPlyr
  type="audio"
  title="Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;"
  url="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
/>;

Video with Source

import ReactPlyr from '@m2g/react-plyr';
import '@m2g/react-plyr/build/react-plyr.css';

// add the component in the render function
<ReactPlyr
  poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
  settings={['quality', 'captions']}
  sources={[
    {
      size: 576,
      src:
        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
      type: 'video/mp4',
    },
    {
      size: 720,
      src:
        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
      type: 'video/mp4',
    },
    {
      size: 1080,
      src:
        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
      type: 'video/mp4',
    },
    {
      size: 1440,
      src:
        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
      type: 'video/mp4',
    },
  ]}
  title="Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;"
  type="video"
  tracks={
    // @ts-ignore
    [
      {
        kind: 'captions',
        label: 'English',
        src: '/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
        srcLang: 'en',
      },
      {
        default: true,
        kind: 'captions',
        label: 'French',
        src: '/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
        srcLang: 'fr',
      },
    ]
  }
/>;

Video with Source and caption

import ReactPlyr from '@m2g/react-plyr';
import '@m2g/react-plyr/build/react-plyr.css';

// add the component in the render function
<ReactPlyr
  poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
  settings={['quality', 'captions']}
  sources={[
    {
      size: 576,
      src:
        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
      type: 'video/mp4',
    },
    {
      size: 720,
      src:
        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
      type: 'video/mp4',
    },
    {
      size: 1080,
      src:
        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
      type: 'video/mp4',
    },
    {
      size: 1440,
      src:
        'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
      type: 'video/mp4',
    },
  ]}
  title="Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;"
  type="video"
  tracks={
    // @ts-ignore
    [{
      kind: 'captions',
      label: 'English',
      src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
      srcLang: 'en',
    },
      {
        default: true,
        kind: 'captions',
        label: 'French',
        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
        srcLang: 'fr',
      }]
  }
  type="video"
  previewThumbnails={{
    enabled: true,
    src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
  }}
/>;

Audio with Source

import ReactPlyr from '@m2g/react-plyr';
import '@m2g/react-plyr/build/react-plyr.css';

// add the component in the render function
<ReactPlyr
      title='Example title'
      type="audio"
      sources={[
          {
              src: '/path/to/audio.mp3',
              type: 'audio/mp3',
          },
          {
              src: '/path/to/audio.ogg',
              type: 'audio/ogg',
          },
      ]}
/>;

HLS example

import ReactPlyr from '@m2g/react-plyr';
import '@m2g/react-plyr/build/react-plyr.css';

// add the component in the render function
<ReactPlyr
  isHls
  type='video'
  title='My title'
  url="https://stream.mux.com/Wxle5yzErvilJ02C13zuv8OSeROvfwsjS.m3u8"
/>;

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

Props

Support

Please open an issue for support.

Contributing

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