Skip to content

chintan9/plyr-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

May 2, 2022
e77528a · May 2, 2022
Apr 26, 2022
Mar 23, 2022
Mar 23, 2022
Mar 23, 2022
Sep 13, 2021
Oct 25, 2021
Mar 23, 2022
Oct 13, 2020
Jul 14, 2020
Jan 17, 2020
Jul 14, 2020
Jul 14, 2020
Jan 18, 2020
Jan 17, 2020
Jul 13, 2020
Oct 7, 2020
Feb 10, 2021
Oct 13, 2020
Jan 18, 2020
Jan 18, 2020
Jan 30, 2020
Apr 15, 2022
Jan 18, 2020
May 2, 2022
May 2, 2022
Mar 24, 2022
Oct 7, 2020
Apr 26, 2022
Mar 22, 2022

Repository files navigation

Plyr React

plyr-react logo

A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.
tree-shakeable side-effect free

license downloads bundle size Language grade: JavaScript contributors badge

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: stackblitz example (js)

Typescript example: codesandbox example (ts)

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 Gitpod Ready-to-Code

Support

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

Thanks

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