5.3.0 • Published 10 months ago

plyr-react v5.3.0

Weekly downloads
2,550
License
MIT
Repository
github
Last release
10 months ago

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} />
}
- 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:

Typescript example:

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

Support

If you like the project and want to support my work, give star ⭐ or fork it. [Featured on Openbase](https://openbase.com/js/plyr-react?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)

Thanks

  • [@realamirhe](https://github.com/realamirhe) For provide help for integrate to react-aptor.
  • [@iwatakeshi](https://github.com/iwatakeshi) For provide help for convert to typescript.
5.3.0

10 months ago

5.2.0

12 months ago

5.1.2

1 year ago

5.1.1

1 year ago

5.0.2

2 years ago

5.1.0

2 years ago

5.0.1

2 years ago

5.0.0

2 years ago

4.0.0-alpha.5

2 years ago

4.0.0

2 years ago

4.0.0-alpha.3

2 years ago

4.0.0-alpha.4

2 years ago

4.0.0-alpha.2

2 years ago

4.0.0-alpha.1

2 years ago

3.2.1

2 years ago

3.2.0

3 years ago

3.1.0

3 years ago

3.0.9

3 years ago

3.0.8

3 years ago

3.0.7

3 years ago

3.0.6

3 years ago

3.0.5

3 years ago

3.0.4

3 years ago

3.0.3

3 years ago

3.0.0

4 years ago

2.2.1-0

4 years ago

2.2.0

4 years ago

0.9.0

4 years ago

0.9.1

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago