Package Exports

plyr-react
plyr-react/dist/src/index.es.js
plyr-react/dist/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (plyr-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Plyr React

plyr-react logo

A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.

Installation

# NPM
npm install plyr-react@4.0.0-alpha.1

# Yarn
yarn add plyr-react@4.0.0-alpha.1

Usage

import Plyr from 'plyr-react'
import 'plyr-react/dist/plyr.css'

export default function App() {
  return (
    <Plyr
      source={
        {
          /* https://github.com/sampotts/plyr#the-source-setter */
        }
      }
      options={
        {
          /* https://github.com/sampotts/plyr#options */
        }
      }
      {
        ...{
          /* Direct props for inner video tag (mdn.io/video) */
        }
      }
    />
  )
}

Using `ref`

// Functional component
const MyComponent = () => {
  const ref = useRef()

  useEffect(() => {
    // Access the internal plyr instance
    console.log(ref.current.plyr)
  })

  return <Plyr ref={ref} />
}

// Component class
class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.player = createRef()
  }

  componentDidMount() {
    // Access the internal plyr instance
    console.log(this.player.current.plyr)
  }

  render() {
    return (
      <>
        <Plyr ref={(player) => (this.player.current = player)} />
      </>
    )
  }
}

API:

Currently the exported APIs contains a latest instance of plyr.
In other words, the passing ref will have access to the player in the structure shown below.

return <Plyr ref={ref} />

// ref can get access to latest plyr instance with `ref.current.plyr`
ref = { current: { plyr } }

// so you can make your player fullscreen 🎉
ref.current.plyr.fullscreen.enter()

Example

You can fork these examples

Javascript example:

Typescript example:

Basic HLS integration Codesandbox

Demo: https://react-fpmwns.stackblitz.io

Nightly version of plyr-react:

Contribute

We are open to all new contribution, feel free to read CONTRIBUTING and CODE OF CONDUCT section, make new issue to discuss about the problem, and improve/fix/enhance the source code with your PRs. There is a ready to code Gitpod, you can jump into it from

Support

If you like the project and want to support my work, give star ⭐ or fork it.

Thanks

@realamirhe For provide help for integrate to react-aptor.
@iwatakeshi For provide help for convert to typescript.

plyr-react