Skip to content

chintan9/plyr-react

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date
Oct 9, 2023
Jun 2, 2022
Jun 12, 2023
Oct 20, 2023
Feb 8, 2023
May 16, 2022
Oct 25, 2021
Oct 13, 2020
Jul 14, 2020
May 12, 2022
May 12, 2022
May 27, 2022
Jan 18, 2020
May 12, 2022
Jan 17, 2020
Jul 21, 2022
May 12, 2022
Oct 7, 2020
May 16, 2022
May 12, 2022
Jun 2, 2022
Jan 18, 2020
Jan 18, 2020
Jan 30, 2020
Jun 13, 2023
Dec 2, 2022
May 29, 2022
May 16, 2022
Nov 13, 2023
Oct 9, 2023
May 16, 2022
Oct 7, 2020
May 12, 2022
May 12, 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 Version Downloads

You can see a live demo here.

Make sure to select the version for the plyr-react in the dependencies.

Installation

# NPM
npm install plyr-react

# Yarn
yarn add plyr-react

Usage

Ready to use <Plyr /> component

The simplest form of react integration with the plyr is to use the <Plyr /> component, it is best for the static videos.

import Plyr from "plyr-react"
import "plyr-react/plyr.css"

const plyrProps = {
  source: undefined, // https://github.com/sampotts/plyr#the-source-setter
  options: undefined, // https://github.com/sampotts/plyr#options
  // Direct props for inner video tag (mdn.io/video)
}

function MyPlyrVideo() {
  return <Plyr {...plyrProps} />
}
Old version 4 plyr-react - The path for an import of css styles has been changed in version 5, if you are using the version 4, apply following change in the above code
- import "plyr-react/plyr.css"
+ import "plyr-react/dist/plyr.css"

Ready to use usePlyr hook

If you need the full control over all if possible integration one can imagine, usePlyr is your hook. Here is a simple and exact Plyr component made with the usePlyr hook. Are curios about how it works follow this thread and this proposal.

const Plyr = React.forwardRef((props, ref) => {
  const { source, options = null, ...rest } = props
  const raptorRef = usePlyr(ref, {
    source,
    options,
  })
  return <video ref={raptorRef} className="plyr-react plyr" {...rest} />
})

Accessing the plyr instance using refs

// Function base component
const MyComponent = () => {
  const ref = useRef()

  useEffect(() => {
    console.log("internal plyr instance:", ref.current.plyr)
  })

  return <Plyr ref={ref} />
}

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

  componentDidMount() {
    console.log("internal plyr instance", 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

Check out the examples directory for the useHls integration guide.

<video
  ref={usePlyr(ref, {
    ...useHls(hlsSource, options),
    source,
  })}
  className="plyr-react plyr"
/>

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 Gitter, 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.