chintan9
Plyr React
A responsive media player that is simple, easy to use, and customizable for video, audio, YouTube, and Vimeo.
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-reactUsage
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
, 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.